Superior PRO – Your look. For your shop and your clients.
Description
Highlights
- Over 300 settings, four color schemes, then every color on its own
- Header, navigation and product columns per device, mixed as you like
- Parallax, blend mode and offset right on the section
- Ready-made blocks plus grids from one to six columns
- Own elements from teaser and FAQ to gallery and scrolling text
Features
- Four color schemes, then colors, backgrounds, buttons and rounding on their own
- Fonts and headings H1 to H6 across the shop
- Single- or multi-line header, search, sticky with shadow, top bar and logo per device
- Slim centered layout with a width you choose
- Navigation with colors, type, flyout per level and category image
- Product columns 1, 2, 3, 4 or 6 per device, with and without a sidebar, box content optional
- Footer columns in width and order, newsletter, social icons and up to four benefits
- Product-page tabs in their own colors
- Parallax, blend mode and offset for section backgrounds
- Ready-made blocks for header, teaser, FAQ, tabs, text, image-text, gallery and ticker
- Grids from 1 to 6 columns, four layouts and a column gap per block
- Teaser with format, button, link and hover effect
- Accordion with optional FAQ rich snippets
- Tabs, picture gallery and scrolling text with their own settings
- Fields for your own HTML, CSS and JavaScript
About the Extension
One theme that adapts to the shop
You build your own shop and want it to look like a brand. Or you build shops for clients and need a base that works from a quiet storefront to a detailed one. Superior PRO is built for both: over 300 settings in the theme manager, ready-made content blocks, and pages you shape section by section.
Most choices happen in the interface. Colors, type, header, navigation, product lists and footer apply across the shop. Individual pages get their own elements. Coding stays the exception, not the starting point.
Colors in one click, fine-tuning after
Four ready-made color schemes set the palette at once: sage green, orange with slate blue, black-white-grey, or amber with black. After that every color stays editable on its own. Primary and secondary color, borders, page and content backgrounds, status colors, price and buy button live in one place. Many other color fields point at these values. Change the primary color and the linked spots follow.
You also decide how rounded the shop feels: separately for buttons, form fields and surfaces such as images, cards and teasers. You enter the fonts for body text and headings yourself, from H1 to H6, with size, weight, line height and letter spacing. The hierarchy stays consistent on the homepage, in categories and on the product page.
Header, navigation and lists that follow the range
The header is single-line or multi-line. Search stays visible or opens from the icon. The header can remain at the top while scrolling, with or without a shadow. The bar above it collapses, stays open, or stays hidden. Logo widths are separate for desktop, tablet and phone. A slim, centered layout with its own width is as easy as full width.
You color and set the navigation yourself: colors, size, weight, spacing, capitals and alignment. The flyout has its own values per level, and the category image can sit beside the links.
In the product listing you set the column count per device: 1, 2, 3, 4 or 6, separately for lists with and without a sidebar. Description, variant properties and price unit can be shown or hidden, as can image height and content alignment. The product box, sidebar navigation and filters have their own colors.
At the bottom you build the footer from columns you show, size and reorder one by one. Newsletter and social icons sit as a column or as their own row. Up to four benefits, each with a heading, text and link, form a bar in the shop. The tabs on the product page can use their own colors. Form fields, slider arrows, wishlist and pagination have their own colors, so the details match the rest of the shop.
Pages with depth, without an extra module
A section with a background image can do more than show a flat photo. Parallax moves the image more slowly than the content, or keeps it fixed while you scroll. When color and image are both set, blend mode mixes them, for example multiply, overlay or color. You see the mix in the editor, including together with parallax. Offset pushes the content past the background into the next section while the image stays put.
Ready-made blocks, grids and layouts
You fill the homepage, categories and landing pages with blocks that already contain the right element. You only add the content:
- Page and category header at full width
- Teaser image box in 2, 3 or 4 columns
- Accordion with text and FAQ side by side
- Tabs at full width
- Extended text in 2, 3 or 4 columns
- Image with a text tile in 2, 3 or 4 columns
- Picture gallery and scrolling text at full width
There are also grids from one to six columns, including uneven splits, and four nested layouts, such as one large area beside two smaller ones. You set the gap between columns on the block. In any column you can swap the element when a ready-made block is not quite right.
The elements at a glance
Teaser Image Box
An image area with a button for campaigns, categories or entry points. You choose format, text, link and subtle hover effects such as zoom or shadow. The button can be hidden while the area stays linked. Ready-made blocks with 2, 3 or 4 columns are included.
Accordion
Questions and answers that open and close, up to 25 entries. Optionally as an FAQ with rich snippets, so search engines can read the questions. The ready-made block places a text area next to the accordion.
Tabs
Up to 25 tabs side by side, without stretching the page. Useful for product info, delivery details or comparisons. The ready-made block places the element at full width.
Page Header
A large title area with image, text and breadcrumb, for example at the top of a category page. You set overlay, height and spacing yourself. Image and text can be bound to the category.
Extended Text
Text with background, gradient, alignment and separate colors for heading and body. Use it to build tiles of equal height. Ready-made blocks with 2, 3 or 4 columns, also with an image above, are included.
Picture Gallery
Several images in a grid, with a large-view click. You set columns per device, gap and format. A fixed format gives an even grid, the original format a loose, staggered one.
Scrolling Text
An endless ticker for offers, notes or brand lines. Each line becomes one segment. You set speed, pause on hover and colors.
HTML / CSS
A free field when a page needs a small custom solution. Most shops are covered by the other elements.
When an agency adds its own note
For the last polish there are fields for your own HTML, CSS and JavaScript on every page. Use them to verify a domain, load a font or add a class, without bending the theme. If you maintain the shop yourself, leave this area empty.
Build it yourself, or roll it out for clients
Install Superior PRO, pick a color scheme and set a header, a product list and a first section with a teaser or parallax. You will see quickly how far you get without custom development. Keep the theme, and you skip rebuilding that base for every next shop.
One theme that adapts to the shop
You build your own shop and want it to look like a brand. Or you build shops for clients and need a base that works from a quiet storefront to a detailed one. Superior PRO is built for both: over 300 settings in the theme manager, ready-made content blocks, and pages you shape section by section.
Most choices happen in the interface. Colors, type, header, navigation, product lists and footer apply across the shop. Individual pages get their own elements. Coding stays the exception, not the starting point.
Colors in one click, fine-tuning after
Four ready-made color schemes set the palette at once: sage green, orange with slate blue, black-white-grey, or amber with black. After that every color stays editable on its own. Primary and secondary color, borders, page and content backgrounds, status colors, price and buy button live in one place. Many other color fields point at these values. Change the primary color and the linked spots follow.
You also decide how rounded the shop feels: separately for buttons, form fields and surfaces such as images, cards and teasers. You enter the fonts for body text and headings yourself, from H1 to H6, with size, weight, line height and letter spacing. The hierarchy stays consistent on the homepage, in categories and on the product page.
Header, navigation and lists that follow the range
The header is single-line or multi-line. Search stays visible or opens from the icon. The header can remain at the top while scrolling, with or without a shadow. The bar above it collapses, stays open, or stays hidden. Logo widths are separate for desktop, tablet and phone. A slim, centered layout with its own width is as easy as full width.
You color and set the navigation yourself: colors, size, weight, spacing, capitals and alignment. The flyout has its own values per level, and the category image can sit beside the links.
In the product listing you set the column count per device: 1, 2, 3, 4 or 6, separately for lists with and without a sidebar. Description, variant properties and price unit can be shown or hidden, as can image height and content alignment. The product box, sidebar navigation and filters have their own colors.
At the bottom you build the footer from columns you show, size and reorder one by one. Newsletter and social icons sit as a column or as their own row. Up to four benefits, each with a heading, text and link, form a bar in the shop. The tabs on the product page can use their own colors. Form fields, slider arrows, wishlist and pagination have their own colors, so the details match the rest of the shop.
Pages with depth, without an extra module
A section with a background image can do more than show a flat photo. Parallax moves the image more slowly than the content, or keeps it fixed while you scroll. When color and image are both set, blend mode mixes them, for example multiply, overlay or color. You see the mix in the editor, including together with parallax. Offset pushes the content past the background into the next section while the image stays put.
Ready-made blocks, grids and layouts
You fill the homepage, categories and landing pages with blocks that already contain the right element. You only add the content:
- Page and category header at full width
- Teaser image box in 2, 3 or 4 columns
- Accordion with text and FAQ side by side
- Tabs at full width
- Extended text in 2, 3 or 4 columns
- Image with a text tile in 2, 3 or 4 columns
- Picture gallery and scrolling text at full width
There are also grids from one to six columns, including uneven splits, and four nested layouts, such as one large area beside two smaller ones. You set the gap between columns on the block. In any column you can swap the element when a ready-made block is not quite right.
The elements at a glance
Teaser Image Box
An image area with a button for campaigns, categories or entry points. You choose format, text, link and subtle hover effects such as zoom or shadow. The button can be hidden while the area stays linked. Ready-made blocks with 2, 3 or 4 columns are included.
Accordion
Questions and answers that open and close, up to 25 entries. Optionally as an FAQ with rich snippets, so search engines can read the questions. The ready-made block places a text area next to the accordion.
Tabs
Up to 25 tabs side by side, without stretching the page. Useful for product info, delivery details or comparisons. The ready-made block places the element at full width.
Page Header
A large title area with image, text and breadcrumb, for example at the top of a category page. You set overlay, height and spacing yourself. Image and text can be bound to the category.
Extended Text
Text with background, gradient, alignment and separate colors for heading and body. Use it to build tiles of equal height. Ready-made blocks with 2, 3 or 4 columns, also with an image above, are included.
Picture Gallery
Several images in a grid, with a large-view click. You set columns per device, gap and format. A fixed format gives an even grid, the original format a loose, staggered one.
Scrolling Text
An endless ticker for offers, notes or brand lines. Each line becomes one segment. You set speed, pause on hover and colors.
HTML / CSS
A free field when a page needs a small custom solution. Most shops are covered by the other elements.
When an agency adds its own note
For the last polish there are fields for your own HTML, CSS and JavaScript on every page. Use them to verify a domain, load a font or add a class, without bending the theme. If you maintain the shop yourself, leave this area empty.
Build it yourself, or roll it out for clients
Install Superior PRO, pick a color scheme and set a header, a product list and a first section with a teaser or parallax. You will see quickly how far you get without custom development. Keep the theme, and you skip rebuilding that base for every next shop.
Details
- Available: English, German
- Latest update: 29 September 2026
- Publication date: 16 March 2023
- Version: 1.6.11
- Category: Sport, lifestyle + travel
Resources
Reviews (4)
Average rating of 5 out of 5 stars
Super Theme, vorbildlicher Support
Average rating of 5 out of 5 stars
Sehr zufrieden
Average rating of 5 out of 5 stars
Toller Support und Top Theme!
Average rating of 5 out of 5 stars
Klares, vielseitig einstellbares und strukturiertes Theme im Frontend und Backend bei fairem Preis mit prima Support
Average rating of 5 out of 5 stars
Schließlich habe ich mich für das Superior Pro entschieden aus folgenden Gründen:
- Klares, übersichtliches Layout im Frontend
- klar strukturierte Einstellungen im Backend im Thememanager
- Mit über 300 Einstellungsmöglichkeiten kann man für meinen Gebrauch schon extrem viel einstellen. Es gibt Themes, die sich mit 2000 Einstellungen bewerben. Aber da sehe zumindest ich, obwohl IT-Fachmann, den Wald vor lauter Bäumen nicht mehr.
- Der Support hat mich auch in der Testphase überzeugt. Er ist wirklich schnell und wenn man überzeugend argumentiert, dass ein Feature auch für viele Benutzer nützlich ist, dann wird bzw. wurde es sogar gleich von Muto umgesetzt. Das fand ich toll. Das geht vermutlich nur, weil es eben ein kleines Unternehmen mit kurzen Wegen ist.
- Schließlich, das Theme liegt im Preis im Vergleich zu anderen Themes merklich darunter. Wenn man im Angebot kaufen kann, dann ist das natürlich von extra Vorteil.
Fazit: Ein klares, schönes Theme mit ordentlichem Frontend und Backend zu einem noch akzeptablen Preis. Ebenso einen Support, mit dem man notfalls auch mal reden kann, wenn alle Stricke reißen.
Ich kann es nur weiterempfehlen!!
About the Extension Partner
muto.at
Partner Status
-
Shopware
Extension Partner
Details
-
Ø-Rating:
5
Average rating of 5 out of 5 stars
- Partner since: 2017
- Extensions: 13
Support
- Based in: Austria
- Speaks: German, English
- Response time: Very quickly
- Frontend:
- Go to demo
You can find an overview of the functions and help in our documentation:
1.6.11 6.7.0.0 - 6.7.14.2
- Theme: under Product listing, products per row, the gap between product boxes can be set. Empty keeps the current gap. An entered value sets it horizontally and vertically. Saved themes stay unchanged until a value is entered.
- Theme: under Product listing, product boxes, the image ratio can be set. Not set keeps the product image height. A chosen format replaces the height, the image fills the area and is cropped to fit. Saved themes stay unchanged until a format is chosen.
- Shopping Experiences: two new grids, Grid 7 centered and Grid 9 centered. From desktop one column sits in the middle, below that it uses the full width. New blocks start with the empty element.
- Theme: under Miscellaneous, slider and carousel, the image slider transition can be set. Slide stays the default. Fade crossfades the images. Product gallery and product sliders keep sliding.
- Theme: H1 to H6 each have their own color. The starting value is the headline color. Saved themes stay unchanged until a level is set on its own.
- Shopping Experiences: on category pages, sidebar and product list have 30 px space to the screen edge, including on desktop. 60 px remain between the columns.
- Shopping Experiences: column blocks in a full width section have their gap again, including the default gap. The content stays at the edge, and the page does not scroll sideways.
- Shopping Experiences: new grid blocks start with an empty element. The editor shows “Choose a CMS element”, and the column stays empty in the storefront. Saved layouts keep their text slots.
- Shopping Experiences: the image in new layout blocks starts cropped with a 300 px minimum height. Each text element in them starts with one heading and one paragraph. Saved layouts keep display mode, height and text.
1.6.10 6.7.0.0 - 6.7.14.2
- Shopping Experiences: a full-width section no longer scrolls sideways. The content stays at the edge, and set column gaps stay.
- Shopping Experiences: the section blend mode also applies when Parallax is selected. The image layer keeps the section background color.
- Shopping Experiences: section settings have a blend mode select above the parallax field. The choice mixes the background image with the background color and is visible in the editor. Other classes stay.
- Shopping Experiences: section parallax stays slow while the section crosses the window. The image moves only part of its spare height and stays inside the section.
- Shopping Experiences: section parallax moves through the spare image height while the section crosses the window. The image stays inside the section.
- Shopping Experiences: the section parallax field adds a Parallax choice next to Fixed. The background image moves slower than the content. Fixed keeps the image in place.
- Shopping Experiences: the offset and parallax choices in section settings stay saved. Other classes stay as well.
- Shopping Experiences: section settings have a parallax select below the image mode. The choice writes muto-parallax into the CSS class field. Other classes stay. Typing the class still works.
- Shopping Experiences: section settings have an offset select above the CSS class field. The choice writes the offset class into that field. Other classes stay. Typing the class still works. The offset is visible in the editor, the section background stays in place, and the left rail covers the full height.
- Shopping Experiences: the chosen column spacing is visible on that block in the editor. Other blocks on the page stay unchanged. “Not set” and “Default” keep the administration’s own spacing.
- Shopping Experiences: new blocks with two, three and four columns. Each column has a Shopware image and an extended text element below it. The image keeps its own height. The text fills the space below the image and sits directly against the image, so "background only around content" still applies there. The shared edge has no element radius; swapping the elements reverses which corners stay square. The same applies to the Teaser Image Box. With minimum height, the box grows up to the tallest column and the text stays against the box. In the administration, image and text sit against each other as in the storefront, and the heights behave the same. New blocks start with background colour black at alpha 0.05. Existing blocks stay unchanged.
- Flyout navigation: with the sticky shadow on, the shadow no longer paints over the main navigation. The shadow below the flyout stays the same. Shops with the shadow off stay unchanged.
- Product detail: the graduated-price table and the properties table use the element border radius. Row colours stay unchanged.
- Product detail, individual tab style: from tablet up, the tab content uses the button radius on the top-right, bottom-right and bottom-left corners. The top-left corner stays square so the first tab sits flush. On mobile, the tab buttons use the same button radius on all corners. The standard tab style stays unchanged.
- Extended text element (muto-element-6): the two background colours can include transparency. A gradient uses that transparency. Headline and text colours stay opaque. Stored colours stay unchanged until the alpha slider is moved.
1.6.9 6.7.0.0 - 6.7.14.2
- Footer: optionale URL Felder für TikTok, Telegram und Discord. Bestehende Social Links bleiben unverändert, ohne URL erscheint kein Icon.
- Theme Presets: ein Preset Wechsel setzt Hintergrund und Text des Newsletter E Mail Feldes auf die Formularfeld Farben zurück.
- Newsletter: der Rahmen des E Mail Feldes nutzt die Hintergrundfarbe des Feldes, auch im Fokus. Der Platzhalter nutzt die Textfarbe mit 70 % Deckkraft.
- Newsletter: das E Mail Feld hat eigene Farben für Hintergrund und Text. Beide starten mit den Formularfeld Farben, bestehende Themes bleiben unverändert.
- Produktdetail: der Kopf der Staffelpreise nutzt die Rahmenfarbe. Die Preiszeilen sind 5 % heller als der Rahmen.
- Footer: die Service Menü Liste entfällt, wenn keine Service Menü Einträge vorhanden sind. Mit Einträgen bleibt die Liste unverändert.
- Footer: die Social Media Zeile entfällt, wenn im Theme Manager kein Social Link gesetzt ist. Mit mindestens einem Link bleiben Zeile und Icons unverändert.
- Produktliste: während Filter neu laden, zeigt jede Produktbox nur noch mittig einen Kreis in der Primary Farbe. Der Inhalt der Box, einschließlich Wunschlisten Icon und Steuer Link, ist ausgeblendet. Die Farben außerhalb des Ladezustands bleiben unverändert.
- Wunschlisten Karte: der Entfernen Button sitzt an derselben Bildecke wie der Hinzufügen Button und nutzt den Theme Button Radius. Farben, Hover und das Kreuz bleiben unverändert.
- Löschen Button im Warenkorb: das Icon sitzt mittig, die Höhe bleibt. Offcanvas Close und Header Aktionen behalten die Shopware Ausrichtung.
- Mengenauswahl: Minus und Plus Icons sitzen in jedem Browser mittig im Button. Größe, Farben und Radius bleiben unverändert.
- Pagination: Seitenzahlen und Pfeile sitzen mittig im 35 px Button. Farben, Größe und Radius bleiben unverändert.
1.6.8 6.7.0.0 - 6.7.14.2
- Accordion (`muto-element-2`) and Tabs (`muto-element-3`): empty header colours use a white background and the theme text colour. Hover and the open or active state use the primary colour and `color-contrast()`. Stored colours stay unchanged.
1.6.7 6.7.0.0 - 6.7.14.2
- Shopping Experiences: Teaser Image Box, Accordion, Tabs, page header and scrolling text show the same note at the top of the settings tab. Empty colour fields use the theme colours; a chosen colour overrides that.
- Scrolling Text (muto-element-8): new elements leave the three gradient colours and the text colour empty. Empty fields use the primary colour, a lightened primary and color-contrast(). The editor preview uses a grey gradient with black text, not the shop primary. Stored colours stay unchanged.
- Page header (muto-element-4): new elements leave overlay and text colour empty. Empty fields use the primary colour for the overlay and color-contrast() for the text. Stored colours stay unchanged. The editor preview uses a black overlay with white text, not the shop primary.
- Accordion (muto-element-2): the default headline size for new elements is 16 px (was 18 px). Tabs were already 16 px. Stored sizes on existing elements stay unchanged.
- Shopping Experiences preview: an empty Teaser Image Box button is white with default text colour. Empty Accordion and Tabs headers use Shopware's light grey background with the same text colour. A chosen colour still overrides the preview.
- Teaser Image Box, Accordion and Tabs: empty colour fields are no longer filled with the old defaults in the storefront resolver, so the SCSS fallback applies. Stored colours stay unchanged.
- Accordion (muto-element-2) and Tabs (muto-element-3): new elements leave header colours empty. Empty fields use the primary colour and color-contrast(); hover and the open or active state use a darkened primary. Stored colours on existing elements stay unchanged.
- Teaser Image Box (muto-element-1): new elements leave button and text colours empty. Empty fields use a white button with primary text; hover uses the primary colour and color-contrast() for the label. Stored colours on existing elements stay unchanged.
- Shopping Experiences: multi-column and layout blocks follow the storefront wrap in the mobile and tablet preview. Tablet follows col-md, not the desktop grid: one column where only col-lg applies, two equal columns for col-md-6, and the mixed rows of 3-3-6, 6-3-3, the six-column grid and the layouts. Storefront markup is unchanged.
- Theme Manager: social media links (muto-footer-social-*) are type url, so Validate no longer rejects URLs as invalid SCSS text. Stored links and the storefront stay unchanged.
- Theme Manager: the detail page is wrapped in muto-theme-manager-detail. Superior PRO additionally gets is-theme-muto-superior-pro so the administration can be styled for this theme only. Storefront and stored theme values stay unchanged.
1.6.6 6.7.0.0 - 6.7.14.2
- Theme Manager: new color preset select (`muto-color-preset`) with four palettes — Green (sage `#60855d`), Orange-Blue (orange `#EA5C1F`, slate `#4F5D75`), Mono (black/white/grey) and Yellow-Black (amber `#f8ab27`). Default is `custom` and does not change colors; a preset is applied only when the merchant changes the select. Applying a preset first resets all color defaults, then the palette. Changing a brand color afterwards resets the select to `custom`.
- Theme Manager (Miscellaneous): new cards for storefront (login/checkout, `muto-card-background-color`) and customer account (`muto-account-card-background-color`), plus Offcanvas close-button background (`muto-offcanvas-close-background-color`; text/icon via contrast in SCSS).
1.6.5 6.7.0.0 - 6.7.14.2
- Picture Gallery (muto-element-7): more stable storefront behaviour without visual or configuration changes. Lightbox is scoped per gallery, masonry runs only for the original aspect ratio (CSS grid for fixed ratios), thumbnail sizes match the column layout, and both masonry and lightbox use Shopware storefront plugins (Ajax/CMS refresh). Existing layouts and stored theme values remain unchanged.
- Picture Gallery (muto-element-7): direct image upload in the element configuration works again (upload listener and media resolution via targetId, aligned with the Shopware image slider). Existing layouts remain unchanged.
- Teaser Image Box (muto-element-1): the link field now uses the Shopware URL picker (category, product, URL, media, email, phone). Existing layouts keep their stored buttonLink values and defaults; no configuration change is required.
- HTML/CSS element (muto-element-5): the Twig compiler works again in the storefront (render filter on the Shopware Twig environment). Existing layouts and stored twigActive values remain unchanged.
- Administration: Accordion and Tabs editors (muto-element-2 / muto-element-3) emit on input and blur so content saves; opening an existing element no longer rewrites stored HTML.
- Administration: Image with Text and Extended Text (muto-element-4 / muto-element-6) get the Shopware mapping toolbar button; Accordion and Extended Text switches (firstOpen, faqRichSnippets, backgroundSizeContent) persist as booleans.
- Header: Wishlist and cart links keep the same markup and spacing; only ARIA attributes were added. Footer remains unchanged.
- Storefront: TopBar collapse and preloader run as PluginManager plugins with the same IDs, localStorage keys and 500 ms minimum delay.
- Teaser Image Box and Image with Text: mapped string media IDs are resolved; Element 1 also loads thumbnails. Unchanged static images stay unchanged.
- Theme compile: scss: false only on Twig-only fields that have no $muto-… usage (sticky-shadow and other SCSS variables untouched). Existing layouts and theme values remain unchanged.
- Administration: Accordion and Tabs (muto-element-2 / muto-element-3) can add, remove and reorder entries. Stored keys (numItems, itemTitle1–25, itemContent1–25) and the storefront remain unchanged.
- Accordion (muto-element-2): FAQ rich snippets (JSON-LD) strip HTML tags from the answer text, matching the MCEP accordion. Visible accordion markup and stored values remain unchanged.
- Teaser Image Box (muto-element-1): optional box format select (aspect ratios or minimum height, as in MCEP). Existing elements keep their stored elementHeight; the new boxFormat defaults to minimum height, so layouts stay unchanged until a ratio is chosen.
- Teaser Image Box (muto-element-1): administration settings tab groups fields under General, Button and Effects headlines with the same underline style as the Picture Gallery. Stored configuration and storefront output remain unchanged.
- Administration: Shopping Experiences block sidebar gets a column-spacing select (muto-gutter-*). Existing CSS classes on a block are kept and a stored gutter class is shown as the active option. New default/20–50 classes are opt-in; existing muto-gutter-0/5/10/15 styles and layouts without a gutter class remain unchanged.
- New CMS element Scrolling Text (muto-element-8): infinite marquee with speed, pause on hover, gradient background, typography and spacing. Available in Shopping Experiences without a dedicated wrapper block. Existing layouts remain unchanged.
- Teaser Image Box (muto-element-1): default button font size is now 16 px (was 18 px). Applies only to newly inserted elements; stored values remain unchanged.
- Accordion (muto-element-2) and Tabs (muto-element-3): newly inserted elements get a Lorem ipsum paragraph in the first content editor. Stored content remains unchanged.
- New CMS blocks for Accordion (muto-blocks-element-2) and Tabs (muto-blocks-element-3) in “+ Elements (SuperiorPRO)”. Accordion is text plus muto-element-2 (4/8); Tabs is a full-width wrapper around muto-element-3. Sidebar previews use sw-cms-preview-muto-blocks-element-2.jpg and sw-cms-preview-muto-blocks-element-3.jpg under public/static/img/cms/. Existing layouts remain unchanged.
- New CMS blocks for Teaser Image Box (muto-element-1) with 2, 3 and 4 columns in “+ Elements (SuperiorPRO)”. Newly inserted slots set box format to 1:1. Sidebar previews use sw-cms-preview-muto-blocks-element-1-2-cols.jpg (and 3/4); add the files under public/static/img/cms/. Existing layouts and the element defaults remain unchanged.
- Picture Gallery (muto-element-7): masonry now keeps a stored gap of 0 (previously fell back to 16 px). Other gap values and fixed aspect ratios remain unchanged.
- New CMS block for Picture Gallery (muto-blocks-element-7) in “+ Elements (SuperiorPRO)”. Full-width wrapper around muto-element-7. Sidebar preview uses sw-cms-preview-muto-blocks-element-7.jpg under public/static/img/cms/. Existing layouts remain unchanged.
- CMS blocks now default left and right margins to empty (like Shopware). Applies only to newly inserted blocks; stored margins in existing layouts remain unchanged.
- New CMS block for Scrolling Text (muto-blocks-element-8) in “+ Elements (SuperiorPRO)”. Full-width wrapper around muto-element-8. Sidebar preview uses sw-cms-preview-muto-blocks-element-8.jpg under public/static/img/cms/. Existing layouts remain unchanged.
- New CMS blocks for Extended Text (muto-element-6) with 2, 3 and 4 columns in “+ Elements (SuperiorPRO)”. Newly inserted blocks set a centered h3/p placeholder, background colour 1 to #e7e9ef, vertical align to center and background-only-on-content to off per slot. Sidebar previews use sw-cms-preview-muto-blocks-element-6-2-cols.jpg (and 3/4); add the files under public/static/img/cms/. Existing layouts and the element defaults remain unchanged.
- Extended Text (muto-element-6): administration preview uses the same heading and paragraph typography as the Shopware text element. Stored content and the storefront remain unchanged.
1.6.4 6.7.0.0 - 6.7.14.2
- New CMS element Picture Gallery (`muto-element-7`): masonry image gallery with optional lightbox, configurable columns, gap, aspect ratio and border. Available in Shopping Experiences without a dedicated wrapper block.
- Accordion CMS element (`muto-element-2`): optional Schema.org FAQ rich snippets (JSON-LD `FAQPage`) in the storefront. Disabled by default in the element settings; existing layouts remain unchanged.
1.6.3 6.7.0.0 - 6.7.14.2
- CMS element DataResolvers aligned with Shopware standard: All six CMS elements now use dedicated Struct classes and resolvers under `Core/Content/Cms/DataResolver/Element/`. Elements with backend data (Teaser Image Box, Image with Text, Extended Text Element) populate the structs as before; config-only elements (Accordion, Tabs, HTML/CSS) map configuration into the struct. Element and config names unchanged; existing layouts remain compatible.
- Storefront templates for CMS elements updated: Output is primarily from `element.data` (struct), with fallback to `element.config` for backward compatibility. For the Teaser Image element, the preview image is only shown when an image is set.
- CMS preview images in administration: All preview images for CMS elements and blocks moved from `app/administration/static/img/` to `public/static/img/cms/`, and paths in preview Twig files updated accordingly.
- CMS element configs aligned with Shopware 6.7 Meteor components: In the admin config templates of the CMS elements "Teaser Image Box" (muto-element-1), "Accordion" (muto-element-2), "Tabs" (muto-element-3), and "Extended Text Element" (muto-element-6), the previous sw components have been replaced by Core standard components (mt-colorpicker instead of sw-colorpicker, mt-number-field instead of sw-number-field). Existing layouts and installations remain fully compatible (backward compatible).
- Storefront subscriber optimized: The former MutoFooterSubscriber has been renamed to MutoHeaderDataStorefrontSubscriber (descriptive name with Muto prefix). The header is no longer loaded twice when the controller already provides "header" (e.g. on ESI requests). Service definition and code style aligned with Shopware Core (readonly, constructor property promotion, no public="true").
- Theme config labels and helpTexts moved to snippet translations (administration snippets under `sw-theme.MutoSuperiorPro.*`). Prepares for Shopware 6.8.0 where inline label/helpText in theme.json will be removed. Existing theme configurations and stored values are unchanged; only the source of display texts for the theme config form has changed. Deprecation warnings in the browser console for theme config labels/helpTexts are resolved.
- Uninstall: When the theme is uninstalled without "keep user data", all MutoSuperiorPro CMS blocks and slots (elements) are removed from experience worlds. Slots are deleted first, then blocks; RestrictDeleteViolationException is caught so uninstallation does not fail if blocks or slots are still in use on CMS pages.
- Administration: CMS block sources reorganized into subfolders `muto-cols` (grid blocks), `muto-layouts` (layout blocks), and `muto-elements` (element block). Block type names and behaviour unchanged; existing experience world content is not affected.
- Theme config: Custom HTML, Custom CSS and Custom JS fields (tab "custom") are now rendered in the backend with the code editor (`sw-code-editor`) instead of a plain textarea for better editing. Stored values and config keys unchanged; backward compatible.
1.6.2 6.7.0.0 - 6.7.14.2
- Corrected vertical centering of the navigation bar for single-line navigation in the header.
- Corrected positioning of the drop-down navigation for single-line navigation in the header.
1.6.1 6.7.0.0 - 6.7.14.2
- Link color adjusted to match text color in the "Extended Text Element"
- YouTube element button color adjusted to match primary button color.
- Off-canvas close button changed to match primary button color and language switcher area changed to border color (lighten 10%)
1.6.0 6.7.0.0 - 6.7.14.2
- Arial Roles in footer columns updated to ensure accessibility
- Label for newsletter forms in and above the footer made accessible for screen readers
1.5.9 6.7.0.0 - 6.7.14.2
- Column width adjusted for newsletter column in footer
- Padding added to account menu
- Now allows br in USP text snippets
- Margin Bottom Bootstrap variable for paragraph text adjusted to default value as in previous Shopware version (1rem instead of 2rem)
1.5.8 6.7.0.0 - 6.7.14.2
- SCSS adjustments for paddings in the account menu
- Adjusted footer columns (Custom Content 1)
- Added role and aria-label to the USP section for accessibility. The aria-label is available as a text snippet in the backend.
1.5.7 6.7.0.0 - 6.7.14.2
- Adjustments to the footer newsletter form
1.5.6 6.7.0.0 - 6.7.14.2
- Adjustments and optimizations for Shopware 6.7
- Optimization of the fixed header function. Now much smoother and not always in the field of view. It only becomes visible again after scrolling up.
- Optimization of the preloader function
- Optimization of the top bar. The marketing text in the top bar is now better centered.
- Optimization of our CMS elements in the experience worlds so that they also display the correct font colors in the preview.
- Many other fixes and adjustments
1.5.5 6.6.0.0 - 6.6.10.27
- Various SCSS adjustments:
- various background color adjustments due to changes in Bootstrap (overrides.scss)
1.5.4 6.6.7.0 - 6.6.10.27
- Various SCSS optimizations:
- Product box background color now correct with adjusted background color for product detail page tabs
- Header logo width is now also displayed correctly for SVGs if the SVG logo is smaller than the specified width
- Base slider dots to full width so that they do not wrap to two lines when there are only a few
- Header search bar adjusted for new version
- Border radius adjusted for quantity selection for products and shopping cart
- Correction of background color modal and off-canvas
- Modal box close button position adjusted
- Correction in fixed header JS
1.5.3 6.6.0.0 - 6.6.10.27
- Various SCSS optimizations
1.5.2 6.6.0.0 - 6.6.10.27
- The div container for the breadcrumb on the start page has been hidden via CSS so that a banner/slider can be inserted on the start page without a gap to the navigation.
- Border radius for the image element has been corrected. If the images were too small, the border radius on the right-hand side was not visible.
- New setting for the CMS element ‘Teaser Image Box’ added. Button can now be hidden. However, the link remains visible.
- Adjustment of the positioning of the ‘Close’ button in the modal boxes
- Social icon Twitter/X updated
- Various SCSS optimizations such as Header Action Buttons Badge Style
1.5.1 6.6.0.0 - 6.6.10.27
- Optimization of the display of the centred cookie banner, which can be activated in the theme manager.
- TopBar: New settings in the theme manager to show and hide the login and registration links and the marketing text
- Various SCSS optimizations such as link hover styles
1.5.0 6.6.0.0 - 6.6.10.27
- Adjustments and optimization of the newsletter form in and above the footer: Captchas and captcha hints are only visible after entering the email address.
- Bugfix: Selection fields in the settings of the elements in the Shopping Experiences were not displayed in the backend. Bug has been fixed.
1.4.9 6.6.0.0 - 6.6.10.27
- Adjustments in the code for Shopware 6.6 - Extensions in the theme manager: New "Product page" area
- Design for the tabs can now be adjusted in color (product description, reviews, crosselling tabs)
1.4.8 6.5.0.0 - 6.5.8.19
- Optimization in SCSS for the display of product boxes in the wishlist.
1.4.7 6.5.0.0 - 6.5.8.19
- Optimization in SCSS for the checkboxes in the cookie banner.
1.4.6 6.5.0.0 - 6.5.8.19
- Optimization of the DataMapping for the element "Extended text element".
1.4.5 6.5.0.0 - 6.5.8.19
- Optimization in SCSS for the product boxes
1.4.4 6.5.0.0 - 6.5.8.19
- Adjustments in SCSS: Forms (text color for privacy paragraph and label style for date of birth)
- New preview images for the CMS elements of the theme so that they are more visible in the overview
- New preview images for the layout blocks of the theme
1.4.3 6.5.0.0 - 6.5.8.19
- Adjustments in SCSS: Cheapest Price display in product box repositioned, quantity field and "Add to cart" button on product detail page in mobile view positioned below each other
- Corrected typo in theme.json for field name
1.4.2 6.5.0.0 - 6.5.8.19
- Adjustment in CSS for the image size in the product boxes
1.4.1 6.5.0.0 - 6.5.8.19
- Adjustment in the HTML/CSS element
1.4.0 6.5.0.0 - 6.5.8.19
- Adjustment TopBar Border Bottom
- Adjustments in the Accordion and Tab element in the Shopping Experiences
- Addition of separate TWIG blocks in various template files in order to be able to make explicit adjustments in these theme-specific blocks.
- Extension of the HTML/CSS element with the function to activate the Twig compiler. This means that Twig variables can now be used directly in this element in the Shopping Experiences.
1.3.9 6.5.0.0 - 6.5.8.19
- Adjustment of the newsletter registration form in the footer (JS error in console fixed)
1.3.8 6.5.0.0 - 6.5.8.19
- Added 4 new column layouts for the Shopping Experiences
1.3.7 6.5.0.0 - 6.5.8.19
- Accordion CSS padding fix for Shopware 6.5.5.1.
1.3.6 6.5.0.0 - 6.5.8.19
- Optimizations of the paddings of form fields based on the border radius setting for input form fields in the theme manager.
1.3.5 6.5.0.0 - 6.5.8.19
- New setting in the theme manager for the USPs. Subtext can now be explicitly activated/deactivated.
1.3.4 6.5.0.0 - 6.5.8.19
- Adjustments and optimizations of buttons
1.3.3 6.5.0.0 - 6.5.8.19
- Border radius adjustment for .dropdown-menu class
- Adaptation/correction of the columns of the flyout navigation with an existing category image but deactivated display of the category image in the theme manager
1.3.2 6.5.0.0 - 6.5.8.19
- Adjustments and optimizations of the button paddings based on the border radius
1.3.1 6.5.0.0 - 6.5.8.19
- Adjustments and optimizations of the button paddings based on the border radius
- Adaptation of the quantity selector (quantity selection for the articles)
- Adaptation and optimization of SCSS variables for form fields
1.3.0 6.5.0.0 - 6.5.8.19
- Optimisations in the two CMS elements "accordions" and "tabs" for better usability in the Shopping Experiences.
- Optimisation in the configuration field names in the theme manager
1.2.9 6.5.0.0 - 6.5.8.19
- Change of input type for custom HTML, CSS and JS in the theme manager, so that it can also be edited in the child theme.
- Choice of font for footer headlines possible
1.2.8 6.5.0.0 - 6.5.8.19
- Optimisations in the code (comments, variables, ...)
- SCSS corrections
- Extended Text Element" correction width:100% with selected vertical centring
- Correction of a margin in base slider if thumbs are displayed below it
- Addition of border radius for account navigation based on sidebar category navigation
- Enhancement of the footer: Now a newsletter subscription form can be displayed above the footer or as a column in the footer in the theme manager. This can also be customised in terms of colour and the content above the form can be changed via the text modules.
1.2.7 6.5.0.0 - 6.5.8.19
- Additional CSS classes for sorting the footer columns
1.2.6 6.5.0.0 - 6.5.8.19
- Corrections and adjustments in Account Menu and Account Pages
1.2.5 6.5.0.0 - 6.5.8.19
- Optimisations and corrections in SCSS
- Minimum height of the header can now be configured in the theme manager.
- The border colour for a line above the navigation can now be defined in the theme manager. This makes it possible to visually separate header and navigation with the same background colour.
- Revision of the product boxes
- Alignment of the content of the product boxes can now be configured in the theme manager (left/centre/right).
1.2.4 6.5.0.0 - 6.5.8.19
- Extension of the sidebar category navigation. Further setting options available in the theme manager.
- Extension of the flyout navigation. Further setting options available in the theme manager.
1.2.3 6.5.0.0 - 6.5.8.19
Adjustment SCSS search field button- Adjustment element "Category Header": Background Position centre active for Parallax
- Adjustment SCSS Offcanvas
- Adjustment in pagination.scss (line-height)
- Wishlist icons in product boxes can now be adjusted in colour in the theme manager
- Pagination buttons on category pages can now be adjusted in colour in the theme manager
1.2.2 6.5.0.0 - 6.5.8.19
- Adjustments in the sidebar category Navigation.
1.2.1 6.5.0.0 - 6.5.8.19
- Corrections and adjustments for Shopware 6.5.2.1: Dropdown navigation effect, searchbar, text colour category header and icons in offcanvas navigation, various elements without border radius when inserted in a fullwidth section.
- Tooltip background and text colour can now be defined in the theme manager.
- Category header element: It is now possible to set whether the background should be displayed with or without parallax effect.
1.2.0 6.5.0.0 - 6.5.8.19
- Corrections and adjustments for Shopware 6.5
1.1.9 6.4.0.0 - 6.4.20.2
- The display of the category image in the flyout navigation can now be activated/deactivated in the theme manager.
- Development of additional CSS classes for the shopping worlds in order to move the contents of a section above or below the section background. This results in new layout possibilities. Description and CSS classes can be found in the theme documentation.
- Added additional colour settings in the theme manager for the arrow and dot navigation of the slider and carousels.
1.1.8 6.4.0.0 - 6.4.20.2
- Extension of the "Teaser Image Box" element: It is now possible to choose between cover and stretch for the image format.
- Adjustments in the CMS blocks
- Adjustment of the "Extended Text Element". Now the text box is displayed at 100% height if no value is selected for the vertical alignment.
1.1.7 6.4.0.0 - 6.4.20.2
- USP area above the footer can now be deactivated.
- Adjustment of various distances
1.1.6 6.4.0.0 - 6.4.20.2
- Optimisation of the loading screen function
- Enhancement of the Teaser Image Box element: Specification of the link target, shadow can be deactivated on hover, arrow can be deactivated on hover in the button.
- Correction of Teaser Image Box element: Border radius and ZoomIn conflict in Safari. Border radius was ignored on hover.
- Additional settings in the theme manager: Custom HTML, Custom CSS and Custom JS.
1.1.5 6.4.0.0 - 6.4.20.2
1.1.4 6.4.0.0 - 6.4.20.2
- Extension of the theme with further header settings. You can now choose between a multi-line and a single-line header layout. With the multi-line header layout, the main navigation is below the logo and icon area, and with the single-line header layout, the main navigation is placed directly between the logo and icons. This results in numerous new design possibilities for your online shop. - Optimisation of the loading screen function
- Optimisation of the sorting of the settings in the theme manager for a better overview.
- Optimisation of the "fixed header" function
1.1.3 6.4.0.0 - 6.4.20.2
Element "HTML / CSS"
With the element "HTML / CSS" you can integrate your own HTML and CSS code directly as an element in a page. This element is useful, for example, to integrate JS widgets from external providers (rating seals, booking calendars, etc.) into a page in your shop.
Element "Extended Text Element"
In this element, you can now change the text colour and the colour of the headings and store a background colour or a colour gradient for the text box. This creates many more layout options for your Shopping Experiences.
1.1.2 6.4.0.0 - 6.4.20.2
1.1.1 6.4.0.0 - 6.4.20.2
1.1.0 6.4.0.0 - 6.4.20.2
1.0.9 6.4.0.0 - 6.4.20.2
1.0.8 6.4.0.0 - 6.4.20.2
Extension of the setting options for the Accordion element in the Shopping Experiences. The following additional settings can now be made: Font colour, Font size, Font thickness, Background, Font colour active, Background active
1.0.7 6.4.0.0 - 6.4.20.2
The following extensions for the worlds of experience have been added in this verison:
Elements (Elements can be added in any desired column of any block).
- Teaser Image Box
- Accordion
Column layouts in the 12-unit bootstrap grid:
- 12
- 6-6
- 4-4-4
- 3-3-3-3
- 2-2-2-2-2-2
- 3-9
- 9-3
- 4-8
- 8-4
- 3-3-6
- 6-3-3