InnoSpark Fancy Theme
Installation, all 120 settings, the building blocks for shopping experiences and the places where legal details matter – in one place.
Deutsch · English
Contents
1 Installation and updates
The theme is a Shopware plugin. You upload it as a ZIP file, assign it to a sales channel and then set it up in the theme configuration.
1.1 Requirements
- Shopware 6.7 – any version 6.7.x.
- No build step. The theme ships no compiled JavaScript, and Shopware compiles its stylesheet itself when you save. You need neither Node.js nor
bin/build-storefront.sh. - Access to the Administration with permissions for extensions and themes – or access to the server’s command line.
1.2 Installing via the Administration
- Open Extensions › My extensions and click Upload extension.
- Choose the file
InnoSparkFancyTheme_v1.70.43.zip. Do not unpack it – Shopware expects the archive. - Click Install next to InnoSpark Fancy Theme, then activate the extension.
- Assign the theme to the sales channel: Sales Channels › your channel, Theme section, Change theme. Shopware compiles the theme on the way; after that it is visible in the storefront.
Active is not assigned. The templates of an active theme plugin take part in every sales channel, its stylesheet only where it is assigned. The theme is prepared for this: elements such as the mobile action bar only appear once its stylesheet has actually loaded. A few adjustments deliberately apply across all channels, though – the invoice template and the online withdrawal form, see chapter 5.
1.3 One theme per sales channel
If you run several sales channels with different looks, create one duplicate per channel: Content › Themes, then duplicate the theme from the menu (…) on the InnoSpark Fancy Theme tile. The duplicate inherits templates and stylesheet from the original and has its own configuration. Updates to the original therefore reach every duplicate, while the settings stay separate per channel.
Assign each channel its duplicate and configure it there – not in the original.
1.4 Updates
- Upload the new ZIP file as during installation. Shopware recognises the higher version.
- Click Update next to the entry.
- Recompile the theme: Content › Themes, open the theme, Save – even without changes, and for every duplicate. On the command line,
bin/console theme:compileis enough. - Clear the cache: Settings › System › Caches & indexes, Clear cache.
Why step 3? After a plugin update, Shopware does not always recompile assigned themes. Changed templates then already apply while the stylesheet is still the old one – the page looks half updated.
Your settings are kept during an update: they belong to the theme record in the database, not to the plugin files. New settings in a version start with their default value. The changes per version are listed (in German) in CHANGELOG.txt in the package.
1.5 Installing via the command line
For servers with command-line access, in the root directory of the Shopware installation:
unzip InnoSparkFancyTheme_v1.70.43.zip -d custom/plugins/
bin/console plugin:refresh
bin/console plugin:install --activate InnoSparkFancyTheme
bin/console theme:change
bin/console cache:cleartheme:change asks for the sales channel and the theme and compiles the theme. For an update, replace the folder custom/plugins/InnoSparkFancyTheme and then run plugin:refresh, plugin:update InnoSparkFancyTheme, theme:compile and cache:clear.
1.6 Uninstalling
First assign a different theme – Shopware’s default theme, for instance – to every sales channel that uses this theme or a duplicate of it. Shopware does not let you deactivate an assigned theme. After that, deactivate and uninstall the extension like any other.
2 Settings
You will find the settings under Content › Themes, on the theme or its duplicate. The theme adds 120 settings of its own in 9 tabs. Shopware’s own fields – logo, base colours, fonts – sit alongside and keep their meaning.
Save recompiles the theme; a few seconds later the change is visible in the storefront. Most colour fields only apply while the matching colour preset is set to “Own colours” – the most common reason why a change seems to have no effect.
Next to each setting you will find its technical name. It helps with support questions and when searching this manual.
2.1 Design
Colours
- Colour preset (light mode)
ifx-color-preset “Own colours” means the colour fields below apply.
Any other choice lays a complete, coordinated colour scheme over them – accent, surfaces, text, borders, header, top bar, card and footer in one go. The fields below stay visible but no longer take effect.
A preset sets nothing you could not set by hand: it fills exactly the same fields, just all at once. To build your own scheme, start from a preset, read the values off the design preview and switch back to “Own colours”.
Dark mode has its own selection in the “Dark mode” block – dark colours cannot be computed from light ones.
- Accent colour
ifx-color-accent Used for links, focus rings, active states and highlights. Shopware's own colours (primary, buy button, price) live in the "Colours" tab.
- Text colour on accent
ifx-color-accent-contrast Must reach at least 4.5:1 contrast against the accent colour (WCAG AA).
- Surface colour (cards, panels)
ifx-color-surface Colour for surfaces on the page and for everything that opens above it: input fields, cards, accordions, dropdown menus, dialogs and the off-canvas menu on phones. The page background itself is set by Shopware’s own background colour field.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
- Alternate surface
ifx-color-surface-alt Background for offset areas such as the filter sidebar, cart totals or CMS blocks.
- Muted text colour
ifx-color-text-muted For helper text, delivery times, base prices. Note: this tone also needs 4.5:1 contrast against the background.
- Border colour
ifx-color-border Colour of all borders and dividers: input fields, tiles, cards, tables, dialogs and dropdown menus. Input fields are recognised mainly by their border – a very light tone makes them hard to spot on white.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
- Highlight colour (surfaces)
ifx-color-highlight For elements with a coloured background such as the active tab on the product page. Deliberately separate from the accent colour: the accent colours TEXT (links, focus) and must be dark enough for that, whereas this sits BEHIND text and may be light. A pale yellow works well as a surface and not at all as a link colour.
- Text colour on highlight
ifx-color-highlight-contrast Needs at least 4.5:1 contrast against the highlight colour (WCAG AA).
Corners & shadows
- Corner radius – surfaces (px)
ifx-radius-base Applies to cards, images, panels and modals. 0 = fully square.
- Corner radius – controls (px)
ifx-radius-control Applies to buttons, input fields and selects.
- Border width (px)
ifx-border-width Width of the borders and dividers the theme draws – on tiles, cards, buttons, tables and key figures. 1 is the default, 2 looks noticeably bolder. 0 hides the borders; areas are then set apart by their surface colour only.
- Shadow strength
ifx-shadow-strength "None" saves a little paint cost and looks flat/modern.
- Icon set
ifx-icon-set "Shopware default" leaves the shop system’s own icons untouched. "Modern" replaces them with fine line drawings (Lucide, ISC licence) using a consistent stroke weight and rounded caps.
The theme ships seventeen icons, covering the common spots: search, cart, account, menu, close, plus/minus, check, arrows, filter. Everywhere else the Shopware icon is used automatically, so no control can end up blank.
“Soft” takes the control radius from above. “Pill” rounds buttons completely – a strong signature that makes the whole shop feel friendlier. “Square” drops rounding entirely.
Affects the account, language and currency menus as well as the cart flyout.
“Plain” leaves Shopware's own presentation untouched. “Panel” turns them into distinct cards: own radius, fine border, soft shadow, roomier rows – and in the account menu a heading with a full-width login button above the list.
- Motion character
ifx-motion-ease “Calm” accelerates and decelerates evenly. “Springy” overshoots the target slightly – motion feels livelier, especially on card hover.
No effect when animations are off or the operating system asks for reduced motion.
Styles Shopware's “category navigation” element as a distinct box with dividers and chevrons – the look known from large marketplaces.
The element itself is placed in the layout: Content → Shopping Experiences → your layout → pick a section with a sidebar → drag the “category navigation” element into the left column.
Why not straight from the theme: Shopware resolves the category tree per element, and it is not available anywhere on an ordinary page. The element brings it along – and stays placeable where it belongs instead of at a spot the theme dictates.
Puts a small tile in front of every entry of the category sidebar.
What it contains is up to the category itself: if a “category image” is set in the admin, it appears cropped inside the tile. That puts the icons entirely in your hands without a line of code – open the category, set an image, done.
With no image set, the tile shows the category’s first letter. This is deliberately not a generic placeholder icon: the same shape in every row carries no information and only makes the list wider.
Sub-entries stay without a tile – they are about structure, and a second column of indented tiles turns the list into a wall.
Works together with “Category navigation” above: the tiles appear in both presentations, but come into their own with “As a box”.
Dark mode
- Provide dark mode
ifx-dark-enabled Enables dark mode. With the box unchecked the related CSS is not generated at all, which keeps the stylesheet small. How it applies is controlled by the field below.
- When dark
ifx-dark-mode “Follow system” follows the visitor's operating system. “With toggle” additionally shows a switch in the header; the choice is remembered in their browser and overrides the system setting. “Always dark” fixes the shop to dark.
- Colour preset (dark mode)
ifx-dark-preset “Match light mode” takes the dark counterpart of the preset chosen above. If that is set to “Own colours”, the seven colour fields below apply.
Why this is a separate choice: a dark palette is not a conversion of the light one. An accent that carries on white is usually too dark on black, and surfaces need three closely spaced steps there instead of two widely spaced ones. Every preset is therefore designed twice – and that is also why you can deliberately mix, say a warm light scheme with a neutral dark one.
Here too: the preset sets exactly the seven colours below, no more. Header, footer, cards and price are derived from them – for a preset by the same route as for your own colours.
With dark mode switched off the selection has no effect.
- Page background (dark)
ifx-dark-bg Page background in dark mode. The footer takes it over, and text on accent-coloured buttons uses this tone.
Only applies with dark mode enabled and “Colour preset (dark mode)” set to “Own colours” – or to “Match light mode” while the light preset is “Own colours”.
- Surface (dark)
ifx-dark-surface Cards, header, panels. Deliberately a little lighter than the page background – on a dark ground depth comes from lightness, not from shadows.
- Alternate surface (dark)
ifx-dark-surface-alt Offset surfaces in dark mode – filters, cart totals, CMS cards – and at the same time input fields, dropdown menus and dialogs. One step lighter than “Surface (dark)” so the layers stay distinguishable.
Only applies with dark mode enabled and “Colour preset (dark mode)” set to “Own colours” – or to “Match light mode” while the light preset is “Own colours”.
- Text (dark)
ifx-dark-text Deliberately not pure white: white on a very dark ground produces a harsh halo effect and tires the eye over longer text.
- Secondary text (dark)
ifx-dark-text-muted Helper text, delivery times and base prices in dark mode, plus the footer text. This tone also needs 4.5:1 contrast against the background.
Only applies with dark mode enabled and “Colour preset (dark mode)” set to “Own colours” – or to “Match light mode” while the light preset is “Own colours”.
- Border (dark)
ifx-dark-border Borders and dividers in dark mode – on input fields, tiles, cards and tables.
Only applies with dark mode enabled and “Colour preset (dark mode)” set to “Own colours” – or to “Match light mode” while the light preset is “Own colours”.
- Accent (dark)
ifx-dark-accent The light-mode accent often lacks contrast on a dark ground. This value replaces it in dark mode, including the derived hover and focus surfaces.
Values from the preview
- Pasted values
ifx-apply-values Paste the block produced by the design preview's “Copy values” here – saving is enough, the values then apply to every visitor.
Meant as a shortcut: instead of transferring twenty fields by hand, paste once. The individual fields below stay untouched and are overridden by whatever is pasted here – to keep a value permanently, put it in its own field and remove it here.
Left empty, not a single extra byte is added to the page source. Only a filled field produces any output at all.
Pure on/off switches (sticky header, dark mode) cannot be transferred: their CSS is not generated at all when off and cannot be switched on afterwards. The preview does not offer those fields either.
- Enable design preview
ifx-preview-panel Shows a control panel in the storefront that changes colours, corners, spacing and card variants INSTANTLY – no saving, no recompiling. It then lists the changed values to transfer into this configuration.
The panel additionally requires the URL parameter ?ifx-preview=1. Both conditions together make sure customers never see it. Switch it off for live operation anyway.
On/off switches (e.g. sticky header) cannot be previewed: their CSS is not generated at all when off – which is exactly what keeps the stylesheet small.
Appearance
- Media rounding
ifx-card-media-radius “Same as card” keeps things as they were. “Rounded separately” puts the radius on the PRODUCT IMAGE instead of the card. Combined with card style “Flat” this gives the borderless variant: no box, just a rounded image with text below – very tidy, and the products carry the surface themselves.
2.2 Layout
Grid & spacing
- Maximum content width (px)
ifx-container-width Shopware's default is 1300px. Larger values use wide monitors better but make long lines of text harder to read.
- Page gutter (px)
ifx-gutter Space between content and screen edge. On mobile a smaller value of 16px is used automatically if a larger one is configured here.
- Vertical spacing between sections
ifx-section-spacing Space between the sections of a shopping experience, plus the space above the footer. On phones: Compact 32, Normal 48, Roomy 64 pixels; from 992 pixels wide: 48, 72 and 104 pixels.
Product grid
- Products per row – desktop
ifx-listing-columns-desktop Applies to category pages and product sliders from 1200px width.
- Products per row – mobile
ifx-listing-columns-mobile Two columns show more products without scrolling, one column shows larger images. Two columns convert better in most shops.
2.3 Typography
Base settings
- Base font size on mobile (px)
ifx-font-size-base Below 16px iOS browsers auto-zoom when focusing input fields – 16px is therefore the recommended minimum.
- Base font size on desktop (px)
ifx-font-size-base-max The value is interpolated fluidly between mobile and desktop (CSS clamp), so there are no jumps when resizing the window.
- Body line height
ifx-line-height Line spacing of body text across the storefront. “Normal” (1.6) suits most fonts. “Relaxed” eases long texts, “Tight” suits dense pages with little running text.
- Font source
ifx-font-stack "System fonts" uses the device's own UI font. This saves the entire webfont download (typically 40–120 KB) and removes any text flashing during load – the fastest possible option. "Theme font" uses the font configured in the "Fonts" tab. "Serif headings" pairs a serif face for headings with system fonts for body text – the quiet editorial look of boutique themes, without a single webfont download. "Bundled fonts" uses Playfair Display for headings and Rubik for body text. Both ship with the theme as variable fonts (about 73 KB combined) and are served from your own server – no Google Fonts request.
Headings
- Heading scale
ifx-type-scale Controls how far H1 to H6 sit apart. "Expressive" produces large, bold titles – good for landing pages, restless on text-heavy pages.
- Heading font weight
ifx-heading-weight Only pick weights the configured font actually ships – otherwise the browser synthesises a poor faux bold.
- Heading letter spacing
ifx-heading-tracking Letter spacing in headings. “Tight” pulls the letters together by 2 % of the font size – large headings look more compact. “Normal” leaves the font as it is, “Wide” adds 1 %.
2.4 Header & navigation
Header
- Header variant
ifx-header-mode "Automatic" is the safe default: if the theme detects an active PVS fancy Navbar plugin it stays out of the header entirely and leaves it to the plugin. Otherwise the theme header applies. "Shopware original" disables the theme header completely.
- Keep header visible while scrolling
ifx-header-sticky The header stays at the top edge while scrolling and gains a shadow. Switched off, it scrolls away with the page and its CSS is not generated at all.
Required for “Shrink header while scrolling”, “Collapse top bar on scroll” and the frosted glass effect.
- Shrink header while scrolling
ifx-header-shrink Gives visible content back on small screens. Only has an effect when the header stays visible.
- Frosted glass effect in header
ifx-header-blur Visually attractive but noticeably costs scroll performance on weaker mobile devices (backdrop-filter forces constant recomposition). Leave off when in doubt.
- Sparks on the logo
ifx-header-sparks Moving the mouse across the logo leaves a trail of small sparks behind the content – behind the logo, not in front of it. In front it would be confetti; behind it is atmosphere.
It is triggered over the logo only. Spread across the whole header the effect was everywhere, and what happens everywhere is noticed nowhere. The spark layer still spans the header so the trajectories do not stop at the edge of the logo.
“Accent colour” keeps the effect tied to the shop’s palette. “Warm” is closer to a real spark and suits shops whose range has to do with energy, workshops or fire.
The effect only appears where there is a real mouse pointer: a touch device has no hover, and a shower of sparks when tapping the cart would be nonsense. Anyone who has set “reduce motion” in their system will not see it either.
Switched off, neither CSS nor JavaScript is produced – the setting then costs literally nothing.
- Header background
ifx-header-bg Header background. With the frosted glass effect it becomes 82 % opaque so the content below shows through. In dark mode “Surface (dark)” applies instead.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
- Header text colour
ifx-header-text Colour of text and icons in the header. Needs at least 4.5:1 contrast against the header background (WCAG AA). In dark mode “Text (dark)” applies.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
- Header height (px)
ifx-header-height Minimum height of the header before scrolling. A taller logo makes it grow. With the logo height at 0 (automatic), the logo follows this value.
- Header height while scrolling (px)
ifx-header-height-sticky Minimum height of the header once it has shrunk. Only applies when “Shrink header while scrolling” is switched on.
- Logo height (px)
ifx-logo-height Height of the logo in the header while the page is not scrolled.
0 means automatic: it is then derived from the header height, minus one line of breathing space above and below. With a 60px header that gives a 36px logo.
A value larger than the header can take is allowed – the header grows with it, since its height is a lower bound and not a fixed value. Only go as far as the logo really has room for: the width follows from the aspect ratio, so a flat, wide logo quickly becomes very wide and takes space from the search field.
The scrolled state has its own field below.
- Logo height while scrolling (px)
ifx-logo-height-sticky Only applies when “Shrink header while scrolling” is switched on.
Previously the logo height was tied to the shrunken header height. With a wide logo that is often too large: it then dictates the height of the row and shrinking gains almost nothing. Here the two can be set independently.
The value is an upper bound – a smaller logo is not scaled up.
- Logo for dark mode
ifx-logo-dark Optional. If left empty, dark mode uses the same logo as everywhere else – nothing changes.
When it is worth setting: an SVG logo can switch its own colour via @media (prefers-color-scheme). In current browsers that also works with this theme's toggle, because the theme states its colour scheme explicitly. Older Safari versions (up to iPadOS 17) do not pass that on to embedded SVG files, however – there such a logo always follows the device and may end up white on white.
A second file rules that out. Both files should then be single-variant, i.e. without a built-in media query: the light one in Shopware's logo field, the dark one here.
The image is only loaded when dark mode is actually active.
- Emphasise search
ifx-search-prominent Gives search noticeably more width and a visible border in the header. Users who search rather than browse typically convert much better – hiding search costs revenue.
- Mobile action bar at the bottom
ifx-mobile-appbar Shows a fixed bar with menu, search, account and cart within thumb reach on phones.
- Pages without search, account and cart
ifx-shop-hide-pages On the pages listed here the header shows neither search nor account nor cart – for example on the home page of a company whose shop is only part of its website. “Log in or register” in the top bar, an enabled wishlist and the matching items of the mobile action bar are hidden as well. Logo and menu stay, the navigation bar below the header is dropped. How the header is laid out then is set by “Header on these pages”; the top bar can be hidden as well with the setting below.
One address per line, as shown in the browser – with or without the domain:
/ /Company/ /Information/*/ is the home page. A * at the end covers the page and everything below it. Upper and lower case and a trailing slash make no difference.
Cart, checkout and customer account always show the elements, even if a line would cover them – customers could not get any further there without them.
Leave empty to show them everywhere.
- Header on these pages
ifx-shop-hide-header How the header is laid out on the pages from “Pages without search, account and cart”.
“Logo on the left, navigation next to it”: from desktop width the menu items sit to the right of the logo; below that, the menu icon opens the menu.
“Logo centred”: the menu icon on the left opens the navigation from the side, the logo sits in the middle and, from 1200 pixels wide, the menu items appear on the right in a slightly smaller font. Below that there is not enough room for them next to a centred logo, so the icon remains. Suits a home page that offers its own entry points, for example with tiles (class ifx-tiles, see the manual).
Only applies to the theme’s own header (see “Header variant”).
- Also hide the top bar on these pages
ifx-shop-hide-topbar Also hides the slim bar above the header on the pages from “Pages without search, account and cart”. The page then starts directly with logo and menu – suitable for a company home page, for example.
Whatever the bar contains is missing on these pages: USPs, the service menu, the language and currency display and the light/dark toggle. The service links remain reachable via the footer and the mobile menu; there is no replacement there for the language and currency switchers or the toggle.
As long as the list above is empty, the setting has no effect anywhere.
- Contact in the checkout header
ifx-checkout-contact The slim checkout header shows a contact line. Shopware ships a placeholder phone number there.
Format as with the service links: Heading|Contact|Note. The middle part is linked — as e-mail if it contains @, otherwise as a phone number.
Leave empty and Shopware’s own version stays, placeholder included.
Top bar & USPs
- Show top bar
ifx-topbar-enabled The slim bar above the header: USPs, log in/register, the service menu, language and currency, and the light/dark toggle. It only appears when it has something to show.
Switched off, Shopware outputs its own bar in its place, which only knows the language and currency switchers. Everything else from the top bar is then gone – including the dark mode toggle.
Only applies to the theme’s own header (see “Header variant”).
- Top bar height (px)
ifx-topbar-height Height of the slim bar above the header. Default is 36 pixels.
Normally this is a lower bound: if the content does not fit, the bar grows. As soon as “Collapse top bar on scroll” is enabled it becomes a fixed height – there is no other way to animate the collapse. Anything that does not fit will then be invisible.
- Collapse top bar on scroll
ifx-topbar-hide The top bar sits inside the header and therefore sticks along with it. What it holds – benefits, service, language – is useful at first glance and nothing but height afterwards. Collapsed, the logo, search and cart move closer to the content.
The collapse is a transition, not a jump.
Two notes: without “Keep header visible while scrolling” this has no effect – the bar scrolls out of view anyway. And “Shrink header while scrolling” also collapses the bar, because it belongs to that behaviour; this setting allows it independently.
- Top bar background
ifx-topbar-bg Top bar background. In dark mode “Surface (dark)” applies.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
- Top bar text colour
ifx-topbar-text Top bar text colour. Needs at least 4.5:1 contrast against the top bar background. In dark mode “Text (dark)” applies.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
- USP 1
ifx-usp-one Leave empty = translatable default from the snippets (innospark.theme.usp.one). A value here overrides ALL languages.
- USP 2
ifx-usp-two Empty = translatable default (snippets: innospark.theme.usp.two).
- USP 3
ifx-usp-three Empty = translatable default (snippets: innospark.theme.usp.three).
- Log in/register in the top bar
ifx-topbar-account Shows “Log in or register” on the left of the top bar. For logged-in customers it shows their first name linking to the account instead.
- Service menu in the top bar
ifx-topbar-service Shows a “Service & help” dropdown on the right of the top bar. One line per entry, in the format:
Shipping & payment|/shipping-and-payment Contact|/contactLeaving it empty hides the dropdown.
Why by hand rather than automatically from the service menu: Shopware renders the header as its own sub-request that is given languages and currencies only. The service menu belongs to the footer and cannot be reached from there by design. Three or four targeted links are usually better here than the footer's full list anyway.
- Note for business customers
ifx-b2b-link A link to the business customer registration. It appears in TWO places: in the top bar next to login/register, and in the footer above the columns.
Format as with the service links: Label|Address.
Leave empty and nothing is shown. In the top bar it only appears for visitors who are not logged in.
In the footer it is hidden for customers already signed in as business customers: account type “Commercial”, a pending customer group request or a customer group with its own registration.
- Always show language and currency
ifx-topbar-locale NOT ticked = Shopware's own behaviour: the switchers only appear when the sales channel really has more than one language or currency. That is how the shop behaves without this theme too.
Ticked: when there is nothing to choose, the bar instead shows WHERE you are – e.g. “DE” and “€ Euro”. Deliberately without a chevron, because that would promise a choice that does not exist.
As soon as a second language or currency is attached to the channel, Shopware's real switchers take this place again in both cases – so it never shows twice.
- Scroll the USPs
ifx-usp-ticker Makes the points in the top bar drift slowly from right to left and fade softly in and out at both edges.
Useful mainly when more points are maintained than fit side by side – on a phone that is nearly always the case.
Hovering pauses the movement so it can be read. If the operating system asks for reduced motion, or the theme's animations are set to “Off”, nothing moves – the soft edges remain.
Navigation
"Mega menu" reveals all subcategories of a main category in multiple columns on hover – the shortest path to the product for deep assortments. "Classic" keeps Shopware's default behaviour.
Only suitable for short category names. All caps is measurably slower to read because the word shape as a recognition cue is lost.
2.5 Product cards
Appearance
- Product card variant
ifx-card-mode "Automatic" detects an active PVS fancy Product Card plugin and then stays out of the way so the two designs do not stack.
- Card style
ifx-card-style “With border” draws a fine line in the border colour around the tile. “With shadow” replaces the line with a soft shadow (strength under Design, “Shadow strength”). “Flat” drops both – combined with “Media rounding: Rounded separately” this gives the borderless tile.
Only applies to the theme’s own product card (see “Product card variant”).
- Hover effect
ifx-card-hover Automatically not applied on touch devices, where no real hover exists and the effect would otherwise stick after tapping.
- Image aspect ratio
ifx-card-ratio A fixed ratio prevents layout shifts while images load (Core Web Vital "CLS"). "Original" keeps the real image dimensions – only sensible if all product images are already cropped consistently.
- Product image fit
ifx-card-image-fit What happens when the product image does not match the configured image format.
“Fit” shows the whole image. If it does not match the format, space stays visible above and below – or left and right. Nothing is cut off.
“Fill” fills the tile completely. In exchange the image is cropped from the centre: whatever extends past the edge is no longer visible.
Which one is right depends on the range. For fashion, furniture or decor, “Fill” produces calm, even rows of tiles. For technology and spare parts the cropped edge is often exactly what tells two variants apart – there “Fit” is the safe choice, which is why it is the default.
If the space beside fitted images is what bothers you, there is a third way: set “Area behind the product image” to “Transparent”. It then takes on the tile colour instead of standing around the subject as a grey box.
The setting has no effect with the “Original” image format – there is no fixed frame for an image to fill.
- Fixed image area height (px)
ifx-card-image-height 0 means automatic: the height follows the configured image format. That is the default and usually right.
A value above 0 sets a fixed height in pixels instead – the image format is then ignored. Useful when the image area should be the same height regardless of column width, for instance with very wide tiles.
Note: a fixed height and an image format contradict each other. Set both and the fixed height wins.
- Card background
ifx-card-bg Product tile background. In dark mode “Surface (dark)” applies.
Only applies to the theme’s own product card, and only while “Colour preset (light mode)” is set to “Own colours”.
- Surface behind the product image
ifx-card-image-mode Product images are not cropped (object-fit: contain), so surface remains visible beside portrait or square images. "Same as alternate surface" uses the tone from the Design tab – the previous behaviour. "Transparent" lets the card colour show through, ideal for cut-out images on white. "Custom colour" uses the setting below.
- Custom colour behind the product image
ifx-card-image-bg Only takes effect when "Custom colour" is selected above.
Content
- Maximum lines for the product name
ifx-card-name-lines Limits long names to a fixed number of lines so all cards in a row stay the same height. 0 = no limit.
- Spacing inside the tile
ifx-card-spacing How much air sits between image, name, price and button.
“Compact” pulls everything together – more products per screen, a denser feel. “Airy” gives every element room and looks more premium, at the cost of height.
This setting only changes spacing, not type sizes. To make tiles smaller overall, the image format or the number of columns is the better lever.
- Reserve space for star ratings
ifx-card-rating-space Shopware keeps space free in every product tile for star ratings – even on products that have none. That is not pointless: when some tiles in a row have star ratings and others do not, the empty fields keep names and prices on the same line.
“Automatic” makes that distinction itself: the space is only kept when at least one product in the listing actually needs it. If none does, it goes everywhere – measured, that saves around 35 pixels of height per tile.
“Always” keeps the space regardless. Useful when every tile across several pages should be exactly the same height.
“Never” always drops empty fields. This gives the most compact tiles. The price: when one product in a row has the content and another does not, their names and prices no longer sit on the same line. The tiles themselves stay equal in height – the grid evens them out – only what is inside them shifts.
- Reserve space for the “from …” price
ifx-card-price-space Shopware keeps space free in every product tile for the “from …” price – even on products that have none. That is not pointless: when some tiles in a row have the “from …” price and others do not, the empty fields keep names and prices on the same line.
“Automatic” makes that distinction itself: the space is only kept when at least one product in the listing actually needs it. If none does, it goes everywhere – measured, that saves around 35 pixels of height per tile.
“Always” keeps the space regardless. Useful when every tile across several pages should be exactly the same height.
“Never” always drops empty fields. This gives the most compact tiles. The price: when one product in a row has the content and another does not, their names and prices no longer sit on the same line. The tiles themselves stay equal in height – the grid evens them out – only what is inside them shifts.
- Show secondary image on hover
ifx-card-secondary-image Shows the product’s second image when hovering over a tile, if one is maintained. It loads lazily in the background and is already there on hover. Only with a real mouse pointer – on touch devices the first image stays.
Switched off, neither the second image in the markup nor its CSS is produced.
Only applies to the theme’s own product card (see “Product card variant”).
- Delivery information
ifx-delivery-style "Plain" shows availability and shipping notes as running text, "Badge" sets them as an offset surface with a coloured status dot.
2.6 Footer
Footer
Footer background. If it is dark, links in it use the dark mode accent colour – the light accent would lack contrast there. In dark mode “Page background (dark)” applies.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
Footer text colour. Secondary text and dividers are derived from it (72 % and 16 % opacity). In dark mode “Secondary text (dark)” applies.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
Colour of the column headings in the footer and of the company name in the sender block. In dark mode “Text (dark)” applies.
Only applies while “Colour preset (light mode)” is set to “Own colours”.
Empty = translatable default (snippets: innospark.theme.footer.claim).
The line at the bottom of the footer about tax and shipping costs.
“Standard” uses Shopware’s own text mentioning shipping costs and cash on delivery. Right for a shop that ships goods.
“Digital shop” replaces it with a note without shipping or cash on delivery. For a download-only shop the standard text is not merely redundant, it is misleading.
“Off” hides the line entirely. Careful: stating whether prices include VAT is mandatory towards consumers in Germany (§ 3 PAngV). Switching it off here means stating it elsewhere.
Appears as fine print at the very bottom of the footer, below the price note.
Leave empty and nothing is shown. There is deliberately no default: whether the note applies depends on which images a given storefront carries, and only whoever put them there knows.
If text is entered, the first sentence up to the colon is emphasised.
Shopware already does this by default. Turning it off shows all links permanently expanded – longer page, but every link directly reachable and indexable.
2.7 Performance
Images & loading
- Lazy-load images
ifx-lazy-images Images outside the viewport are only loaded once the user reaches them. Often saves several megabytes on long category pages.
- Skip rendering of off-screen sections
ifx-content-visibility The browser skips laying out sections far below the viewport (CSS content-visibility). Noticeable on very long CMS pages. Disable if in-page search (Ctrl+F) misbehaves.
- Pre-establish connections
ifx-preconnect Comma-separated domains to open a connection to during page load, e.g. https://cdn.example.com. Only add domains that genuinely serve files early – every superfluous entry costs bandwidth instead.
Animations
- Animations
ifx-animations How long transitions take – on hover, when expanding and when fading in. “Subtle” uses short times (120 to 320 ms), “Full” longer ones (160 to 450 ms), which makes motion more noticeable. “Off” practically switches transitions off and also stops the USP ticker.
Regardless of this, nobody who has set “reduce motion” in their operating system gets animations – as long as the matching setting in the Performance tab is active.
- Respect the "reduce motion" system setting
ifx-respect-reduced-motion Users who set reduced motion in their operating system get no animations. For some people motion triggers genuine nausea or dizziness – please leave enabled.
2.8 SEO & accessibility
Structured data
- Official profile links (sameAs)
ifx-org-same-as Comma-separated, complete URLs to official profiles (social media, Wikipedia, company registers). Helps Google map the shop unambiguously to a brand – the basis for the knowledge panel. Shopware already emits name and logo as organisation data itself; this field only ADDS the profile links to it, it does not create a second record. Only enter profiles the shop operator actually owns: linking third-party profiles here hurts the mapping.
Accessibility
- Clearly visible focus ring
ifx-focus-visible Draws a strong ring around the active element for keyboard users. Invisible to mouse users. Please do not disable – without a focus ring the shop is practically unusable by keyboard.
- Enforce a minimum size for controls
ifx-touch-targets Raises buttons, links and icons to at least 44x44px. That is the minimum size recommended by WCAG and Apple for reliable finger targeting.
2.9 Product page
Description & reviews
- Tabs on the product page
ifx-tab-style "Underline" marks the active tab with a line, "Filled" gives it the highlight colour as a background.
Shows the article's META DESCRIPTION on the product page. Shopware does not use it there – it only goes to search engines. Yet that sentence is usually the best short version an article has.
“Below the name” places it full width under the heading. “In the buy area” places it in the right column directly above the price instead – narrower, but in the field of view of someone already about to buy. Limited to four lines so a long description cannot push the price out of sight.
Both at once is deliberately not offered: the same text twice on one page reads like a mistake.
With no meta description maintained, nothing appears. The entry in the page head stays unchanged either way.
- Description and reviews
ifx-detail-tabs “Tabs” is Shopware's presentation: a bar with description, reviews and further sections, one of which is visible at a time.
“Collapsible sections” shows the same sections stacked as an accordion. Reviews come first and start collapsed, the description sits below and starts open. Opening one closes the other – that is not extra machinery but exactly the behaviour of tabs, presented differently.
Why it helps: on narrow screens a tab bar with three or more entries is awkward, and a collapsed section still announces itself through its heading. If you want reviews high up the page, this puts them there.
Without JavaScript it stays with tabs.
- Star rating in the buy area
ifx-detail-rating Shopware places the average rating between the tax notice and the delivery time – in the middle of the mandatory details.
“At the top” moves it to the start of the buy area, directly below the product name. There it is taken in at first glance instead of surfacing while reading the price details.
Without reviews nothing changes – there is nothing to move.
Buy area
- Included in the price (cart)
ifx-cart-included A box directly below the cart line items showing what is included at no extra charge, such as an update plan.
Format: Title|Description|Value. Leave empty and nothing is shown.
On the third part: it appears struck through next to the word “included” and is deliberately not preset. A reference price may only be shown if the item is genuinely available separately at that price.
- Price on the product page
ifx-price-style “Boxed” puts the price on the alternate surface – it catches the eye immediately but feels heavy.
“Plain” shows it large and bold without a background. That is the calmer variant: the price carries itself through size and weight rather than a filled area, and the column looks tidier.
- Buy area
ifx-buy-layout “Side by side” is Shopware's arrangement: quantity on the left, button next to it. The button only gets two thirds of the width.
“Stacked” puts the quantity above the button and gives the button the full width. The buy button is the most important control on the page – in narrow columns this gives it noticeably more weight.
- Mobile buy bar
ifx-buybar A slim bar with the price and the buy button that appears on phones once the real buy area has scrolled well out of view.
“Below the header” is the default. There the bar sits roughly where the buy area was, and it is not covered by the thumb when holding the device.
“At the bottom edge” is the pattern known from apps. Note: with the mobile action bar switched on as well, two control bars end up stacked at the bottom – and with them two buttons with similar labels.
“Off” ships no markup at all.
- Show buy bar after (% of screen height)
ifx-buybar-trigger Additional distance to scroll after the real buy button has disappeared before the bar appears – in percent of the screen height.
The reference line is the bottom edge of the header, not the top of the window: at 0 (the default) the bar slides out at exactly the moment the real button slips under the header. To the eye the same button docks there; scrolling back up puts it back in its original place.
Higher values delay the bar: 75 is roughly three quarters of a screen of additional scrolling. That is useful if the bar should deliberately appear only deep into the page.
The value applies in both directions – scrolling back up hides the bar again at the same point.
- Height of the button in the buy bar (px)
ifx-buybar-height Determines the height of the whole bar: it ends up about a third taller than the button, because a sixth of the button height is added as padding above and below.
Measured values: 48 (the default) gives a 65px bar, 36 gives 49px, 24 gives 33px – exactly half the height.
On usability: WCAG 2.5.8 names 24 pixels as the minimum size for controls and 44 pixels as the target size. At 24 the button sits exactly on the lower bound; below that it falls short. Width is unaffected – the button takes up the full remaining width.
- Variant selection
ifx-variant-style Affects variants stored as an IMAGE – typically colours.
“Box” shows them as rectangular fields. “Circle” turns them into round colour dots as known from fashion and electronics shops; the image fills the circle completely.
Variants without an image – sizes, for instance – stay rectangular in both cases, because text does not fit into a circle.
Image gallery
- Change image on hover
ifx-gallery-hover Moving the mouse over a thumbnail switches the large image – no click needed.
Clicking still works exactly as before. That matters: a touch device has no hover, and anyone using the keyboard also depends on the click. This setting adds a way in, it does not replace one.
For the same reason the effect only appears where there is a real mouse pointer. On a phone nothing happens.
When enabled, the thumbnail is also highlighted slightly on hover so it is clear that it responds.
- Hover delay (ms)
ifx-gallery-hover-delay How long the pointer has to rest on a thumbnail before the image changes. Default is 90 milliseconds.
Without this pause every sweep of the mouse fires a burst of changes: drag the pointer across the row once and the gallery flicks through every image. With it, something only happens when the visitor actually looks.
0 disables the pause – the change is then immediate. Values above 300 feel sluggish; anything above 1000 is capped anyway.
Only has an effect while “Change image on hover” is enabled.
3 Building blocks for shopping experiences
The theme does not add shopping experience elements of its own. You build pages from sections, blocks and elements as usual and set a CSS class in the right place – the theme supplies the look. A later update can improve it without anyone touching the content.
3.1 How to set the classes
- Section or block: In the layout (Content › Shopping Experiences), click the section or block and fill in the CSS class field in the settings on the right. Separate several classes with spaces.
- In text: In the text element, switch to the code view (
</>button in the editor toolbar) and put the class on the HTML element.
What Shopware keeps in text. Text from the editor passes through a sanitiser before it is delivered. Kept are, among others, div, span, p, headings, lists (ul, ol, dl), tables, blockquote, cite, a, img, pre and code, and the attributes class, id and style.
Removed are HTML5 elements such as figure, details and summary, plus svg and attributes such as aria-hidden or loading – the content stays, only the wrapper goes. Only part of style survives as well: colour, spacing, alignment and font size pass, display, gap or grid-template-columns do not. That is why all building blocks below work with classes.
3.2 Sections
These classes go into the CSS class field of a section.
| Class | Effect |
|---|---|
ifx-section | More space above and below – 48 to 96 pixels depending on screen width. |
ifx-band | Puts the section on the surface colour and so divides long pages into chapters. The band becomes visible when surface colour and page background differ – in dark mode they always do. Combines well with ifx-section. |
ifx-hero | Header area on a dark or busy background image: a gradient from the bottom covers the image where the text sits. The text is white and sits bottom left in the content column. Set the background image on the section and switch the section to full width. |
ifx-hero-hell | The counterpart for light background images: a light veil from the left, dark text, the text on the left and vertically centred. Stays light in dark mode too, because the photo stays light. |
If a header section with ifx-hero or ifx-hero-hell is the first section on a page without breadcrumbs – such as the home page –, the image joins the page header without a gap.
3.3 Blocks
These classes go into the CSS class field of a block. The first five are meant for Shopware’s image and text block.
| Class | Effect |
|---|---|
ifx-media | Image and text vertically centred to each other, the image rounded, the text with side spacing. |
ifx-media-right | Together with ifx-media: the image sits on the right from tablet width. Set alternately, a list turns into a flow. On phones the image always comes first. |
ifx-media--overlay | Together with ifx-media: the text sits at the bottom of the image, on a dark gradient that covers at least 62 % under every line. White text thus stays readable on light photos too – however long the text gets. |
ifx-media--halb | Together with ifx-media--overlay: from 992 pixels wide the block takes half a column. Two such blocks in a row sit side by side at equal height; all other blocks in the section keep full width. |
ifx-team | A narrow, centred person card with a round image (180 pixels) and centred text. For several people, ifx-people in text is usually more practical. |
ifx-form-card | For form blocks: the form sits in a card with a border and offset surface, at most 44rem wide and centred. |
An example: two cards with text on the photo side by side, one full-width card below. The first two blocks get ifx-media ifx-media--overlay ifx-media--halb, the third ifx-media ifx-media--overlay.
3.4 Elements in text
You write these building blocks as HTML into a text element. The examples can be used as they are; replace texts and addresses.
Eyebrow, lead, centring
ifx-eyebrow is a small line in capitals and the accent colour above a heading, ifx-lead an introductory sentence – larger than body text and limited to a comfortable line length. ifx-center centres both.
<div class="ifx-center">
<span class="ifx-eyebrow">What we stand for</span>
<h2>The principle</h2>
<p class="ifx-lead">One sentence that sums up what it is about.</p>
</div>Cards
ifx-card is a card with a border on an offset surface; several cards in a grid get equal height. ifx-card__mark sets a short line in the accent colour as an anchor – deliberately without a number, because a number claims an order. Instead of the line, ifx-tag puts a small label above the heading, such as the name of an area.
<div class="ifx-card">
<span class="ifx-card__mark"></span>
<h3>Innovation</h3>
<p>Short text for the card.</p>
</div>
<div class="ifx-card">
<span class="ifx-tag">Warehouse</span>
<h3>One item, any number of storage bins</h3>
<p>Short text for the card.</p>
</div>Columns and grids
Two families with similar names and different purposes:
ifx-cols-2andifx-cols-3spread content over columns with a minimum width of 280 and 240 pixels. How many columns appear depends on the space – right for running text.ifx-grid-2andifx-grid-3have a fixed number of columns per screen width: one column on phones,ifx-grid-2two from 768 pixels,ifx-grid-3two from 576 and three from 992 pixels. Right for a counted set of cards: four cards give 2 + 2, not 3 + 1. If one card is left over in the two-column row ofifx-grid-3, it takes the whole row.
<div class="ifx-grid-3">
<div class="ifx-card">…</div>
<div class="ifx-card">…</div>
<div class="ifx-card">…</div>
</div>Trust line and key figures
ifx-trustline lines up short points with ticks side by side, with a line above – below a header area, for instance. ifx-stats is a bar of key figures: the number large in the accent colour, the label small below.
<ul class="ifx-trustline">
<li>Runs on your own hardware</li>
<li>No subscription</li>
</ul>
<ul class="ifx-stats">
<li class="ifx-stat"><b>209</b><span>Releases</span></li>
<li class="ifx-stat"><b>12</b><span>Work areas</span></li>
</ul>Quote and note
ifx-quote sets a quotation with an accent line on an offset surface, with cite below for the source. ifx-hinweis highlights a single paragraph that should not be overlooked – at normal font size.
<blockquote class="ifx-quote">
<p>We did not start out to sell software. We started because the paperwork annoyed us.</p>
<cite>Name, role</cite>
</blockquote>
<p class="ifx-hinweis">Important: this sentence should not be overlooked.</p>Questions and answers
A list of questions (dt) and answers (dd) with the class ifx-faq. The theme turns it into an accordion: the questions become buttons, the answers expand – operable by keyboard too. Without JavaScript everything stays visible.
<dl class="ifx-faq">
<dt>How long does delivery take?</dt>
<dd><p>The answer, several paragraphs if you like.</p></dd>
<dt>Next question?</dt>
<dd><p>Next answer.</p></dd>
</dl>Diagrams and tables
ifx-figure puts a diagram on a light surface with a border – light in dark mode too, because diagrams are usually drawn light. On narrow screens the diagram can be scrolled sideways instead of shrinking until it is unreadable. Put diagrams into the text as an image rather than as an image block.
The theme styles tables in text anyway, with rules and an offset header row. The wrapper ifx-tablewrap makes a wide table scroll sideways instead of breaking the page. From four columns, use ifx-tablewrap ifx-tablewrap--breit: the table keeps a minimum width and scrolls on phones instead of being squashed.
<div class="ifx-figure">
<img src="/media/…/diagram.svg" alt="What the diagram shows, in one sentence">
</div>
<div class="ifx-tablewrap">
<table>
<thead><tr><th>Column</th><th>Column</th></tr></thead>
<tbody><tr><td>Label</td><td>Explanation</td></tr></tbody>
</table>
</div>Link tiles
ifx-tools is a list of tiles, each of which is a link as a whole – meant for pointers to other pages or tools. The address sits at the bottom with an arrow. ifx-tool__local adds a small badge above it if you want one.
<ul class="ifx-tools">
<li><a class="ifx-tool" href="https://example.com/">
<span class="ifx-tool__name">Name of the tool</span>
<span class="ifx-tool__desc">What it does, in one sentence.</span>
<span class="ifx-tool__host">example.com</span>
</a></li>
</ul>Entry tiles
ifx-tiles is a row of tiles with a title, a short text and an arrow – meant as an entry point to the most important areas, for example below the heading of the home page. Each tile is a link as a whole.
Whether the tiles sit side by side or stacked depends on the space the text has at that point: two to four tiles share one row as soon as each is wide enough for its title, otherwise each gets a row of its own. Two on top and one alone below never happens. From five tiles on, they are always stacked.
In a header section with ifx-hero the tiles become translucent and use the full width of the content column; heading and introduction above keep their line length. In ifx-hero-hell they stay in the text column, so the subject on the right stays clear.
<ul class="ifx-tiles">
<li><a class="ifx-tile" href="/products/">
<span class="ifx-tile__title">Products</span>
<span class="ifx-tile__text">What you find there, in one sentence.</span>
</a></li>
<li><a class="ifx-tile" href="/services/">
<span class="ifx-tile__title">Services</span>
<span class="ifx-tile__text">One sentence about the second area.</span>
</a></li>
</ul>People
ifx-people is a grid of person cards with round photos of up to 180 pixels, centred as a group. Another person is another div. Without a photo, use a circle in the accent colour: <div class="ifx-person__foto ifx-person__foto--initial">A</div> shows an initial. With the class ifx-person--verborgen you can prepare a person without visitors seeing it.
<div class="ifx-people">
<div class="ifx-person">
<img class="ifx-person__foto" src="/media/…/photo.jpg" alt="First name Last name" width="180" height="180">
<h3>First name Last name</h3>
<p>Role</p>
</div>
</div>Text on a background image
ifx-hero-overlay is a semi-transparent dark box with white, centred text – for text on a section’s background image when it should not be a full header area (ifx-hero).
Reference page with contents
ifx-doc builds a long page with jump links – this manual is built that way. From 992 pixels the contents sit on the left and follow you while reading; below that they sit above the text. Contents and text must be in the same text element; the jump targets are ordinary id attributes.
<div class="ifx-doc">
<div class="ifx-doc__toc" id="contents">
<p><strong>Contents</strong></p>
<ol>
<li><a href="#first-chapter">First chapter</a></li>
<li><a href="#second-chapter">Second chapter</a></li>
</ol>
</div>
<div class="ifx-doc__inhalt">
<h2 id="first-chapter">First chapter</h2>
<p>…</p>
<h2 id="second-chapter">Second chapter</h2>
<p>…</p>
</div>
</div>4 Snippets
All texts the theme outputs itself are snippets with the prefix innospark.theme. You change them under Settings › Shop › Snippets: choose a set, e.g. BASE en-GB, search for innospark.theme, enter the value, save.
Some texts can also be set in the theme configuration – the USPs and the claim. A value there applies to all languages and takes precedence over the snippet; if the field is empty, the translatable snippet applies.
Changing texts for one sales channel only. Create a snippet set of your own and assign it to the channel’s domain (Sales Channels › your channel, Domains section). Entries in that set apply only there. The new set starts with the shipped default texts – changes you made in another set have to be carried over by hand if you need them.
4.1 The theme’s snippets
The table lists the keys without the shared prefix innospark.theme. Snippets shipped empty produce no output until you fill them. That is deliberate: a theme should not write an advertising claim or a promise into your shop that you never made.
| Snippet | Default text | Where it appears |
|---|---|---|
appbar.account | Account | Mobile action bar: customer account button |
appbar.cart | Cart | Mobile action bar: cart button |
appbar.label | Quick access | Name of the mobile action bar for screen readers |
appbar.menu | Menu | Mobile action bar: menu button |
appbar.search | Search | Mobile action bar: search button |
b2b.hint | Buying for a company? | Footer: sentence before the link from “Note for business customers” |
buybar.addToCart | Add to cart | Mobile buy bar: button label |
cart.included | Included in the price | Heading of the “Included in the price” box in the cart and on the confirmation page |
cart.includedFree | included | The word next to the struck-through value in that box |
document.included | empty | Invoice: sentence above the total for orders with download items. Empty means: no sentence |
finish.confirmationMail | We are sending the order confirmation to <strong>%email%</strong>. If this address is wrong, please get in touch with us. | Page after ordering: the address the order confirmation goes to. %email% inserts the address; empty means: Shopware’s sentence without the address |
footer.claim | empty | Sender block as the first footer column, if the theme setting “Claim below the logo” is empty. HTML allowed: <strong> for the name – it appears like a column heading –, <br> for lines |
footer.paymentHeadline | empty | Label before the payment logos in the footer, e.g. “Secure payment” |
footer.priceNoteDigital | All prices incl. VAT. We offer digital products only – no shipping costs apply. | Footer price note with “Digital shop”, for gross prices |
footer.priceNoteDigitalNet | All prices excl. VAT. We offer digital products only – no shipping costs apply. | The same for net prices, e.g. in a customer group for business customers, and for tax-free orders |
revocation.privacyNotice | We use your details to process your withdrawal and to confirm its receipt. For details, see our %privacyModalTagOpen%privacy policy%privacyModalTagClose%. | Privacy note below the online withdrawal form. The placeholders set the link to the privacy policy |
schemeToggle | Switch between light and dark appearance | Label of the light/dark toggle – tooltip and screen readers |
tax.grossShippingFree | Prices incl. VAT – no shipping costs for this item | Below the price for items without shipping costs, for gross prices |
tax.netShippingFree | Prices excl. VAT – no shipping costs for this item | The same for net prices |
topbar.greeting | Hello, | Top bar: greeting before the first name of logged-in customers |
topbar.login | Log in | Top bar: login link |
topbar.or | or | Top bar: word between log in and register |
topbar.register | Register | Top bar: registration link |
topbar.service | Service & help | Top bar: label of the service menu |
usp.one | empty | USP 1 in the top bar, if the theme field “USP 1” is empty |
usp.three | empty | USP 3 in the top bar, if the theme field “USP 3” is empty |
usp.two | empty | USP 2 in the top bar, if the theme field “USP 2” is empty |
4.2 Contact lines with icons in the footer
The service column in the footer comes from Shopware’s own snippets footer.serviceHotline and footer.serviceContactTextPage. The theme ships three classes that put an icon in front of a line: ifx-kontakt--telefon, ifx-kontakt--mail and ifx-kontakt--formular, each together with ifx-kontakt.
We are here for you:
<a href="tel:+49401234567" class="ifx-kontakt ifx-kontakt--telefon">
<span class="visually-hidden">Phone: </span>+49 40 123 45 67</a>
<a href="mailto:info@example.com" class="ifx-kontakt ifx-kontakt--mail">
<span class="visually-hidden">E-mail: </span>info@example.com</a>And for footer.serviceContactTextPage:
<a href="%url%" class="ifx-kontakt ifx-kontakt--formular">Contact form</a>The icon is pure decoration; the invisible prefix tells a screen reader what the line is. When saving, Shopware removes button and a few other elements from snippets – links with classes, span and line breaks are kept.
5 Legally relevant places
In a few places the shop outputs information that matters legally. The theme only steps in where Shopware’s default does not fit a particular case; everything else consists of settings that change nothing until you fill them in. This chapter describes what the theme does in these places. Which information your shop needs, and how it has to be worded, depends on what you sell – have your texts checked by a lawyer if in doubt.
5.1 Price note in the footer
The line at the very bottom of the footer about tax and shipping costs is controlled by “Price note in the footer”:
- Standard uses Shopware’s own text, which mentions shipping costs and cash-on-delivery fees, including the link to the shipping and payment page – right for a shop that ships goods.
- Digital shop replaces it with a note without shipping. The sentence follows the customer’s price display: for gross prices
innospark.theme.footer.priceNoteDigital, for net prices – in a customer group for business customers, for instance – and for tax-free ordersinnospark.theme.footer.priceNoteDigitalNet. - Off hides the line. In Germany, stating whether prices include VAT is mandatory towards consumers; if you switch it off here, you have to state it elsewhere.
5.2 Shipping note on the item
Below the price, Shopware always mentions shipping costs. If an item is marked as free of shipping costs (the Free shipping switch on the product), the theme replaces the sentence with “… no shipping costs for this item” – automatically, without a setting. The wording deliberately refers to the item: if an item with shipping sits in the cart next to it, costs still apply. The link to the shipping and payment page stays. You change the text via innospark.theme.tax.grossShippingFree and innospark.theme.tax.netShippingFree.
5.3 Contact in the checkout
In the header of the checkout, Shopware shows a placeholder phone number (12345-123456789). Enter your real contact details in “Contact in the checkout header”, in the format Heading|Contact|Note:
Questions about your order?|info@example.com|Phone +49 40 1234567With an @ the contact becomes an e-mail link, otherwise a phone link; spaces, slashes, hyphens and brackets are dropped from the link. Leave it empty and Shopware’s version stays – placeholder included.
5.4 E-mail address after ordering
After an order is placed, Shopware only says “Order confirmation email has been sent.” The theme names the address the confirmation goes to, so a typo shows up right away instead of when no e-mail arrives. It is the address stored with the order: if the customer later changes the address in their account, the order keeps the old one. You can correct it in the Administration in the order, tab Details; Shopware cannot resend the confirmation on its own. You change the sentence via innospark.theme.finish.confirmationMail; the placeholder %email% inserts the address. If the snippet is empty, Shopware’s sentence appears.
5.5 Online withdrawal form
The theme changes Shopware’s withdrawal form in one place: instead of a mandatory privacy checkbox, a note with a link to the privacy policy sits below the form (innospark.theme.revocation.privacyNotice). The reason: a withdrawal should not depend on additional hurdles, and processing it needs no consent, only information about it. The form fields and the withdrawal button in the footer stay as Shopware outputs them.
5.6 “Included in the price”
“Included in the price (cart)” shows a box below the line items in the cart and on the confirmation page for a service that comes at no extra charge – an update plan, for instance. Format Title|Description|Value. The value appears struck through next to “included”: only enter it if the service can genuinely be bought separately at that price. A reference price without a real reference is misleading.
5.7 Invoice
The theme adapts the invoice template for digital items. This applies in every sales channel, because Shopware generates documents outside the theme:
- If an order contains download items, the snippet
innospark.theme.document.includedappears above the total – a note on what the price includes, for instance. It ships empty; without an entry nothing appears. The theme setting “Included in the price” only affects the storefront – if you use both, maintain both. - If an invoice contains download items only, Shopware’s retention-of-title sentence – the goods remain the seller’s property until paid in full – is left out. It is meant for deliveries of goods.
5.8 Note on AI-generated content
“Note on AI-generated content” appears as fine print at the very bottom of the footer, below the price note. The field ships empty – whether the note applies is known only to whoever put the images and texts there. The part up to the first colon is set in bold.
5.9 Fonts without third-party servers
If “Font source” is set to “System fonts”, “Serif headings” or “Bundled fonts”, the storefront loads no font from a third-party server: system fonts are already on the device, and the bundled fonts Playfair Display and Rubik are served by your own server. With “Theme font” the font from Shopware’s own settings applies – whether it comes from a third-party service depends on how it is included.
5.10 Mandatory pages on phones
Enter your legal notice, privacy policy and withdrawal information in “Service menu in the top bar”. They then appear in the top bar and additionally in the expandable menu on phones – reachable with one tap there instead of only at the very bottom of the footer.
6 Frequently asked questions
- I changed a setting, but nothing changes in the storefront.
The most common reasons, in this order:
- A colour preset is selected. The colour fields below it then have no effect – set “Colour preset (light mode)” to “Own colours”.
- The field “Pasted values” still contains a block from the design preview. It overrides the individual fields.
- You are editing a different theme from the one that is assigned – the original instead of your channel’s duplicate, for instance.
- The setting concerns the theme’s header or product card, but that area is left to a PVS plugin (see below).
- Caching: reload the page without cache (Ctrl + F5), otherwise clear the Shopware cache.
- How do I try out colours without customers seeing anything?
With the design preview: switch on “Enable design preview”, save and open the storefront with
?ifx-preview=1at the end of the address. Colours, corners, spacing and card variants change instantly – in your browser only. “Copy values” produces a block that you paste into “Pasted values”; or you transfer the values into the individual fields. Switch the preview off again afterwards.- How do I set up dark mode?
Switch on “Provide dark mode” and choose under “When dark”: follow the visitor’s system setting, with a toggle in the top bar, or always dark. The colours come from “Colour preset (dark mode)” or from the seven colour fields below it. If your logo is hard to see on a dark background, add a second one in “Logo for dark mode”. The toggle sits in the top bar – if the top bar is switched off, there is no toggle, and it is also missing on pages where “Also hide the top bar on these pages” hides the bar.
- I use PVS fancy Navbar or PVS fancy Product Card.
The theme detects both plugins. With “Header variant” or “Product card variant” set to “Automatic”, it stays out of the respective area so that two designs do not stack. Settings for the header, top bar or product card then have no effect. If you want the theme’s design anyway, choose “Always theme header” or “Always theme card”.
- Does the theme slow my shop down?
It is designed to do the opposite: no JavaScript bundle, just a few kilobytes of script directly in the HTML; switches that are off produce no CSS at all; images only load when they come into view, and far-away sections of long pages are only rendered when you scroll towards them. The controls for this are in the Performance tab.
- Why does my HTML in a shopping experience text look different from what I entered?
Shopware sanitises text before delivering it and removes some elements and style declarations in the process – see section 3.1. Work with the theme’s classes instead of
style.- On phones, two bars are stacked at the bottom.
Those are the mobile action bar and the buy bar, when both sit at the bottom edge. Set “Mobile buy bar” to “Below the header” (the default) or switch off “Mobile action bar at the bottom”.
- May I use the theme in several shops?
The licence terms are authoritative. They allow installation in up to two Shopware installations (section 2 (1)); more in chapter 7.
- How long do I get updates?
Every software product includes updates for twelve months from delivery – at no extra charge. After that the theme remains usable; the right of use is perpetual. The details are in our terms and conditions (German). How to install a new version is described in section 1.4.
- Where do I get help?
Write to info@innospark.de or call +49 40 2286 8271. Please state your Shopware version and the theme version – both are listed under Extensions › My extensions.
7 Licence
The InnoSpark Fancy Theme is software by InnoSpark GmbH. Its licence terms (EULA) apply. They are included in the package as LICENSE.txt and available in the shop under Lizenzbedingungen (EULA). The licence terms are currently available in German only. Only their wording is authoritative; the overview below is just a guide.
The right of use is set out in section 2 (1), German original:
(1) Der Anbieter räumt dem Lizenznehmer gegen einmalige Zahlung des vereinbarten Entgelts ein einfaches, zeitlich unbefristetes, nicht ausschließliches Recht ein, die Software im Rahmen ihrer bestimmungsgemäßen Funktionen in bis zu zwei (2) Shopware-Installationen des Lizenznehmers zu installieren, zu konfigurieren und zu nutzen.
7.1 Sections of the licence terms
The German headings, each with an English gloss for orientation.
- § 1 Geltungsbereich und Vertragsgegenstand – scope and subject matter
- § 2 Einräumung von Nutzungsrechten – grant of rights of use
- § 3 Grenzen der Nutzung – limits of use
- § 4 Sicherungskopie – backup copy
- § 5 Weiterveräußerung der Lizenz – resale of the licence
- § 6 Beobachten, Untersuchen, Dekompilierung – observing, studying, decompiling
- § 7 Gewährleistung und Aktualisierungen – warranty and updates
- § 8 Haftung – liability
- § 9 Drittanbieter- und Open-Source-Komponenten – third-party and open-source components
- § 10 Vertragsdauer – term
- § 11 Schlussbestimmungen – final provisions
7.2 Components by other authors
Three components do not originate from InnoSpark and remain under their own licence (section 9 of the licence terms). The licence texts must stay in the package.
| Component | Licence | Licence text in the package |
|---|---|---|
| Fonts Rubik and Playfair Display | SIL Open Font License 1.1 | src/Resources/app/storefront/src/assets/fonts/OFL-*.txt |
| 17 icons from the Lucide set | ISC License | src/Resources/views/storefront/icon/lucide/LICENSE-Lucide.txt |
| Lines taken over from the Shopware core | MIT License | LICENSE-Shopware.txt |
7.3 Provider
InnoSpark GmbH · Grellkamp 6b · 22113 Oststeinbek · Germany
info@innospark.de · +49 40 2286 8271