Theme-Handbuch

InnoSpark Fancy Theme

Installation, alle 120 Einstellungen, die Bausteine für Erlebniswelten und die Stellen, an denen es rechtlich genau wird – an einem Ort.

Deutsch · English

Stand: Version 1.70.43. Dasselbe Handbuch liegt dem Download als PDF bei, im Ordner „docs“.

Inhalt

1 Installation und Updates
2 Einstellungen
3 Bausteine für Erlebniswelten
4 Textbausteine
1. 4.1 Die Textbausteine des Themes
2. 4.2 Kontaktzeilen mit Symbolen im Fußbereich
5 Rechtlich relevante Stellen
6 Häufige Fragen
7 Lizenz

1 Installation und Updates

Das Theme ist ein Shopware-Plugin. Sie laden es als ZIP-Datei hoch, weisen es einem Verkaufskanal zu und stellen es anschließend in der Theme-Konfiguration ein.

1.1 Voraussetzungen

Shopware 6.7 – jede Version 6.7.x.
Kein Build-Schritt. Das Theme bringt kein kompiliertes JavaScript mit, sein Stylesheet übersetzt Shopware beim Speichern selbst. Node.js oder bin/build-storefront.sh brauchen Sie nicht.
Zugang zur Administration mit Rechten für Erweiterungen und Themes – oder Zugriff auf die Konsole des Servers.

1.2 Installation über die Administration

Öffnen Sie Erweiterungen › Meine Erweiterungen und klicken Sie auf Erweiterung hochladen.
Wählen Sie die Datei InnoSparkFancyTheme_v1.70.43.zip. Nicht entpacken – Shopware erwartet das Archiv.
Klicken Sie beim Eintrag InnoSpark Fancy Theme auf Installieren und aktivieren Sie die Erweiterung anschließend.
Weisen Sie das Theme dem Verkaufskanal zu: Verkaufskanäle › Ihr Kanal, Bereich Theme, Theme ändern. Shopware übersetzt das Theme dabei; danach ist es in der Storefront zu sehen.

Aktiv ist nicht zugewiesen. Die Vorlagen eines aktiven Theme-Plugins sind in allen Verkaufskanälen im Spiel, sein Stylesheet nur dort, wo es zugewiesen ist. Das Theme ist darauf vorbereitet: Elemente wie die mobile Aktionsleiste erscheinen erst, wenn sein Stylesheet tatsächlich geladen ist. Einige Anpassungen gelten dagegen bewusst kanalübergreifend – die Rechnungsvorlage und das Online-Widerrufsformular, siehe Kapitel 5.

1.3 Ein eigenes Theme je Verkaufskanal

Betreiben Sie mehrere Verkaufskanäle mit unterschiedlichem Auftritt, legen Sie je Kanal ein Duplikat an: Inhalte › Themes, im Menü (…) der Kachel InnoSpark Fancy Theme das Theme duplizieren. Das Duplikat erbt Vorlagen und Stylesheet vom Original und hat eine eigene Konfiguration. Updates des Originals erreichen damit alle Duplikate, die Einstellungen bleiben je Kanal getrennt.

Weisen Sie jedem Kanal sein Duplikat zu und stellen Sie es dort ein – nicht im Original.

1.4 Updates

Laden Sie die neue ZIP-Datei wie bei der Installation hoch. Shopware erkennt die höhere Version.
Klicken Sie beim Eintrag auf Aktualisieren.
Übersetzen Sie das Theme neu: Inhalte › Themes, Theme öffnen, Speichern – auch ohne Änderung, bei Duplikaten für jedes Duplikat. Auf der Konsole genügt bin/console theme:compile.
Leeren Sie den Cache: Einstellungen › System › Caches & Indizes, Cache leeren.

Warum Schritt 3? Nach einem Plugin-Update übersetzt Shopware zugewiesene Themes nicht in jedem Fall neu. Geänderte Vorlagen wirken dann schon, das Stylesheet ist aber noch das alte – die Seite sieht halb aktualisiert aus.

Ihre Einstellungen bleiben bei einem Update erhalten: Sie gehören zum Theme-Datensatz in der Datenbank, nicht zu den Plugin-Dateien. Neue Einstellungen einer Version starten mit ihrem Standardwert. Die Änderungen je Version stehen in CHANGELOG.txt im Paket.

1.5 Installation über die Konsole

Für Server mit Zugang zur Kommandozeile, im Hauptverzeichnis der 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:clear

theme:change fragt nach Verkaufskanal und Theme und übersetzt das Theme. Für ein Update ersetzen Sie den Ordner custom/plugins/InnoSparkFancyTheme und rufen dann plugin:refresh, plugin:update InnoSparkFancyTheme, theme:compile und cache:clear auf.

1.6 Deinstallation

Weisen Sie vorher allen Verkaufskanälen, die dieses Theme oder ein Duplikat davon nutzen, ein anderes Theme zu – etwa Shopwares Standard-Theme. Ein zugewiesenes Theme lässt Shopware nicht deaktivieren. Danach deaktivieren und deinstallieren Sie die Erweiterung wie jede andere.

↑ Zum Inhalt

2 Einstellungen

Die Einstellungen finden Sie unter Inhalte › Themes beim Theme bzw. bei seinem Duplikat. Das Theme bringt 120 eigene Einstellungen in 9 Reitern mit. Shopwares eigene Felder – Logo, Grundfarben, Schriften – stehen daneben und behalten ihre Bedeutung.

Speichern übersetzt das Theme neu; nach wenigen Sekunden ist die Änderung in der Storefront zu sehen. Die meisten Farbfelder wirken nur, solange die zugehörige Farbvorlage auf „Eigene Farben“ steht – der häufigste Grund, warum eine Änderung scheinbar nicht greift.

Neben jeder Einstellung steht ihr technischer Name. Er hilft bei Rückfragen und beim Suchen in diesem Handbuch.

2.1 Design

32 Einstellungen in diesem Reiter

Farben

Farbvorlage (Hellmodus) ifx-color-preset

Auswahl · Standard: Eigene Farben (Felder unten)

„Eigene Farben“ heißt: es gelten die Farbfelder darunter.

Jede andere Auswahl legt ein fertiges, aufeinander abgestimmtes Farbbild darüber – Akzent, Flächen, Text, Rahmen, Kopfzeile, Top-Bar, Kachel und Fußzeile in einem Zug. Die Farbfelder darunter bleiben sichtbar, wirken aber nicht mehr.

Eine Vorlage stellt nichts ein, was Sie nicht auch von Hand einstellen könnten: sie belegt genau dieselben Felder, nur alle gleichzeitig. Wer ein eigenes Bild sucht, nimmt eine Vorlage als Ausgangspunkt, liest die Werte in der Design-Vorschau ab und stellt dann auf „Eigene Farben“ zurück.

Für den Dunkelmodus gibt es eine eigene Auswahl im Block „Dunkelmodus“ – dunkle Farben lassen sich nicht aus hellen errechnen.

Mögliche Werte: Eigene Farben (Felder unten) · Kühl & technisch – Blau auf Weiß · Warm & ruhig – Sand und Kupfer · Kontrast – Schwarzweiß mit Signalfarbe

Akzentfarbe ifx-color-accent

Farbe · Standard: #7c4dff

Wird für Links, Fokus-Ringe, aktive Zustände und Hervorhebungen genutzt. Die Shopware-Standardfarben (Primär, Kaufen-Button, Preis) stehen im Tab "Farben".

Textfarbe auf Akzentfarbe ifx-color-accent-contrast

Farbe · Standard: #ffffff

Muss zur Akzentfarbe einen Kontrast von mindestens 4,5:1 haben (WCAG AA).

Flächenfarbe (Karten, Panels) ifx-color-surface

Farbe · Standard: #ffffff

Farbe für Flächen auf der Seite und für alles, was sich darüber öffnet: Eingabefelder, Karten, Akkordeons, Aufklappmenüs, Dialoge und das Seitenmenü auf dem Handy. Den Seitenhintergrund selbst legt Shopwares eigenes Feld für die Hintergrundfarbe fest.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Abgesetzte Fläche ifx-color-surface-alt

Farbe · Standard: #f6f7f9

Hintergrund für abgesetzte Bereiche wie Filter-Sidebar, Warenkorb-Summen oder CMS-Blöcke.

Sekundäre Textfarbe ifx-color-text-muted

Farbe · Standard: #5c6470

Für Hilfstexte, Lieferzeiten, Grundpreise. Achtung: auch dieser Ton braucht 4,5:1 Kontrast zum Hintergrund.

Rahmenfarbe ifx-color-border

Farbe · Standard: #e3e6ea

Farbe aller Rahmen und Trennlinien: Eingabefelder, Kacheln, Karten, Tabellen, Dialoge und Aufklappmenüs. Eingabefelder erkennt man vor allem an ihrem Rahmen – ein sehr heller Ton macht sie auf weißem Grund schwer auffindbar.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Hervorhebungsfarbe (Flächen) ifx-color-highlight

Farbe · Standard: #7c4dff

Für farbig hinterlegte Elemente wie den aktiven Reiter auf der Produktseite. Bewusst getrennt von der Akzentfarbe: die Akzentfarbe färbt TEXT (Links, Fokus) und muss dafür dunkel genug sein, diese hier liegt HINTER Text und darf deshalb hell sein. Ein helles Gelb funktioniert als Fläche gut und als Linkfarbe gar nicht.

Textfarbe auf Hervorhebung ifx-color-highlight-contrast

Farbe · Standard: #ffffff

Braucht mindestens 4,5:1 Kontrast zur Hervorhebungsfarbe (WCAG AA).

Rundungen & Schatten

Eckenradius – Flächen (px) ifx-radius-base

Zahl · Standard: 12

Gilt für Karten, Bilder, Panels und Modals. 0 = komplett eckig.

Eckenradius – Bedienelemente (px) ifx-radius-control

Zahl · Standard: 10

Gilt für Buttons, Eingabefelder und Selects.

Rahmenstärke (px) ifx-border-width

Zahl · Standard: 1

Stärke der Rahmen und Trennlinien, die das Theme zeichnet – an Kacheln, Karten, Knöpfen, Tabellen und Kennzahlen. 1 ist die Vorgabe, 2 wirkt deutlich kräftiger. 0 blendet die Rahmen aus; Bereiche grenzen sich dann nur noch über ihre Flächenfarbe ab.

Schattenintensität ifx-shadow-strength

Auswahl · Standard: Weich

"Keine" spart etwas Renderaufwand und wirkt flach/modern.

Mögliche Werte: Keine · Weich · Mittel · Kräftig

Symbolsatz ifx-icon-set

Auswahl · Standard: Modern (Strichzeichnung)

"Shopware-Standard" lässt die mitgelieferten Symbole des Shopsystems unverändert. "Modern" ersetzt sie durch feine Strichzeichnungen (Lucide, ISC-Lizenz) mit gleichmäßiger Strichstärke und runden Enden.

Das Theme bringt siebzehn Symbole mit und deckt damit die häufigen Stellen ab: Suche, Warenkorb, Konto, Menü, Schließen, Plus/Minus, Haken, Pfeile, Filter. Für alles andere greift automatisch das Shopware-Symbol – es kann also kein Bedienelement leer bleiben.

Mögliche Werte: Shopware-Standard · Modern (Strichzeichnung)

Knopfform ifx-button-shape

Auswahl · Standard: Weich

„Weich“ nimmt den Radius der Bedienelemente von oben. „Pille“ rundet Knöpfe vollständig ab – eine deutliche Handschrift, die den ganzen Shop freundlicher wirken lässt. „Kantig“ verzichtet auf jede Rundung.

Mögliche Werte: Weich · Pille · Kantig

Aufklappende Menüs ifx-menu-style

Auswahl · Standard: Schlicht

Betrifft Konto-, Sprach- und Währungsmenü sowie den Warenkorb-Aufklapper.

„Schlicht“ lässt Shopwares eigene Darstellung unangetastet. „Panel“ macht daraus abgesetzte Karten: eigener Radius, feiner Rahmen, weicher Schatten, größere Zeilenabstände – und im Konto-Menü eine Titelzeile mit vollbreitem Anmelde-Knopf über der Liste.

Mögliche Werte: Schlicht · Panel

Bewegungscharakter ifx-motion-ease

Auswahl · Standard: Ruhig

„Ruhig“ beschleunigt und bremst gleichmäßig. „Federnd“ schwingt am Ende leicht über das Ziel hinaus – Bewegungen wirken lebendiger, besonders beim Überfahren von Kacheln.

Ohne Wirkung, wenn Animationen ausgeschaltet sind oder das Betriebssystem reduzierte Bewegung verlangt.

Mögliche Werte: Ruhig · Federnd

Kategorienavigation als Kasten ifx-catnav

Auswahl · Standard: Shopware-Standard

Gestaltet Shopwares Element „Kategorienavigation“ als abgesetzten Kasten mit Trennlinien und Pfeilen – die Optik, die man von großen Marktplätzen kennt.

Das Element selbst platziert man in der Erlebniswelt: Inhalte → Erlebniswelten → gewünschtes Layout → Abschnitt mit Seitenleiste wählen → Element „Kategorienavigation“ in die linke Spalte ziehen.

Warum nicht direkt aus dem Theme: der Kategoriebaum wird in Shopware je Element aufgelöst und steht auf einer normalen Seite nirgends zur Verfügung. Das Element bringt ihn mit – und bleibt dabei dort platzierbar, wo er hingehört, statt an einer vom Theme festgelegten Stelle.

Mögliche Werte: Shopware-Standard · Als Kasten

Symbole in der Kategorieliste ifx-catnav-icons

Auswahl · Standard: Keine Symbole

Stellt jedem Eintrag der Kategorie-Seitenleiste eine kleine Kachel voran.

Was darin steht, entscheidet die Kategorie selbst: Ist im Backend ein „Kategoriebild“ gepflegt, erscheint es zugeschnitten in der Kachel. Damit haben Sie die Symbole vollständig in der Hand, ohne eine Zeile Code – Kategorie öffnen, Bild setzen, fertig.

Ist kein Bild gepflegt, steht dort der Anfangsbuchstabe der Kategorie. Das ist bewusst kein allgemeines Platzhaltersymbol: dieselbe Form in jeder Zeile trägt keine Information und macht die Liste nur breiter.

Untereinträge bleiben ohne Kachel – dort geht es um Gliederung, und eine zweite Reihe Kacheln mit Einzug macht daraus eine Wand.

Wirkt zusammen mit „Kategorienavigation“ darüber: Die Kacheln erscheinen in beiden Darstellungen, ihre volle Wirkung entfalten sie in der Darstellung „Als Kasten“.

Mögliche Werte: Keine Symbole · Kategoriebild, sonst Anfangsbuchstabe

Dunkelmodus

Dunkelmodus bereitstellen ifx-dark-enabled

Schalter · Standard: aus

Schaltet den Dunkelmodus frei. Ist der Haken nicht gesetzt, entsteht das zugehörige CSS gar nicht erst – das hält das Stylesheet klein. Wie der Modus greift, steuert das Feld darunter.

Wann dunkel ifx-dark-mode

Auswahl · Standard: Nach Systemeinstellung

„Nach Systemeinstellung“ folgt dem Betriebssystem des Besuchers. „Mit Umschalter“ zeigt zusätzlich einen Schalter in der Kopfzeile; die Wahl bleibt in dessen Browser gespeichert und geht der Systemeinstellung vor. „Immer dunkel“ legt den Shop fest auf dunkel.

Mögliche Werte: Nach Systemeinstellung · Mit Umschalter in der Kopfzeile · Immer dunkel

Farbvorlage (Dunkelmodus) ifx-dark-preset

Auswahl · Standard: Passend zum Hellmodus

„Passend zum Hellmodus“ übernimmt das dunkle Gegenstück der oben gewählten Farbvorlage. Steht dort „Eigene Farben“, gelten die sieben Farbfelder darunter.

Warum das eine eigene Auswahl ist: Eine dunkle Palette ist keine Umrechnung der hellen. Ein Akzent, der auf Weiß trägt, ist auf Schwarz meist zu dunkel, und die Flächen brauchen dort drei eng beieinanderliegende Stufen statt zweier weit auseinanderliegender. Jede Vorlage ist deshalb zweimal gestaltet – und deshalb können Sie hier auch bewusst mischen, etwa ein warmes helles Bild mit einem neutralen dunklen.

Auch hier gilt: Die Vorlage setzt genau die sieben Farben darunter, nicht mehr. Kopfzeile, Fußzeile, Kacheln und Preis leitet das Theme daraus ab – bei einer Vorlage auf demselben Weg wie bei eigenen Farben.

Ohne freigeschalteten Dunkelmodus hat die Auswahl keine Wirkung.

Mögliche Werte: Passend zum Hellmodus · Eigene Farben (Felder unten) · Kühl & technisch – Blau auf Nachtblau · Warm & ruhig – Kupfer auf Espresso · Kontrast – Signalfarbe auf Schwarz

Seitenhintergrund (dunkel) ifx-dark-bg

Farbe · Standard: #0f1319

Seitenhintergrund im Dunkelmodus. Der Fußbereich übernimmt ihn, und auf akzentfarbigen Knöpfen steht die Schrift in diesem Ton.

Wirkt nur mit freigeschaltetem Dunkelmodus und wenn die „Farbvorlage (Dunkelmodus)“ auf „Eigene Farben“ steht – oder auf „Passend zum Hellmodus“, solange die helle Vorlage „Eigene Farben“ ist.

Fläche (dunkel) ifx-dark-surface

Farbe · Standard: #171c24

Kacheln, Kopfzeile, Karten. Bewusst etwas heller als der Seitenhintergrund – auf dunklem Grund entsteht Tiefe durch Helligkeit, nicht durch Schatten.

Abgesetzte Fläche (dunkel) ifx-dark-surface-alt

Farbe · Standard: #1f252f

Abgesetzte Flächen im Dunkelmodus – Filter, Warenkorb-Summen, CMS-Karten – und zugleich Eingabefelder, Aufklappmenüs und Dialoge. Eine Stufe heller als „Fläche (dunkel)“, damit die Ebenen unterscheidbar bleiben.

Text (dunkel) ifx-dark-text

Farbe · Standard: #e7eaee

Bewusst kein reines Weiß: Weiß auf sehr dunklem Grund erzeugt einen harten Halo-Effekt und ermüdet beim Lesen längerer Texte.

Sekundärtext (dunkel) ifx-dark-text-muted

Farbe · Standard: #9aa4b2

Hilfstexte, Lieferzeiten und Grundpreise im Dunkelmodus, dazu die Schrift im Fußbereich. Auch dieser Ton braucht 4,5:1 Kontrast zum Hintergrund.

Rahmen (dunkel) ifx-dark-border

Farbe · Standard: #2a313c

Rahmen und Trennlinien im Dunkelmodus – an Eingabefeldern, Kacheln, Karten und Tabellen.

Akzent (dunkel) ifx-dark-accent

Farbe · Standard: #7fb2ff

Die helle Akzentfarbe aus dem Tagmodus wird auf dunklem Grund oft zu kontrastarm. Dieser Wert ersetzt sie im Dunkelmodus samt der davon abgeleiteten Flächen für Hover und Fokus.

Werte aus der Vorschau

Eingefügte Werte ifx-apply-values

Text · Standard: leer

Hier den Block einfügen, den die Design-Vorschau über „Werte kopieren“ liefert – speichern genügt, die Werte gelten danach für alle Besucher.

Gedacht als Abkürzung: statt zwanzig Felder von Hand nachzuziehen, einmal einfügen. Die Werte in den einzelnen Feldern darunter bleiben unberührt und werden von den hier eingefügten überstimmt – wer einen Wert dauerhaft festhalten will, trägt ihn besser in sein eigenes Feld ein und löscht ihn hier.

Leer lassen heißt: es entsteht kein einziges zusätzliches Byte im Quelltext. Nur ein befülltes Feld erzeugt überhaupt Ausgabe.

Nicht übertragbar sind die reinen Ein/Aus-Schalter (etwa Sticky-Header oder Dunkelmodus): deren CSS entsteht bei „aus“ gar nicht erst und lässt sich nachträglich nicht einschalten. Solche Felder bietet die Vorschau deshalb auch nicht an.

Design-Vorschau freischalten ifx-preview-panel

Schalter · Standard: aus

Blendet ein Bedienfeld in der Storefront ein, mit dem sich Farben, Rundungen, Abstände und Kachel-Varianten SOFORT ändern lassen – ohne Speichern und ohne Neukompilieren. Am Ende zeigt es die geänderten Werte zum Übertragen in diese Konfiguration.

Das Panel erscheint zusätzlich nur, wenn die Adresse den Parameter ?ifx-preview=1 enthält. Beide Bedingungen zusammen verhindern, dass Kunden es je zu sehen bekommen. Für den Live-Betrieb trotzdem wieder ausschalten.

Nicht vorschaubar sind die reinen Ein/Aus-Schalter (z. B. Sticky-Header): deren CSS entsteht bei „aus" gar nicht erst – genau das hält das Stylesheet klein.

Darstellung

Rundung der Bildfläche ifx-card-media-radius

Auswahl · Standard: Wie die Kachel

„Wie die Kachel“ lässt alles wie bisher. „Eigenständig gerundet“ legt den Radius auf das PRODUKTBILD statt auf die Kachel. Zusammen mit Kachelstil „Schlicht“ ergibt das die rahmenlose Variante: kein Kasten, nur ein abgerundetes Bild mit Text darunter – sehr aufgeräumt, und die Produkte tragen die Fläche selbst.

Mögliche Werte: Wie die Kachel · Eigenständig gerundet

2.2 Layout

5 Einstellungen in diesem Reiter

Raster & Abstände

Maximale Inhaltsbreite (px) ifx-container-width

Zahl · Standard: 1400

Shopware-Standard sind 1300px. Größere Werte nutzen breite Monitore besser aus, erschweren aber das Lesen langer Textzeilen.

Seitenabstand (px) ifx-gutter

Zahl · Standard: 24

Abstand zwischen Inhalt und Bildschirmrand. Auf Mobilgeräten wird automatisch der kleinere Wert 16px genutzt, wenn hier mehr eingestellt ist.

Vertikaler Abstand zwischen Abschnitten ifx-section-spacing

Auswahl · Standard: Normal

Abstand zwischen den Abschnitten einer Erlebniswelt, dazu die Luft über dem Fußbereich. Auf dem Handy: Kompakt 32, Normal 48, Luftig 64 Pixel; ab 992 Pixel Breite: 48, 72 und 104 Pixel.

Mögliche Werte: Kompakt · Normal · Luftig

Produktraster

Produkte pro Zeile – Desktop ifx-listing-columns-desktop

Auswahl · Standard: 4

Greift auf Kategorieseiten und in Produkt-Slidern ab 1200px Breite.

Mögliche Werte: 3 · 4 · 5 · 6

Produkte pro Zeile – Mobil ifx-listing-columns-mobile

Auswahl · Standard: 2

Zwei Spalten zeigen mehr Produkte ohne Scrollen, eine Spalte zeigt größere Bilder. Zwei Spalten konvertieren in den meisten Shops besser.

Mögliche Werte: 1 · 2

2.3 Typografie

7 Einstellungen in diesem Reiter

Grundeinstellungen

Basis-Schriftgröße mobil (px) ifx-font-size-base

Zahl · Standard: 16

Unter 16px zoomen iOS-Browser beim Fokussieren von Eingabefeldern automatisch hinein – 16px ist deshalb das empfohlene Minimum.

Basis-Schriftgröße Desktop (px) ifx-font-size-base-max

Zahl · Standard: 17

Zwischen mobil und Desktop wird stufenlos interpoliert (CSS clamp), es gibt also keine Sprünge beim Skalieren des Fensters.

Zeilenhöhe Fließtext ifx-line-height

Auswahl · Standard: Normal (1,6)

Zeilenabstand im Fließtext der ganzen Storefront. „Normal“ (1,6) passt zu den meisten Schriften. „Locker“ erleichtert lange Texte, „Eng“ passt zu dichten Seiten mit wenig Fließtext.

Mögliche Werte: Eng (1,45) · Normal (1,6) · Locker (1,75)

Schriftquelle ifx-font-stack

Auswahl · Standard: Theme-Schrift

"Systemschriften" nutzt die auf dem Gerät vorhandene Oberflächenschrift. Das spart den kompletten Webfont-Download (typisch 40–120 KB) und eliminiert jedes Textflackern beim Laden – der schnellste mögliche Wert. "Theme-Schrift" nutzt die im Tab "Schriftarten" eingestellte Schrift. "Serifen-Überschriften" kombiniert eine Serifenschrift für Überschriften mit Systemschrift im Fließtext – der ruhige, redaktionelle Look bekannter Boutique-Themes, aber ohne einen einzigen Webfont-Download. "Mitgelieferte Schriften" nutzt Playfair Display für Überschriften und Rubik für den Fließtext. Beide liegen als Variable Font im Theme (zusammen rund 73 KB) und werden vom eigenen Server ausgeliefert – kein Google-Fonts-Aufruf, keine Übertragung der Besucher-IP in die USA.

Mögliche Werte: Theme-Schrift · Systemschriften (schnellste Option) · Serifen-Überschriften (redaktionell) · Mitgelieferte Schriften (Playfair Display + Rubik)

Überschriften

Überschriften-Skalierung ifx-type-scale

Auswahl · Standard: Ausgewogen

Bestimmt, wie stark H1 bis H6 auseinanderliegen. "Ausdrucksstark" erzeugt große, plakative Titel – gut für Landingpages, unruhig bei textlastigen Seiten.

Mögliche Werte: Kompakt · Ausgewogen · Ausdrucksstark

Schriftstärke Überschriften ifx-heading-weight

Auswahl · Standard: 700 – Bold

Nur Stärken wählen, die die eingestellte Schrift wirklich mitbringt – sonst rechnet der Browser eine unsaubere Kunstfettung.

Mögliche Werte: 400 – Normal (Serif-Look) · 500 – Medium · 600 – Semibold · 700 – Bold · 800 – Extrabold

Laufweite Überschriften ifx-heading-tracking

Auswahl · Standard: Eng

Buchstabenabstand in Überschriften. „Eng“ rückt die Buchstaben um 2 % der Schriftgröße zusammen – große Überschriften wirken dadurch geschlossener. „Normal“ lässt die Schrift unverändert, „Weit“ gibt 1 % hinzu.

Mögliche Werte: Eng · Normal · Weit

33 Einstellungen in diesem Reiter

Header

Header-Variante ifx-header-mode

Auswahl · Standard: Automatisch (empfohlen)

"Automatisch" ist die sichere Voreinstellung: erkennt das Theme ein aktives PVS fancy Navbar Plugin, hält es sich beim Header komplett zurück und überlässt ihm das Feld. Sonst greift der Theme-Header. "Shopware-Original" schaltet den Theme-Header ganz ab.

Mögliche Werte: Automatisch (empfohlen) · Immer Theme-Header · Shopware-Original

Header beim Scrollen mitführen ifx-header-sticky

Schalter · Standard: an

Die Kopfzeile bleibt beim Scrollen am oberen Rand stehen und bekommt dabei einen Schatten. Ausgeschaltet scrollt sie mit der Seite weg, und das zugehörige CSS entsteht gar nicht erst.

Voraussetzung für „Header beim Scrollen verkleinern“, „Top-Bar beim Scrollen einklappen“ und den Milchglas-Effekt.

Header beim Scrollen verkleinern ifx-header-shrink

Schalter · Standard: an

Gibt auf kleinen Bildschirmen sichtbaren Inhalt zurück. Wirkt nur, wenn der Header mitgeführt wird.

Milchglas-Effekt im Header ifx-header-blur

Schalter · Standard: aus

Optisch attraktiv, kostet aber auf schwächeren Mobilgeräten spürbar Scroll-Performance (backdrop-filter zwingt den Browser zu ständiger Neuberechnung). Im Zweifel aus lassen.

Funkenflug am Logo ifx-header-sparks

Auswahl · Standard: Aus

Beim Überfahren des Logos stiebt eine Spur kleiner Funken hinter dem Inhalt weg – hinter dem Logo, nicht davor. Davor wäre es Konfetti, dahinter ist es Atmosphäre.

Ausgelöst wird ausschließlich über dem Logo. Über die volle Breite der Kopfzeile gezogen war der Effekt allgegenwärtig: jede Bewegung zur Suche, zum Konto oder zum Warenkorb hat gefunkt – und was überall passiert, fällt nirgends auf. Die Funkenschicht bleibt aber so groß wie die Kopfzeile, damit die Wurfbahnen nicht an der Logokante enden.

„In der Akzentfarbe“ hält den Effekt an das Farbbild des Shops gebunden. „Warm“ liegt näher an einem echten Funken und passt zu Häusern, deren Sortiment mit Energie, Werkstatt oder Feuer zu tun hat.

Der Effekt erscheint nur dort, wo es einen echten Mauszeiger gibt: auf einem Touchgerät gibt es kein Überfahren, und ein Funkenschauer beim Antippen des Warenkorbs wäre Unsinn. Wer in seinem System „Bewegung reduzieren“ eingestellt hat, bekommt ihn ebenfalls nicht zu sehen.

Ausgeschaltet entsteht weder CSS noch JavaScript – die Einstellung kostet dann buchstäblich nichts.

Mögliche Werte: Aus · In der Akzentfarbe · Warm (wie echte Funken)

Header-Hintergrund ifx-header-bg

Farbe · Standard: #ffffff

Hintergrund der Kopfzeile. Mit Milchglas-Effekt wird er zu 82 % deckend, damit der Inhalt darunter durchscheint. Im Dunkelmodus gilt stattdessen „Fläche (dunkel)“.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Header-Textfarbe ifx-header-text

Farbe · Standard: #12161c

Farbe von Schrift und Symbolen in der Kopfzeile. Braucht zum Header-Hintergrund mindestens 4,5:1 Kontrast (WCAG AA). Im Dunkelmodus gilt „Text (dunkel)“.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Header-Höhe (px) ifx-header-height

Zahl · Standard: 76

Mindesthöhe der Kopfzeile, solange nicht gescrollt wird. Ein höheres Logo lässt sie mitwachsen. Steht die Logo-Höhe auf 0 (automatisch), richtet sich das Logo nach diesem Wert.

Header-Höhe beim Scrollen (px) ifx-header-height-sticky

Zahl · Standard: 60

Mindesthöhe der Kopfzeile nach dem Verkleinern. Wirkt nur, wenn „Header beim Scrollen verkleinern“ eingeschaltet ist.

Logo-Höhe (px) ifx-logo-height

Zahl · Standard: 0

Höhe des Logos in der Kopfzeile, solange nicht gescrollt wird.

0 bedeutet automatisch: dann ergibt sie sich aus der Kopfzeilenhöhe, abzüglich einer Zeile Luft über und unter dem Logo. Bei 60px Kopfzeile sind das 36px Logo.

Ein größerer Wert als die Kopfzeile verträgt ist erlaubt – die Kopfzeile wächst dann mit, denn ihre Höhe ist eine Untergrenze und kein fester Wert. Nur so weit gehen, wie das Logo auch wirklich Platz hat: die Breite ergibt sich aus dem Seitenverhältnis, ein flaches, breites Logo wird also schnell sehr breit und nimmt der Suche den Raum.

Für den gescrollten Zustand gibt es das Feld darunter.

Logo-Höhe beim Scrollen (px) ifx-logo-height-sticky

Zahl · Standard: 36

Gilt nur, wenn „Header beim Scrollen verkleinern“ eingeschaltet ist.

Vorher war die Logo-Höhe fest an die geschrumpfte Header-Höhe gekoppelt. Bei einem breiten Logo ist das oft zu groß: es bestimmt dann die Höhe der Zeile, und das Verkleinern bringt kaum etwas. Hier lässt sich beides unabhängig einstellen.

Der Wert ist eine Obergrenze – ein kleineres Logo wird nicht hochskaliert.

Logo für den Dunkelmodus ifx-logo-dark

Bild · Standard: leer

Optional. Bleibt das Feld leer, wird im Dunkelmodus dasselbe Logo verwendet wie sonst – daran ändert sich nichts.

Wann es sich lohnt: Ein SVG-Logo kann seine Farbe über @media (prefers-color-scheme) selbst umschalten. Das funktioniert in aktuellen Browsern auch mit dem Umschalter dieses Themes, weil das Theme sein Farbschema ausdrücklich benennt. Ältere Safari-Versionen (bis iPadOS 17) reichen diese Angabe jedoch nicht an eingebettete SVG-Dateien weiter – dort richtet sich ein solches Logo immer nach dem Gerät und steht im ungünstigen Fall weiß auf weiß.

Mit einer zweiten Datei ist das ausgeschlossen. Dafür sollten BEIDE Dateien einfarbig sein, also ohne eingebaute Media Query: die helle Fassung im Logo-Feld von Shopware, die dunkle hier.

Das Bild wird nur geladen, wenn der Dunkelmodus tatsächlich aktiv ist.

Suche hervorheben ifx-search-prominent

Schalter · Standard: an

Gibt der Suche im Header deutlich mehr Breite und einen sichtbaren Rahmen. Nutzer, die suchen statt zu stöbern, konvertieren typischerweise deutlich besser – die Suche zu verstecken kostet Umsatz.

Mobile Aktionsleiste am unteren Rand ifx-mobile-appbar

Schalter · Standard: an

Blendet auf Smartphones eine feste Leiste mit Menü, Suche, Konto und Warenkorb am Daumenrand ein.

Seiten ohne Suche, Konto und Warenkorb ifx-shop-hide-pages

Text · Standard: leer

Auf den hier eingetragenen Seiten zeigt der Kopfbereich weder Suche noch Konto noch Warenkorb – etwa auf der Startseite eines Unternehmens, dessen Shop nur ein Teil des Auftritts ist. Mit ausgeblendet werden „Anmelden oder Registrieren“ in der oberen Leiste, ein eingeschalteter Merkzettel und die passenden Punkte der mobilen Aktionsleiste. Logo und Menü bleiben, die Navigationsleiste unter dem Kopf entfällt. Wie der Kopf dann aufgebaut ist, legt „Kopf auf diesen Seiten“ fest; die obere Leiste lässt sich mit der Einstellung darunter ebenfalls ausblenden.

Eine Adresse je Zeile, so wie sie im Browser steht – mit oder ohne Domain:

/
/Unternehmen/
/Informationen/*

/ ist die Startseite. Ein * am Ende erfasst die Seite und alles darunter. Groß- und Kleinschreibung und der Schrägstrich am Ende spielen keine Rolle.

Warenkorb, Kasse und Kundenkonto zeigen die Elemente immer, auch wenn eine Zeile sie erfassen würde – ohne sie kämen Kunden dort nicht weiter.

Leer lassen heißt: überall sichtbar.

Kopf auf diesen Seiten ifx-shop-hide-header

Auswahl · Standard: Logo links, Navigation daneben

Wie der Kopf auf den Seiten aus „Seiten ohne Suche, Konto und Warenkorb“ aufgebaut ist.

„Logo links, Navigation daneben“: Ab Desktop-Breite stehen die Menüpunkte rechts neben dem Logo, darunter öffnet das Menü-Symbol das Menü.

„Logo in der Mitte“: Links steht das Menü-Symbol, das die Navigation seitlich aufklappt, in der Mitte das Logo und ab 1200 Pixel Breite rechts die Menüpunkte in etwas kleinerer Schrift. Darunter reicht der Platz neben einem mittigen Logo nicht für die Menüpunkte; es bleibt beim Symbol. Passt zu einer Startseite, die selbst Einstiege anbietet, etwa mit Kacheln (Klasse ifx-tiles, siehe Handbuch).

Wirkt nur mit dem Header des Themes (siehe „Header-Variante“).

Mögliche Werte: Logo links, Navigation daneben · Logo in der Mitte, Menü-Symbol links

Auf diesen Seiten auch die Top-Bar ausblenden ifx-shop-hide-topbar

Schalter · Standard: aus

Blendet auf den Seiten aus „Seiten ohne Suche, Konto und Warenkorb“ zusätzlich die schmale Leiste über der Kopfzeile aus. Die Seite beginnt dann direkt mit Logo und Menü – passend etwa für die Startseite eines Unternehmens.

Was in der Leiste steht, fehlt auf diesen Seiten: USPs, Service-Menü, Sprach- und Währungsanzeige und der Hell/Dunkel-Umschalter. Die Service-Links bleiben über den Seitenfuß und das mobile Menü erreichbar; für die Sprach- und Währungswahl und den Umschalter gibt es dort keinen Ersatz.

Solange die Liste darüber leer ist, wirkt die Einstellung nirgends.

Kontakt in der Kopfzeile der Kasse ifx-checkout-contact

Text · Standard: leer

Die schmale Kopfzeile im Bestellvorgang zeigt eine Kontaktangabe. Shopware liefert dort einen Platzhalter aus: „Fragen zu Ihrer Bestellung? 12345-123456789, Täglich 7:30 bis 22:00 Uhr“. Diese Nummer gibt es nicht.

Format wie bei den Service-Links: Überschrift|Kontakt|Zusatz, zum Beispiel
Fragen zu Ihrer Bestellung?|info@example.de|Telefon +49 40 1234567

Der Kontakt in der Mitte wird verlinkt: mit @ als E-Mail, sonst als Telefonnummer.

Leer lassen heißt: Shopwares Fassung bleibt stehen — samt Platzhalter. Das ist Absicht; das Theme entfernt keine Angabe, die jemand möglicherweise bewusst so gesetzt hat.

Top-Bar & USPs

Top-Bar anzeigen ifx-topbar-enabled

Schalter · Standard: an

Die schmale Leiste über der Kopfzeile: USPs, Anmelden/Registrieren, Service-Menü, Sprache und Währung sowie der Hell/Dunkel-Umschalter. Sie erscheint nur, wenn sie etwas zu zeigen hat.

Ausgeschaltet gibt Shopware an dieser Stelle seine eigene Leiste aus, die nur die Sprach- und Währungswahl kennt. Alles andere aus der Top-Bar entfällt dann – auch der Umschalter für den Dunkelmodus.

Wirkt nur mit dem Header des Themes (siehe „Header-Variante“).

Höhe der Top-Bar (px) ifx-topbar-height

Zahl · Standard: 36

Höhe der schmalen Leiste über der Kopfzeile. Vorgabe 36 Pixel.

Normalerweise ist der Wert eine Untergrenze: passt der Inhalt nicht hinein, wächst die Leiste mit. Sobald „Top-Bar beim Scrollen einklappen“ eingeschaltet ist, wird daraus eine feste Höhe – anders lässt sich das Einklappen nicht überblenden. Wer dann mehr hineinschreibt, als hineinpasst, sieht es nicht.

Top-Bar beim Scrollen einklappen ifx-topbar-hide

Schalter · Standard: aus

Die Top-Bar liegt innerhalb der Kopfzeile und klebt deshalb mit. Was dort steht – Vorteile, Service, Sprache – ist beim ersten Blick nützlich und beim Weiterlesen nur noch Höhe. Eingeklappt rücken Logo, Suche und Warenkorb näher an den Inhalt.

Das Einklappen ist eine Überblendung, kein Sprung.

Zwei Hinweise: Ohne „Header beim Scrollen mitführen“ hat die Einstellung keine Wirkung – dann scrollt die Leiste ohnehin aus dem Bild. Und „Header beim Scrollen verkleinern“ klappt die Leiste ebenfalls ein, weil es inhaltlich dazugehört; diese Einstellung erlaubt es unabhängig davon.

Top-Bar Hintergrund ifx-topbar-bg

Farbe · Standard: #12161c

Hintergrund der Top-Bar. Im Dunkelmodus gilt „Fläche (dunkel)“.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Top-Bar Textfarbe ifx-topbar-text

Farbe · Standard: #f2f4f7

Schriftfarbe der Top-Bar. Braucht zum Top-Bar-Hintergrund mindestens 4,5:1 Kontrast. Im Dunkelmodus gilt „Text (dunkel)“.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

USP 1 ifx-usp-one

Text · Standard: leer

Leer lassen = übersetzbarer Standard aus den Snippets (innospark.theme.usp.one). Ein Wert hier überschreibt ALLE Sprachen.

USP 2 ifx-usp-two

Text · Standard: leer

Leer = übersetzbarer Standard (Snippets: innospark.theme.usp.two).

USP 3 ifx-usp-three

Text · Standard: leer

Leer = übersetzbarer Standard (Snippets: innospark.theme.usp.three).

Anmelden/Registrieren in der oberen Leiste ifx-topbar-account

Schalter · Standard: aus

Zeigt links in der oberen Leiste „Anmelden oder Registrieren“. Bei angemeldeten Kunden steht dort stattdessen der Vorname mit Link zum Konto.

Service-Menü in der oberen Leiste ifx-topbar-service

Text · Standard: leer

Zeigt rechts in der oberen Leiste einen Aufklapper „Service & Hilfe“. Eine Zeile je Eintrag, im Format:

Versand & Zahlung|/versand-und-zahlung
Kontakt|/kontakt

Leer lassen blendet den Aufklapper aus.

Warum von Hand statt automatisch aus dem Service-Menü: Shopware rendert die Kopfzeile als eigenen Unterrequest, dem ausschließlich Sprachen und Währungen mitgegeben werden. Das Service-Menü hängt am Seitenfuß und ist von dort prinzipbedingt nicht erreichbar. Drei bis vier gezielte Links sind an dieser Stelle ohnehin meist besser als die vollständige Liste aus dem Fuß.

Hinweis für Geschäftskunden ifx-b2b-link

Text · Standard: leer

Ein Verweis auf die Registrierung als Geschäftskunde. Er erscheint an ZWEI Stellen: oben in der Top-Bar neben Anmelden/Registrieren und unten im Fußbereich über den Spalten.

Format wie bei den Service-Links: Beschriftung|Adresse, zum Beispiel
Als Geschäftskunde registrieren|/Als-Geschaeftskunde-registrieren

Leer lassen heißt: nichts wird angezeigt — in einem reinen Privatkunden-Shop wäre der Hinweis nur Ballast.

In der Top-Bar erscheint er nur bei nicht angemeldeten Besuchern. Wer bereits angemeldet ist, hat die Entscheidung getroffen; ihm dort weiter eine Registrierung anzubieten, wirkt wie ein Fehler.

Im Fußbereich entfällt er für Kunden, die schon geschäftlich angemeldet sind: Kontotyp „Gewerblich“, ein beantragter Wechsel der Kundengruppe oder eine Kundengruppe mit eigener Registrierung.

Sprache und Währung immer anzeigen ifx-topbar-locale

Schalter · Standard: aus

NICHT gesetzt = Shopware-Automatik: die Umschalter erscheinen nur, wenn am Verkaufskanal wirklich mehr als eine Sprache bzw. Währung hängt. So verhält sich der Shop ohne dieses Theme auch.

Gesetzt: gibt es nichts zu wählen, zeigt die Leiste stattdessen an, WO man sich befindet – etwa „DE“ und „€ Euro“. Bewusst ohne Pfeil, denn ein Aufklapp-Pfeil verspricht eine Auswahl, die es nicht gibt.

Sobald eine zweite Sprache oder Währung am Kanal hängt, treten in beiden Fällen automatisch wieder Shopwares echte Umschalter an diese Stelle – die Anzeige verdoppelt sich also nie.

USPs laufen lassen ifx-usp-ticker

Schalter · Standard: aus

Lässt die Punkte in der oberen Leiste langsam von rechts nach links wandern und an beiden Rändern weich aus- und einblenden.

Sinnvoll vor allem, wenn mehr Punkte gepflegt sind, als nebeneinander passen – auf dem Handy ist das fast immer der Fall.

Beim Zeigen mit der Maus hält der Lauf an, damit man in Ruhe lesen kann. Verlangt das Betriebssystem reduzierte Bewegung oder stehen die Animationen des Themes auf „Aus“, bewegt sich nichts – die weichen Ränder bleiben.

Navigation

Navigationsstil (Desktop) ifx-nav-style

Auswahl · Standard: Mega-Menü

"Mega-Menü" zeigt beim Hover alle Unterkategorien einer Hauptkategorie mehrspaltig auf einmal – kürzester Weg zum Produkt bei tiefen Sortimenten. "Klassisch" behält das Shopware-Standardverhalten bei.

Mögliche Werte: Mega-Menü · Klassisch

Hauptnavigation in Großbuchstaben ifx-nav-uppercase

Schalter · Standard: aus

Nur für kurze Kategorienamen geeignet. Großbuchstaben sind messbar langsamer zu lesen, weil die Wortform als Erkennungsmerkmal verlorengeht.

2.5 Produktkacheln

15 Einstellungen in diesem Reiter

Darstellung

Produktkachel-Variante ifx-card-mode

Auswahl · Standard: Automatisch (empfohlen)

"Automatisch" erkennt ein aktives PVS fancy Product Card Plugin und hält sich dann zurück, damit sich beide Gestaltungen nicht überlagern.

Mögliche Werte: Automatisch (empfohlen) · Immer Theme-Kachel · Shopware-Original

Kachel-Stil ifx-card-style

Auswahl · Standard: Mit Rahmen

„Mit Rahmen“ zieht eine feine Linie in der Rahmenfarbe um die Kachel. „Mit Schatten“ ersetzt die Linie durch einen weichen Schatten (Stärke im Reiter Design, „Schattenintensität“). „Flach“ verzichtet auf beides – zusammen mit „Rundung der Bildfläche: Eigenständig gerundet“ ergibt das die rahmenlose Kachel.

Wirkt nur mit der Produktkachel des Themes (siehe „Produktkachel-Variante“).

Mögliche Werte: Flach (ohne Rahmen) · Mit Rahmen · Mit Schatten

Hover-Effekt ifx-card-hover

Auswahl · Standard: Anheben

Wird auf Touch-Geräten automatisch nicht angewendet, weil dort kein echter Hover existiert und der Effekt sonst nach dem Antippen hängenbleibt.

Mögliche Werte: Keiner · Anheben · Bild vergrößern

Bildformat ifx-card-ratio

Auswahl · Standard: Quadratisch (1:1)

Ein festes Format verhindert Layout-Sprünge beim Nachladen der Bilder (Core Web Vital "CLS"). "Original" behält die echten Bildmaße – nur sinnvoll, wenn alle Produktbilder bereits einheitlich zugeschnitten sind.

Mögliche Werte: Quadratisch (1:1) · Hochformat (3:4) · Querformat (4:3) · Original

Einpassung des Produktbildes ifx-card-image-fit

Auswahl · Standard: Einpassen (nichts abschneiden)

Was passiert, wenn das Produktbild nicht zum eingestellten Bildformat passt.

„Einpassen“ zeigt das Bild vollständig. Passt es nicht zum Format, bleibt oben und unten – oder links und rechts – Fläche sichtbar. Nichts wird abgeschnitten.

„Ausfüllen“ füllt die Kachel ganz aus. Dafür wird das Bild mittig beschnitten: was über den Rand hinausragt, ist nicht mehr zu sehen.

Welches richtig ist, hängt am Sortiment. Bei Mode, Möbeln oder Deko füllt „Ausfüllen“ ruhige, gleichmäßige Kachelreihen. Bei Technik und Ersatzteilen ist der angeschnittene Rand oft genau das Merkmal, an dem zwei Varianten auseinanderzuhalten sind – dort ist „Einpassen“ die sichere Wahl. Deshalb ist es auch die Vorgabe.

Wenn die Fläche neben eingepassten Bildern stört, gibt es noch einen dritten Weg: „Fläche hinter dem Produktbild“ auf „Transparent“ stellen. Dann nimmt sie die Kachelfarbe an, statt als grauer Kasten um das Motiv zu stehen.

Beim Bildformat „Original“ wirkt die Einstellung nicht – dort gibt es keinen festen Rahmen, den ein Bild ausfüllen könnte.

Mögliche Werte: Einpassen (nichts abschneiden) · Ausfüllen (mittig beschneiden)

Feste Höhe der Bildfläche (px) ifx-card-image-height

Zahl · Standard: 0

0 bedeutet automatisch: die Höhe ergibt sich aus dem eingestellten Bildformat. Das ist die Vorgabe und in aller Regel richtig.

Ein Wert größer als 0 setzt stattdessen eine feste Höhe in Pixeln – das Bildformat wird dann nicht mehr beachtet. Sinnvoll, wenn die Bildfläche unabhängig von der Spaltenbreite immer gleich hoch sein soll, etwa bei sehr breiten Kacheln.

Achtung: eine feste Höhe und ein Bildformat widersprechen sich. Wer beides setzt, bekommt die feste Höhe.

Kachel-Hintergrund ifx-card-bg

Farbe · Standard: #ffffff

Hintergrund der Produktkachel. Im Dunkelmodus gilt „Fläche (dunkel)“.

Wirkt nur mit der Produktkachel des Themes und solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Fläche hinter dem Produktbild ifx-card-image-mode

Auswahl · Standard: Wie abgesetzte Fläche

Produktbilder werden nicht beschnitten (object-fit: contain), deshalb bleibt neben hochformatigen oder quadratischen Bildern Fläche sichtbar. "Wie abgesetzte Fläche" nutzt den Farbton aus dem Tab Design – das ist das bisherige Verhalten. "Transparent" lässt die Kachelfarbe durchscheinen, ideal bei freigestellten Bildern auf weißem Grund. "Eigene Farbe" nutzt die Einstellung darunter.

Mögliche Werte: Wie abgesetzte Fläche · Transparent (Kachelfarbe) · Eigene Farbe

Eigene Farbe hinter dem Produktbild ifx-card-image-bg

Farbe · Standard: #f6f7f9

Wirkt nur, wenn darüber "Eigene Farbe" gewählt ist.

Inhalt

Maximale Zeilen für den Produktnamen ifx-card-name-lines

Zahl · Standard: 2

Begrenzt lange Namen auf eine feste Zeilenzahl, damit alle Kacheln einer Zeile gleich hoch bleiben. 0 = keine Begrenzung.

Abstände in der Kachel ifx-card-spacing

Auswahl · Standard: Normal

Wie viel Luft zwischen Bild, Name, Preis und Knopf steht.

„Kompakt“ rückt alles zusammen – mehr Produkte pro Bildschirm, dichter Eindruck. „Luftig“ gibt jedem Element Raum und wirkt hochwertiger, kostet dafür Höhe.

Die Einstellung ändert nur Abstände, keine Schriftgrößen. Wer die Kacheln insgesamt kleiner haben will, ist beim Bildformat oder bei der Spaltenzahl besser aufgehoben.

Mögliche Werte: Kompakt · Normal · Luftig

Platz für Bewertungssterne reservieren ifx-card-rating-space

Auswahl · Standard: Automatisch (empfohlen)

Shopware hält in jeder Produktkachel Platz für Bewertungssterne frei – auch bei Produkten, die das gar nicht haben. Das ist nicht sinnlos: haben in einer Zeile manche Kacheln Bewertungssterne und andere nicht, halten die leeren Felder Name und Preis auf gleicher Höhe.

„Automatisch“ trifft die Unterscheidung selbst: der Platz bleibt nur dann stehen, wenn ihn mindestens ein Produkt der Liste tatsächlich braucht. Braucht ihn keines, fällt er überall weg – gemessen spart das rund 35 Pixel Höhe je Kachel.

„Immer“ hält den Platz unabhängig davon frei. Sinnvoll, wenn über mehrere Seiten hinweg alle Kacheln exakt gleich hoch sein sollen.

„Nie“ lässt leere Felder immer wegfallen. Das ergibt die kompaktesten Kacheln. Der Preis dafür: hat ein Produkt der Zeile den Inhalt und ein anderes nicht, stehen Name und Preis der beiden nicht mehr auf gleicher Höhe. Die Kacheln selbst bleiben gleich hoch – das Raster gleicht sie an –, verschoben ist nur, was darin steht.

Mögliche Werte: Automatisch (empfohlen) · Immer · Nie

Platz für den „ab …“-Preis reservieren ifx-card-price-space

Auswahl · Standard: Automatisch (empfohlen)

Shopware hält in jeder Produktkachel Platz für den „ab …“-Preis frei – auch bei Produkten, die das gar nicht haben. Das ist nicht sinnlos: haben in einer Zeile manche Kacheln den „ab …“-Preis und andere nicht, halten die leeren Felder Name und Preis auf gleicher Höhe.

„Immer“ hält den Platz unabhängig davon frei. Sinnvoll, wenn über mehrere Seiten hinweg alle Kacheln exakt gleich hoch sein sollen.

Mögliche Werte: Automatisch (empfohlen) · Immer · Nie

Zweitbild beim Hover zeigen ifx-card-secondary-image

Schalter · Standard: an

Zeigt beim Überfahren einer Kachel das zweite Bild des Produkts, sofern eines gepflegt ist. Es lädt verzögert im Hintergrund und ist beim Überfahren schon da. Nur bei echtem Mauszeiger – auf Touchgeräten bleibt das erste Bild stehen.

Ausgeschaltet entsteht weder das zweite Bild im Markup noch das CSS dafür.

Wirkt nur mit der Produktkachel des Themes (siehe „Produktkachel-Variante“).

Lieferhinweise ifx-delivery-style

Auswahl · Standard: Schlicht

"Schlicht" zeigt Verfügbarkeit und Versandhinweis als Fließtext, "Plakette" setzt sie als abgesetzte Fläche mit farbigem Statuspunkt.

Mögliche Werte: Schlicht · Plakette

7 Einstellungen in diesem Reiter

Footer

Footer-Hintergrund ifx-footer-bg

Farbe · Standard: #12161c

Hintergrund des Fußbereichs. Ist er dunkel, erscheinen Links darin in der Akzentfarbe des Dunkelmodus – die helle Akzentfarbe wäre dort zu kontrastarm. Im Dunkelmodus gilt „Seitenhintergrund (dunkel)“.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Footer-Textfarbe ifx-footer-text

Farbe · Standard: #c7ccd4

Schriftfarbe im Fußbereich. Nebentexte und Trennlinien leitet das Theme daraus ab (72 % bzw. 16 % Deckkraft). Im Dunkelmodus gilt „Sekundärtext (dunkel)“.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Footer-Überschriftenfarbe ifx-footer-heading

Farbe · Standard: #ffffff

Farbe der Spaltenüberschriften im Fußbereich und des Firmennamens im Absender-Block. Im Dunkelmodus gilt „Text (dunkel)“.

Wirkt nur, solange die „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ steht.

Claim unter dem Logo ifx-footer-claim

Text · Standard: leer

Leer = übersetzbarer Standard (Snippets: innospark.theme.footer.claim).

Preishinweis im Fußbereich ifx-footer-price-note

Auswahl · Standard: Standard (mit Versandkosten)

Die Zeile unten im Fußbereich, die über Steuer und Versandkosten informiert.

„Standard“ übernimmt den Text von Shopware: „Alle Preise inkl. gesetzl. Mehrwertsteuer zzgl. Versandkosten und ggf. Nachnahmegebühren.“ Richtig für einen Shop, der Ware verschickt.

„Digitaler Shop“ ersetzt ihn durch einen Hinweis ohne Versand und ohne Nachnahme. Für einen Shop, der ausschließlich Downloads verkauft, ist der Standardtext nicht nur überflüssig, sondern irreführend.

„Aus“ blendet die Zeile ganz aus. Vorsicht: Die Angabe, ob Preise die Umsatzsteuer enthalten, ist gegenüber Verbrauchern vorgeschrieben (§ 3 PAngV). Wer sie hier abschaltet, muss sie an anderer Stelle machen.

Mögliche Werte: Standard (mit Versandkosten) · Digitaler Shop (ohne Versand) · Aus

Hinweis zu KI-generierten Inhalten ifx-footer-ai-note

Text · Standard: leer

Erscheint als kleingedruckter Absatz ganz unten im Fußbereich, unter dem Preishinweis.

Leer lassen heißt: nichts wird angezeigt. Der Hinweis ist bewusst nicht voreingestellt — ob er zutrifft, hängt davon ab, welche Bilder auf der jeweiligen Storefront liegen, und das weiß nur, wer sie eingestellt hat.

Steht hier Text, wird der erste Satz bis zum Doppelpunkt hervorgehoben. Aus „Hinweis zu KI-generierten Inhalten: Einzelne Bilder …“ wird also eine fette Überschrift und ein normaler Satz dahinter.

Footer-Spalten auf Mobil einklappen ifx-footer-collapse-mobile

Schalter · Standard: an

Shopware macht das standardmäßig bereits. Ausschalten zeigt alle Links dauerhaft offen – längere Seite, aber jeder Link direkt erreichbar und indexierbar.

2.7 Performance

5 Einstellungen in diesem Reiter

Bilder & Ladeverhalten

Bilder verzögert laden ifx-lazy-images

Schalter · Standard: an

Bilder außerhalb des sichtbaren Bereichs werden erst geladen, wenn der Nutzer sie erreicht. Spart auf langen Kategorieseiten oft mehrere Megabyte.

Nicht sichtbare Abschnitte vom Rendern ausnehmen ifx-content-visibility

Schalter · Standard: an

Der Browser überspringt das Layouten von Abschnitten weit unterhalb des Sichtbereichs (CSS content-visibility). Spürbar bei sehr langen CMS-Seiten. Bei Problemen mit der Seitensuche (Strg+F) abschalten.

Verbindungen vorab aufbauen ifx-preconnect

Text · Standard: leer

Kommagetrennte Domains, zu denen die Verbindung schon während des Seitenaufbaus aufgebaut wird, z. B. https://cdn.example.com. Nur für Domains eintragen, von denen wirklich früh Dateien geladen werden – jeder überflüssige Eintrag kostet stattdessen Bandbreite.

Animationen

Animationen ifx-animations

Auswahl · Standard: Dezent

Wie lange Übergänge dauern – beim Überfahren, Aufklappen und Einblenden. „Dezent“ nutzt kurze Zeiten (120 bis 320 ms), „Vollständig“ längere (160 bis 450 ms); die Bewegung wird dadurch deutlicher. „Aus“ schaltet die Übergänge praktisch ab und hält auch das Laufband der USPs an.

Unabhängig davon bekommt niemand Animationen, der im Betriebssystem „Bewegung reduzieren“ eingestellt hat – solange die Einstellung dazu im Reiter Performance aktiv ist.

Mögliche Werte: Aus · Dezent · Vollständig

Systemeinstellung "Bewegung reduzieren" beachten ifx-respect-reduced-motion

Schalter · Standard: an

Nutzer, die in ihrem Betriebssystem reduzierte Bewegung eingestellt haben, bekommen keine Animationen. Für manche Menschen lösen Bewegungen echte Übelkeit oder Schwindel aus – bitte aktiviert lassen.

2.8 SEO & Barrierefreiheit

3 Einstellungen in diesem Reiter

Strukturierte Daten

Offizielle Profil-Links (sameAs) ifx-org-same-as

Text · Standard: leer

Kommagetrennte, vollständige URLs zu offiziellen Profilen (Social Media, Wikipedia, Unternehmensregister). Hilft Google, den Shop eindeutig einer Marke zuzuordnen – Grundlage fürs Knowledge Panel. Shopware gibt Name und Logo bereits selbst als Organization-Daten aus; dieses Feld ERGÄNZT sie nur um die Profil-Links, es erzeugt keinen zweiten Datensatz. Nur eintragen, was dem Shopbetreiber wirklich gehört: fremde Profile hier zu verlinken schadet der Zuordnung.

Barrierefreiheit

Deutlich sichtbarer Fokusrahmen ifx-focus-visible

Schalter · Standard: an

Zeichnet bei Tastaturbedienung einen kräftigen Rahmen um das aktive Element. Für Mausnutzer unsichtbar. Bitte nicht abschalten – ohne Fokusrahmen ist der Shop per Tastatur praktisch unbedienbar.

Mindestgröße für Bedienelemente erzwingen ifx-touch-targets

Schalter · Standard: an

Hebt Buttons, Links und Icons auf mindestens 44x44px an. Das ist die von WCAG und Apple empfohlene Mindestgröße für zuverlässiges Treffen mit dem Finger.

2.9 Produktseite

13 Einstellungen in diesem Reiter

Beschreibung & Bewertungen

Reiter auf der Produktseite ifx-tab-style

Auswahl · Standard: Unterstrich

"Unterstrich" markiert den aktiven Reiter mit einer Linie, "Fläche" hinterlegt ihn mit der Hervorhebungsfarbe.

Mögliche Werte: Unterstrich · Fläche

Kurzbeschreibung anzeigen ifx-detail-teaser

Auswahl · Standard: Aus

Zeigt die META-BESCHREIBUNG des Artikels auf der Produktseite. Shopware nutzt sie dort von sich aus nicht – sie geht ausschließlich an Suchmaschinen. Dabei ist genau dieser Satz meist die beste Kurzfassung, die zu einem Artikel existiert.

„Unter dem Namen“ stellt sie über die volle Breite unter die Überschrift. „Im Kaufbereich“ stellt sie stattdessen in die rechte Spalte direkt über den Preis – schmaler, dafür im Blickfeld dessen, der schon kaufen will. Auf vier Zeilen begrenzt, damit eine lange Beschreibung den Preis nicht aus dem Bild schiebt.

Beides gleichzeitig gibt es bewusst nicht: derselbe Text zweimal auf einer Seite liest sich wie ein Fehler.

Ohne gepflegte Meta-Beschreibung erscheint nichts. Die Angabe im Seitenkopf bleibt in jedem Fall unverändert.

Mögliche Werte: Aus · Unter dem Namen · Im Kaufbereich

Beschreibung und Bewertungen ifx-detail-tabs

Auswahl · Standard: Reiter

„Reiter“ ist Shopwares Darstellung: eine Leiste mit Beschreibung, Bewertungen und weiteren Bereichen, von denen immer einer sichtbar ist.

„Aufklappbereiche“ stellt dieselben Bereiche untereinander als Akkordeon dar. Die Bewertungen stehen dabei oben und sind zugeklappt, die Beschreibung darunter und offen. Beim Öffnen eines Bereichs schließt sich der andere – das ist keine zusätzliche Mechanik, sondern genau das Verhalten der Reiter, nur anders dargestellt.

Wofür das gut ist: Auf schmalen Schirmen ist eine Reiterleiste mit drei oder mehr Einträgen unhandlich, und ein zugeklappter Bereich verrät durch seine Überschrift trotzdem, dass es ihn gibt. Wer Bewertungen bewusst nach oben holen will, findet sie hier ohne Umweg.

Ohne JavaScript bleibt es bei den Reitern.

Mögliche Werte: Reiter · Aufklappbereiche (Bewertungen zuerst)

Sternebewertung im Kaufbereich ifx-detail-rating

Auswahl · Standard: Shopware-Position

Shopware stellt die Durchschnittsbewertung zwischen Steuerhinweis und Lieferzeit – also mitten in den Pflichtangaben.

„Ganz oben“ zieht sie an den Anfang des Kaufbereichs, direkt unter den Produktnamen. Dort wird sie beim ersten Blick miterfasst, statt beim Lesen der Preisangaben aufzutauchen.

Ohne Bewertungen ändert sich nichts – dann gibt es nichts zu verschieben.

Mögliche Werte: Shopware-Position · Ganz oben

Kaufbereich

Im Kaufpreis enthalten (Warenkorb) ifx-cart-included

Text · Standard: leer

Ein Kasten direkt unter der Artikelliste im Warenkorb, der zeigt, was ohne Aufpreis dazugehört — etwa ein Update-Plan.

Format: Titel|Beschreibung|Wert, zum Beispiel
Update-Plan|Alle Software-Produkte in Ihrem Warenkorb enthalten Aktualisierungen für zwölf Monate.|

Leer lassen heißt: nichts wird angezeigt.

Zum dritten Teil, dem Wert: Er erscheint durchgestrichen neben dem Wort „inklusive“ und ist bewusst nicht vorbelegt. Ein Streichpreis darf nur stehen, wenn es die Leistung tatsächlich zu diesem Preis einzeln zu kaufen gibt. Solange es keinen separat erhältlichen Update-Plan gibt, wäre die Zahl erfunden — und ein erfundener Streichpreis ist eine irreführende Werbeangabe.

Preis auf der Produktseite ifx-price-style

Auswahl · Standard: Kasten

„Kasten“ hinterlegt den Preis mit der abgesetzten Fläche – er fällt sofort ins Auge, wirkt aber schwer.

„Frei“ stellt ihn ohne Hintergrund groß und fett dar. Das ist die ruhigere Variante: der Preis trägt sich über Größe und Gewicht statt über eine Fläche, und die Spalte wirkt aufgeräumter.

Mögliche Werte: Kasten · Frei

Kaufbereich ifx-buy-layout

Auswahl · Standard: Nebeneinander

„Nebeneinander“ ist Shopwares Aufteilung: Mengenwahl links, Knopf rechts daneben. Der Knopf bekommt dabei nur zwei Drittel der Breite.

„Untereinander“ stellt die Mengenwahl über den Knopf und gibt dem Knopf die volle Breite. Der Kaufen-Knopf ist das wichtigste Bedienelement der Seite – auf schmalen Spalten gewinnt er dadurch spürbar an Gewicht.

Mögliche Werte: Nebeneinander · Untereinander

Mobile Kaufleiste ifx-buybar

Auswahl · Standard: Oben unter der Kopfzeile

Eine schmale Leiste mit Preis und Kaufen-Knopf, die auf dem Handy erscheint, sobald der echte Kaufbereich weit nach oben herausgescrollt ist.

„Oben unter der Kopfzeile“ ist die Voreinstellung. Die Leiste sitzt dort ungefähr an derselben Stelle wie der Kaufbereich vorher, und beim Halten des Geräts liegt kein Daumen darauf.

„Am unteren Rand“ ist das aus Apps bekannte Muster. Zu beachten: Ist zusätzlich die mobile Aktionsleiste eingeschaltet, stehen unten zwei Bedienleisten übereinander – und damit zwei Knöpfe mit ähnlicher Beschriftung.

„Aus“ liefert gar kein Markup aus.

Mögliche Werte: Oben unter der Kopfzeile · Am unteren Rand · Aus

Kaufleiste einblenden ab (% Bildschirmhöhe) ifx-buybar-trigger

Zahl · Standard: 0

Zusätzliche Strecke, die nach dem Verschwinden des echten Kaufen-Knopfes noch gescrollt werden muss, bevor die Leiste erscheint – in Prozent der Bildschirmhöhe.

Bezugspunkt ist die Unterkante der Kopfzeile, nicht der obere Fensterrand: Bei 0 (Voreinstellung) fährt die Leiste genau in dem Moment hervor, in dem der echte Knopf unter die Kopfzeile rutscht. Für das Auge hakt sich derselbe Knopf dort ein; beim Zurückscrollen steht er wieder an seiner alten Stelle.

Höhere Werte verzögern das Einfahren: 75 entspricht etwa einem Dreiviertel-Bildschirm zusätzlichem Scrollen. Das ist dann sinnvoll, wenn die Leiste bewusst erst tief in der Seite auftauchen soll.

Der Wert wirkt in beide Richtungen – beim Zurückscrollen verschwindet die Leiste an derselben Stelle wieder.

Höhe des Knopfes in der Kaufleiste (px) ifx-buybar-height

Zahl · Standard: 48

Bestimmt die Höhe der gesamten Leiste: Sie wird gut ein Drittel höher als der Knopf, weil oben und unten je ein Sechstel der Knopfhöhe als Abstand dazukommt.

Gemessene Werte: 48 (Voreinstellung) ergibt eine 65px hohe Leiste, 36 ergibt 49px, 24 ergibt 33px – also genau die halbe Höhe.

Zur Bedienbarkeit: Die WCAG-Richtlinie 2.5.8 nennt 24 Pixel als Mindestmaß für Bedienelemente, 44 Pixel als anzustrebendes Maß. Bei 24 steht der Knopf also exakt auf der Untergrenze; darunter wird sie unterschritten. Die Breite ist davon nicht betroffen – der Knopf nimmt die volle freie Breite ein.

Variantenauswahl ifx-variant-style

Auswahl · Standard: Kasten

Betrifft Varianten, die als BILD hinterlegt sind – typischerweise Farben.

„Kasten“ zeigt sie als rechteckige Felder. „Kreis“ macht runde Farbpunkte daraus, wie man sie aus Mode- und Elektronikshops kennt; das Bild füllt den Kreis vollständig aus.

Varianten ohne Bild – etwa Größen – bleiben in beiden Fällen rechteckig, denn ein Text passt nicht in einen Kreis.

Mögliche Werte: Kasten · Kreis

Bildergalerie

Bildwechsel beim Überfahren ifx-gallery-hover

Auswahl · Standard: Aus

Fährt der Besucher mit der Maus über ein Vorschaubild, wechselt das große Bild – ohne Klick.

Der Klick bleibt unverändert erhalten. Das ist wichtig: auf einem Touchgerät gibt es kein Überfahren, und wer mit der Tastatur bedient, kommt ebenfalls nur über den Klick weiter. Die Einstellung fügt einen Weg hinzu, sie ersetzt keinen.

Aus demselben Grund erscheint der Effekt nur dort, wo es einen echten Mauszeiger gibt. Auf dem Handy passiert nichts.

Eingeschaltet hebt sich das Vorschaubild beim Überfahren zusätzlich leicht hervor, damit erkennbar ist, dass es reagiert.

Mögliche Werte: Aus · An

Verzögerung beim Überfahren (ms) ifx-gallery-hover-delay

Zahl · Standard: 90

Wie lange der Zeiger auf einem Vorschaubild ruhen muss, bevor gewechselt wird. Vorgabe 90 Millisekunden.

Ohne diese Pause feuert jedes Vorbeifahren eine Salve von Wechseln: man zieht die Maus einmal quer über die Reihe und die Galerie blättert durch alle Bilder. Mit ihr passiert nur etwas, wenn der Besucher wirklich hinsieht.

0 schaltet die Pause ab – der Wechsel kommt dann sofort. Werte über 300 fühlen sich träge an; über 1000 wird ohnehin gekappt.

Wirkt nur, wenn „Bildwechsel beim Überfahren“ eingeschaltet ist.

↑ Zum Inhalt

3 Bausteine für Erlebniswelten

Das Theme bringt keine eigenen Erlebniswelt-Elemente mit. Sie bauen Seiten wie gewohnt aus Abschnitten, Blöcken und Elementen und vergeben an passender Stelle eine CSS-Klasse – das Aussehen liefert das Theme. Ein späteres Update kann es verbessern, ohne dass jemand die Inhalte anfasst.

3.1 So setzen Sie die Klassen

Abschnitt oder Block: In der Erlebniswelt (Inhalte › Erlebniswelten) den Abschnitt bzw. Block anklicken und rechts in den Einstellungen das Feld CSS-Klasse füllen. Mehrere Klassen trennen Sie durch Leerzeichen.
Im Text: Im Textelement in die Code-Ansicht wechseln (Schaltfläche </> in der Werkzeugleiste des Editors) und die Klasse am HTML-Element setzen.

Was Shopware im Text stehen lässt. Texte aus dem Editor laufen vor der Auslieferung durch einen Bereiniger. Erhalten bleiben unter anderem div, span, p, Überschriften, Listen (ul, ol, dl), Tabellen, blockquote, cite, a, img, pre und code sowie die Attribute class, id und style.

Entfernt werden HTML5-Elemente wie figure, details und summary, außerdem svg und Attribute wie aria-hidden oder loading – der Inhalt bleibt dabei stehen, nur die Klammer fällt weg. Auch von style bleibt nur ein Teil: Farbe, Abstand, Ausrichtung und Schriftgröße gehen durch, display, gap oder grid-template-columns nicht. Deshalb arbeiten alle Bausteine unten mit Klassen.

3.2 Abschnitte

Diese Klassen gehören in das Feld CSS-Klasse eines Abschnitts.

Klasse	Wirkung
`ifx-section`	Mehr Luft oben und unten – je nach Bildschirmbreite 48 bis 96 Pixel.
`ifx-band`	Hinterlegt den Abschnitt mit der Flächenfarbe und gliedert so lange Seiten in Kapitel. Sichtbar wird der Streifen, wenn sich Flächenfarbe und Seitenhintergrund unterscheiden – im Dunkelmodus ist das immer der Fall. Gut kombinierbar mit `ifx-section`.
`ifx-hero`	Kopfbereich auf einem dunklen oder unruhigen Hintergrundbild: Ein Verlauf von unten deckt das Bild dort ab, wo der Text steht. Die Schrift ist weiß, der Text steht unten links in der Inhaltsspalte. Hintergrundbild im Abschnitt setzen und den Abschnitt auf volle Breite stellen.
`ifx-hero-hell`	Das Gegenstück für helle Hintergrundbilder: ein heller Schleier von links, dunkle Schrift, der Text links und mittig. Bleibt auch im Dunkelmodus hell, weil das Foto hell bleibt.

Steht ein Kopfbereich mit ifx-hero oder ifx-hero-hell als erster Abschnitt auf einer Seite ohne Brotkrumenpfad – etwa auf der Startseite –, schließt das Bild ohne Abstand an den Kopf der Seite an.

3.3 Blöcke

Diese Klassen gehören in das Feld CSS-Klasse eines Blocks. Die ersten fünf sind für Shopwares Block Bild und Text gedacht.

Klasse	Wirkung
`ifx-media`	Bild und Text mittig zueinander, das Bild gerundet, der Text mit seitlichem Abstand.
`ifx-media-right`	Zusammen mit `ifx-media`: Das Bild steht ab Tablet-Breite rechts. Abwechselnd gesetzt, wird aus einer Aufzählung ein Verlauf. Auf dem Handy steht das Bild immer oben.
`ifx-media--overlay`	Zusammen mit `ifx-media`: Der Text liegt unten auf dem Bild, auf einem dunklen Verlauf, der unter jeder Zeile mindestens 62 % deckt. Weiße Schrift bleibt so auch auf hellen Fotos lesbar – egal, wie lang der Text wird.
`ifx-media--halb`	Zusammen mit `ifx-media--overlay`: Ab 992 Pixel Breite nimmt der Block eine halbe Spalte ein. Zwei solche Blöcke hintereinander stehen nebeneinander und gleich hoch; alle anderen Blöcke des Abschnitts behalten die volle Breite.
`ifx-team`	Eine schmale, mittige Personenkarte mit rundem Bild (180 Pixel) und zentriertem Text. Für mehrere Personen ist `ifx-people` im Text meist praktischer.
`ifx-form-card`	Für Formular-Blöcke: Das Formular steht in einer Karte mit Rahmen und abgesetzter Fläche, höchstens 44rem breit und mittig.

Ein Beispiel: Zwei Karten mit Text auf dem Foto nebeneinander, darunter eine über die volle Breite. Die ersten beiden Blöcke bekommen ifx-media ifx-media--overlay ifx-media--halb, der dritte ifx-media ifx-media--overlay.

3.4 Elemente im Text

Diese Bausteine schreiben Sie als HTML in ein Textelement. Die Beispiele lassen sich so übernehmen; Texte und Adressen tauschen Sie aus.

Überzeile, Einleitung, Zentrierung

ifx-eyebrow ist eine kleine Überzeile in Großbuchstaben und Akzentfarbe, ifx-lead ein Einleitungssatz – größer als Fließtext und auf eine gut lesbare Zeilenlänge begrenzt. ifx-center zentriert beides.

<div class="ifx-center">
  <span class="ifx-eyebrow">Wofür wir stehen</span>
  <h2>Das Prinzip</h2>
  <p class="ifx-lead">Ein Satz, der zusammenfasst, worum es geht.</p>
</div>

Karten

ifx-card ist eine Karte mit Rahmen auf abgesetzter Fläche; mehrere Karten in einem Raster werden gleich hoch. ifx-card__mark setzt einen kurzen Strich in der Akzentfarbe als Anker – bewusst ohne Nummer, denn eine Nummer behauptet eine Reihenfolge. Statt des Strichs trägt ifx-tag eine kleine Kennzeichnung über der Überschrift, etwa einen Bereichsnamen.

<div class="ifx-card">
  <span class="ifx-card__mark"></span>
  <h3>Innovation</h3>
  <p>Kurzer Text zur Karte.</p>
</div>

<div class="ifx-card">
  <span class="ifx-tag">Lager</span>
  <h3>Ein Artikel, beliebig viele Lagerplätze</h3>
  <p>Kurzer Text zur Karte.</p>
</div>

Spalten und Raster

Zwei Familien mit ähnlichen Namen und verschiedenem Zweck:

ifx-cols-2 und ifx-cols-3 verteilen Inhalt auf Spalten mit einer Mindestbreite von 280 bzw. 240 Pixeln. Wie viele Spalten entstehen, ergibt sich aus dem Platz – richtig für Fließtext.
ifx-grid-2 und ifx-grid-3 haben eine feste Spaltenzahl je Bildschirmbreite: auf dem Handy eine Spalte, ifx-grid-2 ab 768 Pixel zwei, ifx-grid-3 ab 576 Pixel zwei und ab 992 Pixel drei. Richtig für eine gezählte Menge Karten: Vier Karten ergeben 2 + 2, nicht 3 + 1. Bleibt bei ifx-grid-3 in der Zweierreihe eine Karte übrig, nimmt sie die ganze Zeile.

<div class="ifx-grid-3">
  <div class="ifx-card">…</div>
  <div class="ifx-card">…</div>
  <div class="ifx-card">…</div>
</div>

Vertrauensleiste und Kennzahlen

ifx-trustline reiht kurze Punkte mit Haken nebeneinander, mit einer Linie darüber – etwa unter einem Kopfbereich. ifx-stats ist eine Leiste mit Kennzahlen: die Zahl groß in der Akzentfarbe, die Beschriftung klein darunter.

<ul class="ifx-trustline">
  <li>Läuft auf Ihrer eigenen Hardware</li>
  <li>Kein Abo</li>
</ul>

<ul class="ifx-stats">
  <li class="ifx-stat"><b>209</b><span>Fassungen</span></li>
  <li class="ifx-stat"><b>12</b><span>Arbeitsbereiche</span></li>
</ul>

Zitat und Hinweis

ifx-quote setzt ein Zitat mit Akzentstrich auf abgesetzter Fläche, cite darunter nennt die Quelle. ifx-hinweis hebt einen einzelnen Absatz hervor, der nicht überlesen werden soll – in normaler Schriftgröße.

<blockquote class="ifx-quote">
  <p>Wir haben angefangen, weil uns die Zettelwirtschaft genervt hat.</p>
  <cite>Name, Rolle</cite>
</blockquote>

<p class="ifx-hinweis">Wichtig: Dieser Satz soll nicht überlesen werden.</p>

Fragen und Antworten

Eine Liste aus Fragen (dt) und Antworten (dd) mit der Klasse ifx-faq. Das Theme macht daraus ein Akkordeon: Die Fragen werden zu Knöpfen, die Antworten klappen auf – auch mit der Tastatur bedienbar. Ohne JavaScript bleibt alles sichtbar.

<dl class="ifx-faq">
  <dt>Wie lange dauert die Lieferung?</dt>
  <dd><p>Die Antwort, gern mit mehreren Absätzen.</p></dd>
  <dt>Nächste Frage?</dt>
  <dd><p>Nächste Antwort.</p></dd>
</dl>

Diagramme und Tabellen

ifx-figure legt ein Diagramm auf eine helle Fläche mit Rahmen – auch im Dunkelmodus hell, weil Diagramme meist hell gezeichnet sind. Auf schmalen Bildschirmen lässt sich das Diagramm seitlich verschieben, statt unlesbar klein zu werden. Setzen Sie Diagramme als Bild in den Text statt als Bild-Block.

Tabellen im Text gestaltet das Theme ohnehin mit Linien und abgesetzter Kopfzeile. Die Hülle ifx-tablewrap sorgt dafür, dass eine breite Tabelle seitlich verschiebbar wird, statt die Seite zu sprengen. Ab vier Spalten nehmen Sie ifx-tablewrap ifx-tablewrap--breit: Die Tabelle behält eine Mindestbreite und wird auf dem Handy verschoben statt zerquetscht.

<div class="ifx-figure">
  <img src="/media/…/diagramm.svg" alt="Was das Diagramm zeigt, in einem Satz">
</div>

<div class="ifx-tablewrap">
  <table>
    <thead><tr><th>Spalte</th><th>Spalte</th></tr></thead>
    <tbody><tr><td>Bezeichnung</td><td>Erklärung</td></tr></tbody>
  </table>
</div>

Kacheln mit Links

ifx-tools ist eine Liste von Kacheln, von denen jede als Ganzes ein Link ist – gedacht für Verweise auf andere Seiten oder Werkzeuge. Die Adresse steht unten mit einem Pfeil. ifx-tool__local setzt auf Wunsch eine kleine Plakette darüber.

<ul class="ifx-tools">
  <li><a class="ifx-tool" href="https://example.com/">
    <span class="ifx-tool__name">Name des Werkzeugs</span>
    <span class="ifx-tool__desc">Was es tut, in einem Satz.</span>
    <span class="ifx-tool__host">example.com</span>
  </a></li>
</ul>

Kacheln als Einstieg

ifx-tiles ist eine Reihe von Kacheln mit Titel, kurzem Text und Pfeil – gedacht als Einstieg in die wichtigsten Bereiche, etwa unter der Überschrift der Startseite. Jede Kachel ist als Ganzes ein Link.

Ob die Kacheln nebeneinander oder untereinander stehen, richtet sich nach dem Platz, den der Text an dieser Stelle hat: Zwei bis vier Kacheln teilen sich eine Zeile, sobald jede breit genug für ihren Titel ist, sonst bekommt jede eine eigene Zeile. Zwei oben und eine allein darunter gibt es nicht. Ab fünf Kacheln stehen sie immer untereinander.

In einem Kopfbereich mit ifx-hero werden die Kacheln durchscheinend und nutzen die ganze Breite der Inhaltsspalte; Überschrift und Einleitung darüber behalten ihre Zeilenlänge. In ifx-hero-hell bleiben sie in der Textspalte, damit das Motiv rechts frei bleibt.

<ul class="ifx-tiles">
  <li><a class="ifx-tile" href="/produkte/">
    <span class="ifx-tile__title">Produkte</span>
    <span class="ifx-tile__text">Was man dort findet, in einem Satz.</span>
  </a></li>
  <li><a class="ifx-tile" href="/leistungen/">
    <span class="ifx-tile__title">Leistungen</span>
    <span class="ifx-tile__text">Ein Satz zum zweiten Bereich.</span>
  </a></li>
</ul>

Personen

ifx-people ist ein Raster aus Personenkarten mit runden Fotos bis 180 Pixel, als Gruppe mittig. Eine weitere Person ist ein weiterer div. Ohne Foto nehmen Sie einen Kreis in der Akzentfarbe: <div class="ifx-person__foto ifx-person__foto--initial">A</div> zeigt einen Anfangsbuchstaben. Mit der Klasse ifx-person--verborgen bereiten Sie eine Person vor, ohne dass Besucher sie sehen.

<div class="ifx-people">
  <div class="ifx-person">
    <img class="ifx-person__foto" src="/media/…/foto.jpg" alt="Vorname Nachname" width="180" height="180">
    <h3>Vorname Nachname</h3>
    <p>Rolle</p>
  </div>
</div>

Text auf einem Hintergrundbild

ifx-hero-overlay ist ein halbtransparenter dunkler Kasten mit weißer, zentrierter Schrift – für Text auf dem Hintergrundbild eines Abschnitts, wenn es kein ganzer Kopfbereich (ifx-hero) sein soll.

Nachschlageseite mit Inhaltsverzeichnis

ifx-doc baut eine lange Seite mit Sprungmarken – dieses Handbuch ist so gebaut. Ab 992 Pixel steht das Verzeichnis links und läuft beim Lesen mit, darunter steht es über dem Text. Verzeichnis und Inhalt müssen im selben Textelement stehen; die Sprungziele sind gewöhnliche id-Attribute.

<div class="ifx-doc">
  <div class="ifx-doc__toc" id="inhalt">
    <p><strong>Inhalt</strong></p>
    <ol>
      <li><a href="#erstes-kapitel">Erstes Kapitel</a></li>
      <li><a href="#zweites-kapitel">Zweites Kapitel</a></li>
    </ol>
  </div>
  <div class="ifx-doc__inhalt">
    <h2 id="erstes-kapitel">Erstes Kapitel</h2>
    <p>…</p>
    <h2 id="zweites-kapitel">Zweites Kapitel</h2>
    <p>…</p>
  </div>
</div>

↑ Zum Inhalt

4 Textbausteine

Alle Texte, die das Theme selbst ausgibt, sind Textbausteine mit dem Präfix innospark.theme. Sie ändern sie unter Einstellungen › Shop › Textbausteine: Set wählen, etwa BASE de-DE, nach innospark.theme suchen, Wert eintragen, speichern.

Einige Texte lassen sich zusätzlich in der Theme-Konfiguration setzen – die USPs und der Claim. Ein Wert dort gilt für alle Sprachen und geht dem Textbaustein vor; ist das Feld leer, greift der übersetzbare Textbaustein.

Texte nur für einen Verkaufskanal ändern. Legen Sie ein eigenes Textbaustein-Set an und weisen Sie es der Domain des Kanals zu (Verkaufskanäle › Ihr Kanal, Bereich Domains). Einträge in diesem Set gelten nur dort. Das neue Set enthält zunächst die mitgelieferten Standardtexte – Änderungen, die Sie in einem anderen Set gemacht haben, übernehmen Sie bei Bedarf von Hand.

4.1 Die Textbausteine des Themes

Die Tabelle nennt die Schlüssel ohne das gemeinsame Präfix innospark.theme. Leer ausgelieferte Bausteine erzeugen keine Ausgabe, bis Sie sie füllen. Das ist Absicht: Ein Theme soll keine Werbeaussage und keine Zusage in Ihren Shop schreiben, die Sie nie getroffen haben.

Textbaustein	Standardtext	Wo er erscheint
`appbar.account`	Konto	Mobile Aktionsleiste: Knopf für das Kundenkonto
`appbar.cart`	Warenkorb	Mobile Aktionsleiste: Knopf für den Warenkorb
`appbar.label`	Schnellzugriff	Name der mobilen Aktionsleiste für Screenreader
`appbar.menu`	Menü	Mobile Aktionsleiste: Knopf für das Menü
`appbar.search`	Suche	Mobile Aktionsleiste: Knopf für die Suche
`b2b.hint`	Sie kaufen für ein Unternehmen?	Fußbereich: Satz vor dem Link aus „Hinweis für Geschäftskunden“
`buybar.addToCart`	In den Warenkorb	Mobile Kaufleiste: Beschriftung des Knopfes
`cart.included`	Im Kaufpreis enthalten	Überschrift des Kastens „Im Kaufpreis enthalten“ in Warenkorb und Bestellbestätigung
`cart.includedFree`	inklusive	Das Wort neben dem durchgestrichenen Wert in diesem Kasten
`document.included`	leer	Rechnung: Satz über der Summe bei Bestellungen mit Download-Artikeln. Leer heißt: kein Satz
`finish.confirmationMail`	Die Bestellbestätigung geht an <strong>%email%</strong>. Stimmt die Adresse nicht, melden Sie sich bitte bei uns.	Seite nach dem Bestellen: an welche Adresse die Bestellbestätigung geht. `%email%` setzt die Adresse ein; leer heißt: Shopwares Satz ohne Adresse
`footer.claim`	leer	Absender-Block als erste Spalte im Fuß, wenn die Theme-Einstellung „Claim unter dem Logo“ leer ist. HTML erlaubt: `<strong>` für den Namen – er erscheint wie eine Spaltenüberschrift –, `<br>` für Zeilen
`footer.paymentHeadline`	leer	Beschriftung vor den Zahlungslogos im Fuß, etwa „Sicher bezahlen“
`footer.priceNoteDigital`	Alle Preise inkl. gesetzl. Mehrwertsteuer. Wir bieten ausschließlich digitale Produkte an – es fallen keine Versandkosten an.	Preishinweis im Fuß bei „Digitaler Shop“, für Bruttopreise
`footer.priceNoteDigitalNet`	Alle Preise zzgl. gesetzl. Mehrwertsteuer. Wir bieten ausschließlich digitale Produkte an – es fallen keine Versandkosten an.	Dasselbe für Nettopreise, etwa in einer Kundengruppe für Geschäftskunden, und für steuerfreie Bestellungen
`revocation.privacyNotice`	Wir verwenden Ihre Angaben, um Ihren Widerruf zu bearbeiten und Ihnen den Eingang zu bestätigen. Einzelheiten finden Sie in unserer %privacyModalTagOpen%Datenschutzerklärung%privacyModalTagClose%.	Datenschutzhinweis unter dem Online-Widerrufsformular. Die Platzhalter setzen den Link zur Datenschutzerklärung
`schemeToggle`	Zwischen heller und dunkler Darstellung wechseln	Beschriftung des Hell/Dunkel-Umschalters – Tooltip und Screenreader
`tax.grossShippingFree`	Preise inkl. MwSt. – für diesen Artikel fallen keine Versandkosten an	Unter dem Preis bei versandkostenfreien Artikeln, für Bruttopreise
`tax.netShippingFree`	Preise zzgl. MwSt. – für diesen Artikel fallen keine Versandkosten an	Dasselbe für Nettopreise
`topbar.greeting`	Hallo,	Top-Bar: Gruß vor dem Vornamen angemeldeter Kunden
`topbar.login`	Anmelden	Top-Bar: Link zur Anmeldung
`topbar.or`	oder	Top-Bar: Wort zwischen Anmelden und Registrieren
`topbar.register`	Registrieren	Top-Bar: Link zur Registrierung
`topbar.service`	Service & Hilfe	Top-Bar: Beschriftung des Service-Menüs
`usp.one`	leer	USP 1 in der Top-Bar, wenn das Theme-Feld „USP 1“ leer ist
`usp.three`	leer	USP 3 in der Top-Bar, wenn das Theme-Feld „USP 3“ leer ist
`usp.two`	leer	USP 2 in der Top-Bar, wenn das Theme-Feld „USP 2“ leer ist

4.2 Kontaktzeilen mit Symbolen im Fußbereich

Die Service-Spalte im Fuß stammt aus Shopwares eigenen Textbausteinen footer.serviceHotline und footer.serviceContactTextPage. Das Theme bringt drei Klassen mit, die einer Zeile ein Symbol voranstellen: ifx-kontakt--telefon, ifx-kontakt--mail und ifx-kontakt--formular, jeweils zusammen mit ifx-kontakt.

Wir sind für Sie erreichbar:
<a href="tel:+49401234567" class="ifx-kontakt ifx-kontakt--telefon">
  <span class="visually-hidden">Telefon: </span>+49 40 123 45 67</a>
<a href="mailto:info@example.de" class="ifx-kontakt ifx-kontakt--mail">
  <span class="visually-hidden">E-Mail: </span>info@example.de</a>

Und für footer.serviceContactTextPage:

<a href="%url%" class="ifx-kontakt ifx-kontakt--formular">Kontaktformular</a>

Das Symbol ist reine Gestaltung; der unsichtbare Vorsatz sagt einem Screenreader, was die Zeile ist. Beim Speichern entfernt Shopware aus Textbausteinen unter anderem button – Links mit Klassen, span und Zeilenumbrüche bleiben stehen.

↑ Zum Inhalt

5 Rechtlich relevante Stellen

An einigen Stellen gibt der Shop Angaben aus, die rechtlich eine Rolle spielen. Das Theme greift dort nur ein, wo Shopwares Standard für einen bestimmten Fall nicht passt; alles andere sind Einstellungen, die ohne Eintrag nichts verändern. Dieses Kapitel beschreibt, was das Theme an diesen Stellen tut. Welche Angaben Ihr Shop braucht und wie sie lauten müssen, hängt von Ihrem Angebot ab – lassen Sie Ihre Texte im Zweifel rechtlich prüfen.

5.1 Preishinweis im Fußbereich

Die Zeile ganz unten im Fuß, die über Steuer und Versandkosten informiert, steuert „Preishinweis im Fußbereich“:

Standard übernimmt Shopwares Text („zzgl. Versandkosten und ggf. Nachnahmegebühren“) samt Link auf die Versand- und Zahlungsseite – richtig für einen Shop, der Ware verschickt.
Digitaler Shop ersetzt ihn durch einen Hinweis ohne Versand. Der Satz richtet sich nach der Preisanzeige des Kunden: bei Bruttopreisen innospark.theme.footer.priceNoteDigital, bei Nettopreisen – etwa in einer Kundengruppe für Geschäftskunden – und bei steuerfreien Bestellungen innospark.theme.footer.priceNoteDigitalNet.
Aus blendet die Zeile aus. Die Angabe, ob Preise die Umsatzsteuer enthalten, ist gegenüber Verbrauchern vorgeschrieben; wer sie hier abschaltet, muss sie an anderer Stelle machen.

5.2 Versandhinweis am Artikel

Unter dem Preis schreibt Shopware immer „zzgl. Versandkosten“. Ist ein Artikel als versandkostenfrei gekennzeichnet (Schalter Versandkostenfrei am Artikel), ersetzt das Theme den Satz durch „… für diesen Artikel fallen keine Versandkosten an“ – automatisch, ohne Einstellung. Die Formulierung bezieht sich bewusst auf den Artikel: Liegt daneben ein Artikel mit Versand im Warenkorb, fallen weiterhin Kosten an. Der Link auf die Versand- und Zahlungsseite bleibt. Den Text ändern Sie über innospark.theme.tax.grossShippingFree und innospark.theme.tax.netShippingFree.

5.3 Kontakt in der Kasse

In der Kopfzeile des Bestellvorgangs zeigt Shopware eine Platzhalter-Rufnummer: „12345-123456789, Täglich 7:30 bis 22:00 Uhr“. Tragen Sie bei „Kontakt in der Kopfzeile der Kasse“ Ihre echte Erreichbarkeit ein, im Format Überschrift|Kontakt|Zusatz:

Fragen zu Ihrer Bestellung?|info@example.de|Telefon +49 40 1234567

Mit einem @ wird der Kontakt ein E-Mail-Link, sonst ein Telefon-Link; Leerzeichen, Schrägstriche, Bindestriche und Klammern fallen im Link weg. Leer lassen heißt: Shopwares Fassung bleibt stehen – samt Platzhalter.

5.4 E-Mail-Adresse nach dem Bestellen

Nach dem Bestellen schreibt Shopware nur „Bestellbestätigungs-E-Mail wurde verschickt.“ Das Theme nennt an dieser Stelle die Adresse, an die die Bestätigung geht. So fällt ein Tippfehler sofort auf und nicht erst, wenn keine Mail ankommt. Es ist die Adresse der Bestellung: Ändert der Kunde später die Adresse in seinem Konto, behält die Bestellung die alte. Korrigieren lässt sie sich in der Administration in der Bestellung, Reiter Details; erneut senden kann Shopware die Bestätigung von sich aus nicht. Den Satz ändern Sie über innospark.theme.finish.confirmationMail, der Platzhalter %email% setzt die Adresse ein. Ist der Textbaustein leer, erscheint Shopwares Satz.

5.5 Online-Widerrufsformular

Das Theme ändert Shopwares Formular für den Widerruf an einer Stelle: Statt eines Pflicht-Häkchens zum Datenschutz steht unter dem Formular ein Hinweistext mit Link zur Datenschutzerklärung (innospark.theme.revocation.privacyNotice). Der Grund: Ein Widerruf soll nicht an zusätzliche Hürden geknüpft sein, und für seine Bearbeitung braucht es keine Einwilligung, sondern die Information darüber. Die Felder des Formulars und der Knopf „Vertrag widerrufen“ im Fußbereich bleiben, wie Shopware sie ausgibt.

5.6 „Im Kaufpreis enthalten“

„Im Kaufpreis enthalten (Warenkorb)“ zeigt unter der Artikelliste in Warenkorb und Bestellbestätigung einen Kasten mit einer Leistung, die ohne Aufpreis dazugehört – etwa einem Update-Plan. Format Titel|Beschreibung|Wert. Der Wert erscheint durchgestrichen neben „inklusive“: Tragen Sie ihn nur ein, wenn es die Leistung tatsächlich einzeln zu diesem Preis zu kaufen gibt. Ein Streichpreis ohne echten Bezugspreis ist eine irreführende Angabe.

5.7 Rechnung

Die Rechnungsvorlage passt das Theme für digitale Artikel an. Das gilt in allen Verkaufskanälen, weil Shopware Dokumente außerhalb des Themes erzeugt:

Enthält eine Bestellung Download-Artikel, steht über der Summe der Textbaustein innospark.theme.document.included – etwa ein Hinweis, was im Preis enthalten ist. Er wird leer ausgeliefert; ohne Eintrag erscheint nichts. Die Theme-Einstellung „Im Kaufpreis enthalten“ wirkt nur in der Storefront – wer beides nutzt, pflegt beide Stellen.
Enthält eine Rechnung ausschließlich Download-Artikel, entfällt Shopwares Satz „Die Ware bleibt, bis zur vollständigen Bezahlung, unser Eigentum.“ Er ist für Warenlieferungen gedacht.

5.8 Hinweis zu KI-generierten Inhalten

„Hinweis zu KI-generierten Inhalten“ erscheint als kleingedruckter Absatz ganz unten im Fuß, unter dem Preishinweis. Das Feld ist leer ausgeliefert – ob der Hinweis zutrifft, weiß nur, wer die Bilder und Texte eingestellt hat. Der Teil bis zum ersten Doppelpunkt wird fett gesetzt.

5.9 Schriften ohne fremde Server

Steht „Schriftquelle“ auf „Systemschriften“, „Serifen-Überschriften“ oder „Mitgelieferte Schriften“, lädt die Storefront keine Schrift von einem fremden Server: Systemschriften sind auf dem Gerät vorhanden, die mitgelieferten Schriften Playfair Display und Rubik liefert Ihr eigener Server aus. Bei „Theme-Schrift“ gilt die Schrift aus Shopwares eigenen Einstellungen – ob sie von einem fremden Dienst kommt, hängt davon ab, wie sie eingebunden ist.

5.10 Pflichtseiten auf dem Handy

Tragen Sie Impressum, Datenschutz und Widerrufsbelehrung in „Service-Menü in der oberen Leiste“ ein. Sie erscheinen dann oben in der Leiste und zusätzlich im aufklappbaren Menü auf dem Handy – dort sind sie mit einem Tipp erreichbar statt erst ganz unten im Fußbereich.

↑ Zum Inhalt

6 Häufige Fragen

Ich habe eine Einstellung geändert, aber in der Storefront ändert sich nichts.

Die häufigsten Gründe, in dieser Reihenfolge:

Eine Farbvorlage ist gewählt. Dann wirken die Farbfelder darunter nicht – „Farbvorlage (Hellmodus)“ auf „Eigene Farben“ stellen.
Im Feld „Eingefügte Werte“ steht noch ein Block aus der Design-Vorschau. Er überstimmt die einzelnen Felder.
Sie bearbeiten ein anderes Theme als das zugewiesene – etwa das Original statt des Duplikats Ihres Kanals.
Die Einstellung betrifft Header oder Produktkachel des Themes, der Bereich ist aber einem PVS-Plugin überlassen (siehe unten).
Zwischenspeicher: Seite ohne Cache neu laden (Strg + F5), sonst den Shopware-Cache leeren.

Wie probiere ich Farben aus, ohne dass Kunden etwas sehen?

Mit der Design-Vorschau: „Design-Vorschau freischalten“ einschalten, speichern und die Storefront mit ?ifx-preview=1 am Ende der Adresse öffnen. Farben, Rundungen, Abstände und Kachel-Varianten ändern sich sofort – nur in Ihrem Browser. „Werte kopieren“ liefert einen Block, den Sie in „Eingefügte Werte“ einfügen; oder Sie übertragen die Werte in die einzelnen Felder. Schalten Sie die Vorschau danach wieder aus.

Wie richte ich den Dunkelmodus ein?

„Dunkelmodus bereitstellen“ einschalten und bei „Wann dunkel“ wählen: nach der Systemeinstellung des Besuchers, mit Umschalter in der oberen Leiste oder immer dunkel. Die Farben kommen aus „Farbvorlage (Dunkelmodus)“ oder aus den sieben Farbfeldern darunter. Ist Ihr Logo auf dunklem Grund schlecht zu sehen, hinterlegen Sie ein zweites bei „Logo für den Dunkelmodus“. Der Umschalter sitzt in der Top-Bar – ist sie ausgeschaltet, gibt es keinen, und auf Seiten, auf denen „Auf diesen Seiten auch die Top-Bar ausblenden“ sie ausblendet, fehlt er ebenfalls.

Ich nutze PVS fancy Navbar oder PVS fancy Product Card.

Das Theme erkennt beide Plugins. Steht „Header-Variante“ bzw. „Produktkachel-Variante“ auf „Automatisch“, hält es sich im jeweiligen Bereich zurück, damit sich zwei Gestaltungen nicht überlagern. Einstellungen für Header, Top-Bar oder Produktkachel wirken dann nicht. Möchten Sie trotzdem die Gestaltung des Themes, wählen Sie „Immer Theme-Header“ bzw. „Immer Theme-Kachel“.

Macht das Theme meinen Shop langsamer?

Es ist auf das Gegenteil ausgelegt: kein JavaScript-Paket, sondern wenige Kilobyte Skript direkt im HTML; ausgeschaltete Schalter erzeugen gar kein CSS; Bilder laden erst, wenn sie in Sicht kommen, und weit entfernte Abschnitte langer Seiten werden erst beim Heranscrollen gezeichnet. Die Stellschrauben dafür stehen im Reiter Performance.

Warum sieht mein HTML in einem Erlebniswelt-Text anders aus als eingegeben?

Shopware bereinigt Texte vor der Auslieferung und entfernt dabei einige Elemente und Stilangaben – siehe Abschnitt 3.1. Arbeiten Sie mit den Klassen des Themes statt mit style.

Auf dem Handy stehen unten zwei Leisten übereinander.

Das sind die mobile Aktionsleiste und die Kaufleiste, wenn beide am unteren Rand stehen. Stellen Sie „Mobile Kaufleiste“ auf „Oben unter der Kopfzeile“ (Voreinstellung) oder schalten Sie „Mobile Aktionsleiste am unteren Rand“ aus.

Darf ich das Theme in mehreren Shops einsetzen?

Maßgeblich sind die Lizenzbedingungen. Sie erlauben die Installation in bis zu zwei Shopware-Installationen (§ 2 Abs. 1), mehr dazu in Kapitel 7.

Wie lange bekomme ich Updates?

Zu jedem Softwareprodukt gehören Aktualisierungen für zwölf Monate ab Bereitstellung – ohne Aufpreis. Danach bleibt das Theme nutzbar; das Nutzungsrecht ist zeitlich unbefristet. Einzelheiten stehen in unseren AGB. Wie Sie eine neue Version einspielen, beschreibt Abschnitt 1.4.

Wo bekomme ich Hilfe?

Schreiben Sie an info@innospark.de oder rufen Sie an: +49 40 2286 8271. Nennen Sie bitte Ihre Shopware-Version und die Version des Themes – beides steht unter Erweiterungen › Meine Erweiterungen.

↑ Zum Inhalt

7 Lizenz

Das InnoSpark Fancy Theme ist Software der InnoSpark GmbH. Es gelten die Lizenzbedingungen (EULA). Sie liegen dem Paket als LICENSE.txt bei und stehen im Shop unter Lizenzbedingungen (EULA). Maßgeblich ist allein ihr Wortlaut; die Übersicht unten hilft nur beim Finden.

Das Nutzungsrecht regelt § 2 Abs. 1:

(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 Die Abschnitte der Lizenzbedingungen

§ 1 Geltungsbereich und Vertragsgegenstand
§ 2 Einräumung von Nutzungsrechten
§ 3 Grenzen der Nutzung
§ 4 Sicherungskopie
§ 5 Weiterveräußerung der Lizenz
§ 6 Beobachten, Untersuchen, Dekompilierung
§ 7 Gewährleistung und Aktualisierungen
§ 8 Haftung
§ 9 Drittanbieter- und Open-Source-Komponenten
§ 10 Vertragsdauer
§ 11 Schlussbestimmungen

7.2 Bestandteile anderer Urheber

Drei Bestandteile stammen nicht von InnoSpark und stehen unter ihrer eigenen Lizenz (§ 9 der Lizenzbedingungen). Die Lizenztexte müssen im Paket bleiben.

Bestandteil	Lizenz	Lizenztext im Paket
Schriftarten Rubik und Playfair Display	SIL Open Font License 1.1	`src/Resources/app/storefront/src/assets/fonts/OFL-*.txt`
17 Symbole aus dem Satz Lucide	ISC License	`src/Resources/views/storefront/icon/lucide/LICENSE-Lucide.txt`
Übernommene Zeilen aus dem Shopware-Kern	MIT-Lizenz	`LICENSE-Shopware.txt`

7.3 Anbieter

InnoSpark GmbH · Grellkamp 6b · 22113 Oststeinbek
info@innospark.de · +49 40 2286 8271

↑ Zum Inhalt

InnoSpark Fancy Theme

1 Installation und Updates

1.1 Voraussetzungen

1.2 Installation über die Administration

1.3 Ein eigenes Theme je Verkaufskanal

1.4 Updates

1.5 Installation über die Konsole

1.6 Deinstallation

2 Einstellungen

2.1 Design

Farben

Rundungen & Schatten

Dunkelmodus

Werte aus der Vorschau

Darstellung

2.2 Layout

Raster & Abstände

Produktraster

2.3 Typografie

Grundeinstellungen

Überschriften

2.4 Header & Navigation

Header

Top-Bar & USPs

Navigation

2.5 Produktkacheln

Darstellung

Inhalt

2.6 Footer

Footer

2.7 Performance

Bilder & Ladeverhalten

Animationen

2.8 SEO & Barrierefreiheit

Strukturierte Daten

Barrierefreiheit

2.9 Produktseite

Beschreibung & Bewertungen

Kaufbereich

Bildergalerie

3 Bausteine für Erlebniswelten

3.1 So setzen Sie die Klassen

3.2 Abschnitte

3.3 Blöcke

3.4 Elemente im Text

Überzeile, Einleitung, Zentrierung

Karten

Spalten und Raster

Vertrauensleiste und Kennzahlen

Zitat und Hinweis

Fragen und Antworten

Diagramme und Tabellen

Kacheln mit Links

Kacheln als Einstieg

Personen

Text auf einem Hintergrundbild

Nachschlageseite mit Inhaltsverzeichnis

4 Textbausteine

4.1 Die Textbausteine des Themes

4.2 Kontaktzeilen mit Symbolen im Fußbereich

5 Rechtlich relevante Stellen

5.1 Preishinweis im Fußbereich

5.2 Versandhinweis am Artikel

5.3 Kontakt in der Kasse

5.4 E-Mail-Adresse nach dem Bestellen

5.5 Online-Widerrufsformular

5.6 „Im Kaufpreis enthalten“

5.7 Rechnung

5.8 Hinweis zu KI-generierten Inhalten

5.9 Schriften ohne fremde Server

5.10 Pflichtseiten auf dem Handy

6 Häufige Fragen

7 Lizenz

7.1 Die Abschnitte der Lizenzbedingungen

7.2 Bestandteile anderer Urheber

7.3 Anbieter