Diese Funktion wird derzeit schrittweise ausgerollt. Sollten Sie den Bereich in Ihrem Shopgate Backend noch nicht sehen oder Fragen dazu haben, wenden Sie sich gerne an Ihre Ansprechpartner bei Shopgate.
Voraussetzung: Das Theme Ihrer App muss mindestens in Version 7.32.0 vorliegen. Ältere Versionen unterstützen die hier beschriebenen Einstellungen nicht.
Übersicht
Öffnen Sie im Shopgate Backend Design → Theme.
Die Seite ist zweigeteilt: Auf der linken Seite finden Sie die Einstellungen, gruppiert in sechs Kategorien. Auf der rechten Seite sehen Sie eine Live-Vorschau Ihrer Shopping-App, in der jede Änderung sofort dargestellt wird.
Über die Symbole oberhalb der Vorschau wechseln Sie zwischen Smartphone- und Tablet-Ansicht.
| Kategorie | Inhalt |
|---|---|
| Farben | Marken-, Text-, Navigations- und Statusfarben der App |
| Typografie | Globale Schrifteinstellungen |
| Styling | Eckenstil und Abstände für Medien-Widgets |
| Navigation & Menü | Darstellung und Verhalten der Hauptnavigation |
| Karten & Kacheln | Darstellung von Karten und Produktkacheln |
| Produkt | Darstellung von Produktinformationen |
Einstellungen schnell finden
Wenn Sie nicht wissen, in welcher Kategorie eine Einstellung liegt, nutzen Sie das Suchfeld Einstellungen durchsuchen oberhalb der Kategorien.
Die Ergebnisliste zeigt zu jeder Einstellung den vollständigen Pfad, etwa *Farben › Hauptfarben*. Ein Klick auf ein Ergebnis öffnet die Einstellung direkt.
Helles und dunkles Erscheinungsbild
In der Kategorie Farben legen Sie unter *Theme → Erscheinungsbild* fest, ob Ihre App hell oder dunkel dargestellt wird.
Die Auswahl wirkt sich auf die gesamte App aus. Die Vorschau übernimmt die Umstellung sofort, sodass Sie Kontraste und Lesbarkeit direkt prüfen können.
Farben festlegen
Unter Hauptfarben legen Sie die Markenfarben Ihrer App fest. Die *Primärfarbe* prägt zentrale Bedienelemente wie Schaltflächen, die *Sekundärfarbe* dient als Akzentfarbe.
Klicken Sie auf das Stift-Symbol, um den Farbwähler zu öffnen, oder tragen Sie den Hexadezimalwert direkt in das Feld ein. Mit der Option *Standard-Kontrasttext überschreiben* legen Sie fest, welche Textfarbe auf der jeweiligen Farbfläche verwendet wird.
Weiter unten in der Kategorie finden Sie zusätzliche Farbgruppen.
| Gruppe | Beschreibung |
|---|---|
| Textfarben | Standardtext und Sekundärtext |
| Navigation | Farben der Leisten am oberen und unteren Bildschirmrand |
| Oberflächenfarben | Seitenhintergrund und Hintergründe von Inhaltsflächen |
| Preisfarben | Regulärer Preis, Aktionspreis und durchgestrichener Preis |
| Statusfarben | Fehler-, Warn- und Erfolgszustände |
Typografie und eigene Schriftart
In der Kategorie Typografie legen Sie die Schrifteinstellungen für die gesamte App fest: Basis-Schriftgröße, Basis-Zeilenhöhe, sowie die drei Schriftstärken *Regular*, *Medium* und *Bold*.
Darunter finden Sie eigene Abschnitte für Buttons und Preise, in denen Sie Schriftgröße, Zeilenhöhe, Schriftstärke und Text-Transformation getrennt einstellen.
Eigene Schriftart verwenden: Aktivieren Sie *Eigene Schrift laden*. Tragen Sie anschließend unter *Schrift-URL* die Adresse des Stylesheets ein, das Ihre Schrift bereitstellt, und unter *Primäre Schriftart* den Namen der Schriftfamilie – genau so, wie er in der Schrift definiert ist.
Ein Beispiel für eine solche URL: https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap mit der Schriftfamilie Playfair Display. Verwenden Sie hier die Adresse Ihrer eigenen lizenzierten Schrift.
Navigation und Menü
In der Kategorie Navigation & Menü bestimmen Sie unter *Hauptnavigation*, wie die Navigationsleiste am unteren Bildschirmrand aussieht und sich verhält.
Für die schwebende Bottom-Bar können Sie zusätzlich unter *Rahmen & Schatten* den Schatten der Leiste anpassen: horizontaler und vertikaler Versatz, Weichzeichnungs- und Ausbreitungsradius sowie die Schattenfarbe.
| Einstellung | Beschreibung |
|---|---|
| Navigationsstil | Schwebende oder fixe Bottom-Bar |
| Labels anzeigen | Blendet die Beschriftungen unter den Symbolen ein oder aus |
| Beim Scrollen ausblenden | Blendet die Navigationsleiste aus, während Kunden scrollen |
| Übergangseffekt | Art der Animation beim Ein- und Ausblenden |
| Favoriten-Zähler anzeigen | Zeigt die Anzahl der Favoriten am Symbol an |
Styling
Eckenstil
In der Kategorie Styling legen Sie unter *Eckenstil* fest, wie stark Ecken in Ihrer App abgerundet werden. Die Einstellung gilt einheitlich für Produkt- und Kategoriebilder, Karten und Schaltflächen.
Zur Auswahl stehen Leicht abgerundet, Mittel abgerundet, Stark abgerundet, Eckig sowie Benutzerdefiniert. Bei der benutzerdefinierten Option geben Sie den Radius in Pixeln selbst an.
Abstände für Medien-Widgets
Ebenfalls in der Kategorie Styling legen Sie unter *Abstände für Medien-Widgets* den Standardabstand um Bild- und Video-Widgets fest. Sie können Werte für oben, unten, links und rechts getrennt in Pixeln angeben.
Diese Abstände gelten ausschließlich für Bild- und Video-Widgets. Andere Inhalte, wie Produktlisten oder Kategorielisten, bleiben unverändert. Damit Sie die Wirkung in der Vorschau sehen, scrollen Sie dort an eine Stelle, an der ein Bild-Widget dargestellt wird.
Einzelne Widgets können diesen Standardwert überschreiben. Ein Widget mit eigener Abstandseinstellung bleibt von Änderungen an dieser Stelle unberührt.
Karten und Kacheln
In der Kategorie Karten & Kacheln legen Sie unter *Grundstil aller Karten* fest, wie Karten in Ihrer App dargestellt werden. Karten sind abgehobene Container, die zusammengehörige Inhalte bündeln, etwa Positionen im Warenkorb oder Produkte in einem Slider.
| Kartenstil | Darstellung |
|---|---|
| Schatten (Hervorgehoben) | Karten werden mit Schatten vom Hintergrund abgehoben; Stärke und Farbe sind einstellbar |
| Rahmen (Umrandet) | Karten erhalten eine Umrandung; Rahmendicke und -farbe sind einstellbar |
| Flach (Ohne Rahmen) | Karten werden ohne Schatten und ohne Rahmen dargestellt |
Produktdarstellung
Die Kategorie Produkt steuert, wie Produkte in Ihrer App dargestellt werden.
Im Produktraster legen Sie fest, wie viele Produkte nebeneinander erscheinen – getrennt für kleine und große Bildschirmbreiten. Beim Produkt-Slider bestimmen Sie stattdessen, wie viele Produkte gleichzeitig sichtbar sind. Nachkommastellen wie 2,3 sorgen dafür, dass das nächste Produkt angeschnitten zu sehen ist und damit zum Wischen einlädt.
Unter Produktbilder stellen Sie das Seitenverhältnis Ihrer Produktbilder ein. Tragen Sie Breite und Höhe als Verhältnis ein: 1 zu 1 ergibt quadratische Bilder, 3 zu 4 hochkant. Zusätzlich legen Sie die Füllfarbe fest, die bei nicht formatfüllenden Bildern sichtbar wird, sowie einen optionalen Innenschatten.
| Einstellung | Beschreibung |
|---|---|
| Produkte pro Reihe | Anzahl der Produkte nebeneinander im Raster, je Bildschirmbreite |
| Produkte pro Ansicht | Anzahl gleichzeitig sichtbarer Produkte im Slider; Nachkommastellen schneiden das nächste Produkt an |
| Seitenverhältnis | Format der Produktbilder, zum Beispiel 1 zu 1 quadratisch oder 3 zu 4 hochkant |
| Bild-Füllfarbe | Hintergrundfarbe hinter Bildern, die das Format nicht ausfüllen |
Theme-Konfiguration übertragen
Über das Menü mit den drei Punkten rechts oben, übertragen Sie eine fertige Theme-Konfiguration von einem Shop in einen anderen. Das ist zum Beispiel praktisch, wenn Sie eine Gestaltung zuerst in einem Testshop abstimmen und anschließend in Ihren Live-Shop übernehmen möchten.
Theme-Konfiguration herunterladen erzeugt eine JSON-Datei mit den Einstellungen aller Themes. Vor dem Download zeigt Ihnen ein Dialog, woher die Konfiguration stammt.
Theme-Konfiguration hochladen öffnet einen Bereich, in den Sie die heruntergeladene JSON-Datei ziehen können. Alternativ klicken Sie in den Bereich und wählen die Datei aus.
Wichtig: Die Datei enthält ausschließlich Theme-Einstellungen. Seiten und Inhalte werden nicht übertragen.
| Angabe | Bedeutung |
|---|---|
| Händler | Händlerkonto, aus dem die Konfiguration stammt |
| Shop | Shop, aus dem die Konfiguration stammt |
| Stage | Umgebung, etwa Playground oder Live |
| Größe | Dateigröße der JSON-Datei |
Speichern und veröffentlichen
Oben rechts finden Sie die beiden Schaltflächen, mit denen Sie Ihre Arbeit abschließen:
Mit Speichern sichern Sie Ihre Änderungen als Entwurf. In der App Ihrer Kundschaft ändert sich dadurch noch nichts. Sie können die Bearbeitung jederzeit später fortsetzen.
Mit Veröffentlichen übernehmen Sie die Einstellungen für Ihre Shopping-App. Erst dieser Schritt wirkt sich auf die App Ihrer Kundschaft aus.
Haben Sie Fragen zu einzelnen Einstellungen oder wünschen Sie sich eine Option, die hier fehlt? Ihre Ansprechpartner bei Shopgate helfen Ihnen gerne weiter.