Custom CSS & Custom JavaScript

by weedesign

Rating: 5.0

Downloads: 178

Custom CSS and JavaScript from the administration: per sales channel, restricted to selected pages, bound to cookie consent, with automatic version history and one-click theme compile.

Annually €3.99* /month €57.48 * €47.90* /year 16.67% discount In comparison to the regular monthly price

Monthly €4.79* /month Cancelable monthly

Compatible with:

6.6.0.0 - 6.7.13.0

Includes:

Free trial month

The subscription starts with a free trial month during which it can be canceled at any time.

All updates

During the subscription all released updates are included for free

Support from the Extension Partner

In case you have any questions or problems with your extension you can always ask the Extension Partner for help during the subscription.

Description

Highlights

Any number of CSS/SCSS and JavaScript containers, each with its own active switch and sales channel assignment
Delivery restricted to selected pages, or excluded from them, by page type, URL, product, category or landing page
JavaScript can be tied to a cookie so it only runs after consent has been given, starting without a page reload
Automatic version history with the last 20 saves per container, including date and user, restorable in the form
CSS is compiled together with the theme, so SCSS syntax and theme variables work in the editor

Features

Code editors with syntax highlighting for CSS/SCSS and for JavaScript
Dropdown with 135 theme SCSS variables that are inserted at the cursor position
Color picker that writes the selected hex value straight into the CSS editor
Eight bundled JavaScript libraries, added with a single line and served from your own server: Cesium, D3, Dojo, Ext Core, Hammer, jQuery 3.7.1, List.js and Model Viewer
Save & Compile rebuilds the theme of every sales channel without leaving the detail view

17 selectable page types, from the home page and category listings to the checkout steps and account pages
URL rules based on the SEO path, with * as a wildcard, for example /campaign/* or sale
A selected parent product also covers all of its variants, and categories optionally cover all subcategories
Automatic scoping of restricted CSS through a body class, including nested media, supports, container and layer blocks
Rule cache that refreshes on its own whenever a container or a sales channel assignment is saved
Separate entry in the storefront cookie consent manager, with its own group, translated description and a cookie valid for 30 days
Cookies set by an external consent tool can serve as the condition instead
Four separate rights for viewing, editing, creating and deleting
Overview list with name, status, assigned sales channels and current restriction mode, plus a rebuild after deleting an entry
English and German texts in both the administration and the storefront

Show more Show less

About the Extension

Custom code usually ends up somewhere in the theme, where it is hard to find, hard to switch off and only editable by someone with file access. This extension moves that code into the administration and stores it in named containers. Each container holds a CSS/SCSS block and a JavaScript block, has its own active switch, and can be assigned to specific sales channels or left open for all of them.

The CSS is passed to the theme compiler together with the rest of the theme styles. SCSS syntax and existing theme variables such as $primary or $font-family-base therefore work directly in the editor, and the result ends up in the regular theme stylesheet. The JavaScript is written into the theme's script directory during compilation and delivered as a static asset.

Not every snippet belongs on every page. A container can be limited to selected pages or excluded from them. A page counts as selected as soon as one criterion matches: the page type (home page, category listing, product detail, search, cart, the checkout steps, account pages, landing and CMS pages), a URL path with wildcards, a product including its variants, a category with or without its subcategories, or a landing page. Matching happens while the page is rendered, so criteria can be adjusted at any time and apply on the next page view. Switching the delivery mode itself or editing the code needs a compilation, which the Save & Compile button takes care of.

The JavaScript of a restricted container is wrapped in a condition, and its CSS is rewritten automatically so that every selector only applies below the matching body element. Nested media, supports, container and layer blocks are rewritten as well.

For scripts that need consent, a cookie name can be stored per container. The JavaScript then waits until that cookie exists with a value and starts as soon as the visitor accepts, without a page reload. The container can register itself in the cookie consent manager of the storefront as its own entry, or rely on a cookie that an external consent tool sets. This binding applies to JavaScript; CSS is always loaded.

Every save writes a snapshot with the code, all settings and the user who saved it. The last 20 snapshots per container stay available, are listed with date and user name, and can be loaded back into the form. What is currently live stays untouched until the restored state is saved.

Custom code usually ends up somewhere in the theme, where it is hard to find, hard to switch off and only editable by someone with file access. This extension moves that code into the administration and stores it in named containers. Each container holds a CSS/SCSS block and a JavaScript block, has its own active switch, and can be assigned to specific sales channels or left open for all of them.

The CSS is passed to the theme compiler together with the rest of the theme styles. SCSS syntax and existing theme variables such as $primary or $font-family-base therefore work directly in the editor, and the result ends up in the regular theme stylesheet. The JavaScript is written into the theme's script directory during compilation and delivered as a static asset.

Not every snippet belongs on every page. A container can be limited to selected pages or excluded from them. A page counts as selected as soon as one criterion matches: the page type (home page, category listing, product detail, search, cart, the checkout steps, account pages, landing and CMS pages), a URL path with wildcards, a product including its variants, a category with or without its subcategories, or a landing page. Matching happens while the page is rendered, so criteria can be adjusted at any time and apply on the next page view. Switching the delivery mode itself or editing the code needs a compilation, which the Save & Compile button takes care of.

The JavaScript of a restricted container is wrapped in a condition, and its CSS is rewritten automatically so that every selector only applies below the matching body element. Nested media, supports, container and layer blocks are rewritten as well.

For scripts that need consent, a cookie name can be stored per container. The JavaScript then waits until that cookie exists with a value and starts as soon as the visitor accepts, without a page reload. The container can register itself in the cookie consent manager of the storefront as its own entry, or rely on a cookie that an external consent tool sets. This binding applies to JavaScript; CSS is always loaded.

Every save writes a snapshot with the code, all settings and the user who saved it. The last 20 snapshots per container stay available, are listed with date and user name, and can be loaded back into the form. What is currently live stays untouched until the restored state is saved.

Details

Available: English, German
Latest update: 12 August 2026
Publication date: 20 August 2024
Version: 2.1.0
Category: Special features

Resources

Reviews (3)

Average rating

5.0

Based on 3 reviews

5.0 Functionality

5.0 Usability

5.0 Documentation

5.0 Support

Write a review

If you downloaded this extension you can write a review in the Shopware Account.

Write a review

Sort by

Super Plugin

5.0

by Lukas

8 August 2025 17:57

Plugin funktioniert ohne Probleme. Bei Fragen wird auf Tickets sofort geantwortet und gleich mit einer Lösung oder einem Update geholfen.

5.0 Functionality

5.0 Usability

5.0 Documentation

5.0 Support

Einfacher geht nicht

5.0

by Luca Reischl

22 April 2025 12:11

Klasse Erweiterung. Genau das, was wir benötigten. Noch einfacher geht es nicht und funktioniert ohne Probleme.

5.0 Functionality

5.0 Usability

5.0 Documentation

5.0 Support

Super Plugin

5.0

by Seb

24 September 2024 15:49

Macht genau, was es verspricht.

5.0 Functionality

5.0 Usability

5.0 Documentation

5.0 Support

About the Extension Partner

weedesign

See all extensions

Partner Status

Shopware
Extension Partner

Details

Ø-Rating: 4.9

Average rating of 4.9 out of 5 stars
Partner since: 2019
Extensions: 49

Support

Based in: Germany
Speaks: German, English
Response time: Very quickly