Gehen wir zunächst auf den ersten, etwas unscheinbaren Abschnitt ein:
Standardmäßig lässt sich das Theme beliebig vielen Verkaufskanälen der Art "Storefront" zuweisen. Im Umkehrschluss heißt das für dich, dass du mehrere Shops mit nur einer Theme Lizenz betreiben kannst! So kannst du bspw. über das angehängte Kontext-Menü das Theme duplizieren und umbenennen, sodass du es deinen anderen Verkaufskanälen entsprechend anpassen kannst.
Beachte jedoch, dass jedes Theme Duplikat, auch "Child Theme" genannt, die Einstellungen von diesem Theme automatisch vererben wird. Somit nennt man das Ursprungs-Theme, auch "Eltern-" oder "Parent-Theme". Im Duplikat selbst, welches du unter "Inhalte > Themes" anschließend einsehen kannst, kannst du die Vererbungen aufheben und anpassen.
Außerdem kannst du das Theme auf seine Standard Werte zurücksetzen. Beachte jedoch, dass du das Theme danach erneut speichern musst, damit die Standard Werte wieder aktiv werden.
Theme-Farben
Übersicht
Die Farben, die du hier hinterlegst spiegeln sich an unterschiedlichen Stellen deines Shops wider.
Konfiguration
Primärfarbe
Dies ist die Hauptfarbe deines Shops. Sie zieht zieht sich wie ein roter Faden durch alle Unterseiten und färbt verschiedene Elemente in den hier hinterlegten Wert. Ganz konkret sind dies bspw. die Buttons, die Top Bar oder auch die Ankündigungsleiste.
Die Sekundärfarbe dient als Akzentfarbe und tritt an vereinzelten Stellen in deinem Online Shop auf. Ein Beispiel hierfür ist der Button des Gutschein-Einlösefeldes im Offcanvas-Warenkorb.
Wie der Name schon verrät ist diese Farbkonfiguration für die Rahmen in deinem Online Shop verantwortlich. Diese kannst du bspw. an der Trennlinie auf der Produkt Detailseite oder im Warenkorb sehen.
Dies ist die Hintergrundfarbe deines Shops auf allen Seiten. Wir empfehlen diesen komplett weiß oder in einem leichten hellgrau zu halten. Andernfalls kann es schnell passieren, dass der Hintergrund zu stark ablenkt.
Mit dieser Einstellung lässt sich die mobile Browser-Farbe anpassen. Jedoch unterstützt nicht jeder Browser dieses Feature. Daher kann unter Umständen in manchen Browsern immer noch eine Standard-Systemfarbe dargestellt werden.
Status-Ausgaben
Übersicht
Die Status-Ausgaben treten bei Interaktion mit dem Online Shop an unterschiedlichen stellen auf. Im Allgemeinen sind dies Meldungen, welche den Besucher über verschiedene Ereignisse in deinem Shopware Shop informieren. Im folgenden siehst du ein paar Beispiele:
In diesem Abschnitt findest du alles was mit dem Schriftbild deines Online Shops zu tun hat. So kannst du hier Fließtext, Überschriften und Links nach deinen Vorstellungen anpassen.
Konfiguration
Schriftart Text
An dieser Stelle hinterlegst du die Schriftart für deinen Fließtext. Der Name der Schriftart muss hierbei in einfachen Anführungszeichen stehen. Standardmäßig ist hier die Schriftart 'Open Sans' integriert.
Anschließen empfiehlt es sich immer kommagetrennt mit system-ui, sans-serif oder system-ui, serif abzuschließen. Dies ist die Browser Ausweichschriftart, falls die eigentliche Schriftart nicht geladen werden konnte. Je nachdem ob du eine serifen oder serifenlose Schriftart hinterlegst, wählst du den entsprechenden Wert.
Bitte beachte, dass sich die Schriftart, welche du verwenden möchtest, auch auf deinem Server befindet. Diese lässt sich entweder händisch oder mit einer App aus dem Shopware Store hochladen. Eine direkte Einbindung über einen Google Link empfehlen wir aus datenschutzrechtlichen Gründen nicht. Voreingestellte verfügbare Schriftarten sind: 'Open Sans', 'Raleway' und 'Inter'.
Textfarbe
Dies ist die verwendete Schriftfarbe für deinen Fließtext im Shop.
An dieser Stelle hinterlegst du die Schriftart für deine Überschriften. Der Name der Schriftart muss hierbei in einfachen Anführungszeichen stehen. Standardmäßig ist hier die Schriftart 'Raleway' integriert.
Anschließen empfiehlt es sich immer kommagetrennt mit system-ui, sans-serif oder system-ui, serif abzuschließen. Dies ist die Browser Ausweichschriftart, falls die eigentliche Schriftart nicht geladen werden konnte. Je nachdem ob du eine serifen oder serifenlose Schriftart hinterlegst, wählst du den entsprechenden Wert.
Bitte beachte, dass sich die Schriftart, welche du verwenden möchtest, auch auf deinem Server befindet. Diese lässt sich entweder händisch oder mit einer App aus dem Shopware Store hochladen. Eine direkte Einbindung über einen Google Link empfehlen wir aus datenschutzrechtlichen Gründen nicht. Voreingestellte verfügbare Schriftarten sind: 'Open Sans', 'Raleway' und 'Inter'.
Überschriftfarbe
Dies ist die verwendete Schriftfarbe für deine Überschriften im Shop.
Das Theme bietet dir die Möglichkeit deine Links in unterschiedlichen Designs darzustellen. Diese wirken sich ins besondere auf den Hover-Effekt aus. Diesen kannst du dir bspw. auf der Produkt Detailseite am Hinweis "Preise inkl. MwSt. zzgl. Versandkosten" ansehen.
Unterstrichen:
Unterstrichen mit Animation:
Link Farbe
Dies ist die verwendete Schriftfarbe für deine Links im Shop.
Die Link Dekorations Farbe stellt die Farbe der Unterstreichung deiner Links dar.
Kontrast Schwellenwert
Das Kontrastverhältnis bestimmt, wann die Helligkeit der Farbe von "dunkel" zu "hell" wechselt.
Akzeptable Werte der Web Content Accessibility Guidelines (WCAG) 2.0 sind 3, 4.5 und 7. Dieser Wert berechnet, wann eine Vordergrundfarbe auf einem Hintergrund "dunkel" oder "hell" dargestellt wird. Beispielsweise errechnet sich so die Textfarbe auf einem Primärbutton.
E-Commerce
Übersicht
In diesem Bereich kannst du die wichtigsten E-Commerce Farben in deinem Shop definieren. Dazu gehören deine Preisauszeichnungen, sowie die Kaufen-Buttons, welche an unterschiedlichen Stellen in deinem Shop vorkommen.
Konfiguration
Preis
Diese Farbe wird für jede Preisauszeichnung in deinem Shop verwendet.
Hier wird standardmäßig die Textfarbe als Variable übernommen, welche du im Abschnitt Typografie definiert hast.
Dieser Abschnitt ermöglicht dir dein eigenes Logo in deinen Shopware Shop zu integrieren. Standardmäßig sind hier Platzhalter definiert, welche du einfach austauschen kannst. Hebe dafür die Bildverknüpfung einfach mit dem "✕" an der rechten Seite auf.
Falls vorhanden empfehlen wir dir .svg Dateien für deine Medien an dieser Stelle zu verwenden. Diese bieten dir i.d.R. die beste Auflösung auf eine kleine Dateigröße.
Konfiguration
Desktop
Das Logo, welches du an dieser Stelle hinterlegst, wird nur für Desktop Bildschirme angezeigt.
Tablet
Das Logo, welches du an dieser Stelle hinterlegst, wird nur für Tablets angezeigt.
Mobil
Das Logo, welches du an dieser Stelle hinterlegst, wird nur für Smartphones angezeigt.
App- & Share-Icon
Das Logo, welches du an dieser Stelle hinterlegst, wird als Vorschau angezeigt, wenn dein Shop in sozialen Netzwerken geteilt wird.
Favicon
Das Logo, welches du an dieser Stelle hinterlegst, wird im Browser Tab und in den Suchresultaten der Suchmaschine angezeigt.
Footer
Das Logo, welches du an dieser Stelle hinterlegst, wird in deinem Footer angezeigt. Standardmäßig wird dort dein Desktop Logo verwendet. Ein abweichendes Bild kann jedoch Sinn machen. Beispielsweise wenn du in der Footer-Konfiguration einen dunklen Hintergrund verwendest und dein Logo unterhalb der Service-Hotline somit nicht mehr gut zu erkennen wäre.
Checkout
Das Logo, welches du an dieser Stelle hinterlegst, wird in deinem Checkout angezeigt. Standardmäßig wird dort dein Desktop Logo verwendet. Ein abweichendes Bild kann jedoch Sinn machen. Beispielsweise wenn du in der Header-Konfiguration einen dunklen Hintergrund verwendest und dein Logo somit nicht mehr gut zu erkennen wäre.
Layout
Übersicht
Der Layout-Abschnitt umfasst allgemeine Einstellungen, welche in deinem Shop global Anwendung finden.
Konfiguration
Maximale Containerbreite (in px)
Mit diesem Feld definierst du die globale Breite deines Shops. Das folgende Bild veranschaulicht das ganze etwas besser:
Abgerundete Ecken (in px)
Mit dem Theme entstehen Rahmen und Ecken an unterschiedlichen Elementen und Stellen in deinem Shop. Ein Beispiel hierfür sind die Buttons. Mit dieser Option kannst du festlegen, ob und wie stark deine Ecken abgerundet werden sollen. Je höher der Wert, desto stärkere Rundungen entstehen.
Icon-Set
Das gewählte Icon-Set bietet dir teilweise unterschiedlich aussehende Icons für deinen Shop. Folgende Bilder veranschaulichen dir beispielhaft die unterschiedlichen Icons für die Header Aktionen:
Icon-Set 1:
Icon-Set 2:
Icon-Set 3:
Button Hover Effekt
Mit dieser Option kannst du unterschiedliche Hover Effekte für deine Buttons festlegen.
Standard:
Schimmer:
Schatten
Dieser Wert repräsentiert die Farbe und Härte deiner Schatten an unterschiedlichen Stellen in deinem Shop.
Scroll-Up Button
Anzeigen
Mit dieser Einstellung kannst du den Scroll-Up Button in deinem Shop einblenden. Dieser erscheint rechts unten sobald der Besucher die Seite ein wenig nach unten scrollt. Er ermöglicht es mit einem Klick automatisch wieder ganz nach oben zur Seite zu gelangen.
Ausblenden
Der Scroll-Up-Button wird deaktiviert.
Produktbilder
Übersicht
Gute Produktbilder sind im E-Commerce das A und O. Treffe daher in diesem Abschnitt die richtige Konfiguration zur optimalen Darstellung deiner Artikelbilder auf allen Endgeräten.
Konfiguration
Seitenverhältnis der Produktbilder
Damit das Theme die Produktbilder an unterschiedlichen Stellen auch richtig skalieren kann, ist es notwendig hier das entsprechende Seitenverhältnis zu hinterlegen, in welchem du deine Artikelbilder hochgeladen hast. Der Standardwert ist hierbei "1:1 Quadratisch".
Formulare
Übersicht
Hier kannst du Farbkonfigurationen für deine Formularfelder vornehmen. Diese findest du bspw. auf der Login- und Registrierungs-Seite.
Konfiguration
Rahmen
Dieses Feld stellt die Rahmenfarbe deiner Formularfelder dar.
Rahmen Fokus
Diese Rahmenfarbe erscheint, wenn du ein Formularfeld anklickst/fokussierst.
Google Bewertungen
Übersicht
Mit dem Theme lassen sich deine Google Bewertungen vollkommen kostenlos in nur wenigen Schritten integrieren. Standardmäßig werden die Bewertungen in der Top Bar ausgegeben. Im folgenden Video zeigen wir dir alle notwendigen Schritte. Nachfolgend findest du die einzelnen Schritte inkl. Links ebenfalls noch in Textform aufgeführt.
Konfiguration
Google Maps API-Schlüssel
Ermittle deinen Google Maps API-Schlüssel wie folgt:
Erstelle, soweit noch nicht vorhanden, ein Projekt an der oberen Leiste.
Klicke auf das Navigationsmenü in der linken oberen Ecke und danach auf "Abrechnung".
Erstelle, soweit noch nicht vorhanden, ein Rechnungskonto inkl. Zahlungsmethode. Reale Kosten werden hierbei nicht auf dich zukommen. Das Theme fragt die Bewertungen nur einmal pro Tag ab, aktualisiert sie ggf. und speichert diese in Shopware 6 zwischen. Dies bewegt sich im kostenlosen Rahmen von Google.
Öffne das Navigationsmenü erneut und begebe dich zu "APIs und Dienste > Bibliothek".
Suche in der Suchleiste nach "Places API".
Klicke auf das entsprechende Suchergebnis und aktiviere die API.
Aktiviere zusätzlich die "Maps JavaScript API" unter "Zusätzliche APIs".
Öffne das Navigationsmenü und begebe dich zu "APIs und Dienste > Anmeldedaten".
Klicke auf "Create Credentials" und danach auf "API Schlüssel", falls noch kein API Schlüssel vorhanden sein sollte.
Kopiere den API-Schlüssel und füge ihn in die App Konfiguration ein.
Google Maps Place ID
Die Place ID dient als eindeutige Zuordnung für deinen Account. Diese lässt sich ganz leicht über die Suche ermitteln. Gib dafür lediglich den Namen deines Unternehmens ein, wie du es von der herkömmlichen Google Maps Suche kennst. Anschließend wird dir deine Place ID angezeigt, welche du in dieses Feld kopierst.
Google Maps Bibliothek laden
Damit die Google Bewertungen geladen werden können wird die entsprechende Bibliothek von Google benötigt. Bestätige die Integration daher an dieser Stelle mit "Ja".
Social
Übersicht
An dieser Stelle hinterlegst du die Links zu deinen Social Media Profilen. Die Icons für die Plattformen können dabei an unterschiedlichen Stellen in deinem Shop eingeblendet werden. So kannst du sie über die nachfolgenden Konfigurationen bspw. im Header, Footer oder mobilen Offcanvas-Menü anzeigen. Standardmäßig werden diese ohne weitere Konfiguration an den meisten Stellen automatisch integriert.