Alle Seiten
Bereitgestellt von GitBook
1 von 12

Allgemein

VerwaltungTheme-FarbenStatus-AusgabenTypografieE-CommerceMedienLayoutProduktbilderFormulareGoogle BewertungenSocial

Verwaltung

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.


Variable: $sw-color-brand-primary

Sekundärfarbe

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.


Variable: $sw-color-brand-secondary

Rahmen

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.


Variable: $sw-border-color

Hintergrund

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.


Variable: $sw-background-color

Browser-Farbe

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:

Erfolgreiche Status-Ausgabe
Informative Status-Ausgabe
Warnende Status-Ausgabe
Fehlerhafte Status-Ausgabe

Konfiguration

Erfolg

Die Farbe für erfolgreiche Status-Ausgaben.


Variable: $sw-color-success

Information

Die Farbe für informative Status-Ausgaben.


Variable: $sw-color-info

Hinweis

Die Farbe für warnende Status-Ausgaben.


Variable: $sw-color-warning

Fehler

Die Farbe für fehlerhafte Status-Ausgaben.


Variable: $sw-color-danger

Typografie

Übersicht

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.


Variable: $sw-text-color

Schriftart Überschrift

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.


Variable: $sw-headline-color

Link Style

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:

Katana

Unterstrichen mit Animation:

Bonsai

Link Farbe

Dies ist die verwendete Schriftfarbe für deine Links im Shop.


Variable: $atl-link-color

Link Dekorations Farbe

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.

Kaufen-Button

Dieses Feld definiert die Farbe deiner Kaufen-Buttons.


Hier wird standardmäßig die Primärfarbe als Variable übernommen, welche du im Abschnitt Theme-Farben definiert hast.

Kaufen-Button-Text

Dies ist die Textfarbe innerhalb deiner Kaufen-Buttons.

Bewertungs-Icon Farbe

Mit dieser Einstellung kannst du die Farbe der Bewertungs-Sterne anpassen, welche an unterschiedlichen Stellen im Shop angezeigt werden.

Details-Button

Dieses Feld definiert die Farbe deiner Details-Buttons.

Details-Button-Text

Dies ist die Textfarbe innerhalb deiner Details-Buttons.

Medien

Übersicht

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:

Katana Icon-Set

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:

  1. Logge dich in der Google Cloud Platform mit deinem Unternehmenskonto an.

  2. Erstelle, soweit noch nicht vorhanden, ein Projekt an der oberen Leiste.

  3. Klicke auf das Navigationsmenü in der linken oberen Ecke und danach auf "Abrechnung".

  4. 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.

  5. Öffne das Navigationsmenü erneut und begebe dich zu "APIs und Dienste > Bibliothek".

  6. Suche in der Suchleiste nach "Places API".

  7. Klicke auf das entsprechende Suchergebnis und aktiviere die API.

  8. Aktiviere zusätzlich die "Maps JavaScript API" unter "Zusätzliche APIs".

  9. Öffne das Navigationsmenü und begebe dich zu "APIs und Dienste > Anmeldedaten".

  10. Klicke auf "Create Credentials" und danach auf "API Schlüssel", falls noch kein API Schlüssel vorhanden sein sollte.

  11. 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.

Konfiguration