Grundeinstellungen

In diesem Beitrag erkläre ich dir, wie du grundlegende Einstellungen vornimmst, die das Theme maßgeblich beeinflussen.

Die folgenden Einstellungsmöglichkeiten ziehen sich durch das gesamte Theme und demnach durch das gesamte Frontend deines Shops. Die einzelnen Punkte im Screenshot erläutere ich dir weiter unten im Detail.

Auszug aus den Theme Einstellungen

1) Generelle Farben des Themes

Die Farben, die du hier einträgst, ziehen sich durch das gesamte Frontend. Beispielsweise wird die Primärfarbe für viele Bereiche, wie bspw. Buttons, Highlights im Listing oder Checkout verwendet.

$sw-color-brand-primary - was ist das?

Das ist eine Variable. Genauer gesagt, ist es die Variable für die Primärfarbe des Shops. Wenn du also $sw-color-brand-primary in Farbfelder einträgst, wird die Primärfarbe des Shops weitervererbt und du musst diese hinterher nur noch an einer Stelle ändern.

Ich habe das Theme soweit möglich für dich vorkonfiguriert. Du wirst häufiger Variablennamen in den Theme Einstellungen zu sehen bekommen, damit du es möglichst einfach hast, das Theme lediglich mit den Grundeinstellungen zu 90% anpassen zu können.

Die Variablen kannst du selbstverständlich mit Werten deiner Wahl austauschen.

2) Grundlegende Schrifteinstellungen

Hier setzt du die Schriftarten deines Shops und die Farben dieser. Beachte, dass du das entsprechende Format für die Einbindung der Schriftart beibehältst:

Beispiel: 'Open Sans', sans-serif

'Open Sans' wäre in diesem Fall die Schriftart. Alles das, was nach dem Komma kommt, wäre eine so genannte Fallback Schriftart (Alternativschriftart), wenn die eigentliche Schriftart nicht gefunden, oder auf entsprechenden Endgeräten nicht angezeigt werden kann.

Wie du eigene Schriften hochlädst, habe ich dir in einem anderen Beitrag erklärt.

pageEigene Fonts einbinden

3) Logos und Icons

• Desktop, Tablet, Mobil Ich empfehle dir, verschiedene Versionen deines Logos zu verwenden. Auf Desktopgeräten spielt die Größe deines Logos weniger eine Rolle, als bspw. auf mobilen Endgeräten.

• App- & Share-Icon Dieses Logo/Icon wird angezeigt, wenn jemand deinen Shop über soziale Medien oder bspw. Whatsapp verschickt. In der Vorschau des Links erscheint dann das Logo.

• Favicon Dieses Icon wird im Browserfenster neben dem Titel der Website angezeigt.

• Checkout Manchmal macht es Sinn, für den Checkoutbereich des Shops ein anderes Logo hochzuladen, als im restlichen Shop.

Achte auf hochauflösende Logos, am besten nutzt du .svg Logos. Alternativ solltest du immer transparente .png Logos verwenden, da diese deutlich besser in Hintergrundfarben integriert werden können.

4) Allgemeine Erlebniswelten - Einstellungen

Die Erlebniswelten von Shopwere beschreiben quasi den gesamten Contentbereich zwischen Header und Footer des Shops. Die Erlebniswelten erstellst du, indem du einzelne Contentblöcke per Drag&Drop auf die Inhaltsseite ziehst. Du kannst den Blöcken in den Erlebniswelten jeweils entsprechende Eigenschaften mitgeben, aber in den Grundeinstellungen des Themes kannst du quasi die Standardwerte festlegen.

So musst du nicht jeden einzelnen Block abändern, wenn du mal die Farbe oder einen Abstand tauschen möchtest. Es erspart unfassbar viel Aufwand.