Theme-Einstellungen
Theme-Einstellungen öffnen
- Klicke im Hauptmenü auf Online-Shop und wähle dann Themes.
- Klicke am Design Vista auf Anpassen, der Theme-Konfigurator wird angezeigt.
Der Theme-Konfigurator bietet zwei Ansichten: Einstellungen und Abschnitte. Die Ansicht Einstellungen ist beim Start automatisch aktiviert (Zahnrad-Symbol).
Videos zu allen wichtigen Einstellungen in der Akademie →
Logo & Favicon
Video in der Akademie anschauen →
- Lade dein Logo und passe die Höhe des Logobildes für die Desktop- und die mobile Ansicht an.
- Wenn du die Farbgebung des Headers invertiert zeigen möchtest, dann lade bei Bedarf auch ein Logo in invertierten Farben.
- Lade das Favicon hoch.
Das Favicon ist das kleine Bild, das im Reiter des Browsers angezeigt wird. Es sollte maximal 40 Pixel hoch sein.
Farben
Video in der Akademie anschauen →
Du legst vorab Farbschemata an, in denen du für alle Elemente des Designs die Farben festlegst:
Danach kannst du jedem Abschnitt des Designs ein Farbschema zuordnen und so mit einem Klick farbliche Akzente setzen.
Typografie
Video in der Akademie anschauen →
Unter Typografie stellst du die Schriftarten und Größen ein.
Zunächst wählst du die Schriftarten für die vier Bereiche Text, Unterüberschriften, Überschriften und Akzente. Dir steht hierfür eine große Auswahl an Schriften zur Verfügung.
Danach kannst du für alle Schriftstile Feineinstellungen vornehmen.
Mit “Absatz” wird der normale Text bezeichnet. Hier kannst du nur die Schriftgröße und die Zeilenhöhe bestimmen.
Für Überschrift 1 und alle folgenden Elemente gibt es zusätzliche Einstellungen:
- Unter "Schriftart” hast du die Wahl zwischen Überschrift und Akzent. Die Voreinstellungen für diese Schriftstile haben wir ja eben oben gesehen und du kannst sie entsprechend anpassen.
- Darunter stellst du die Schriftgröße und die Zeilenhöhe ein.
- Genau wie der Zeilenabstand kann der Zeichenabstand auf normal, eng oder locker gestellt werden.
- Die Schreibweise ist entweder mit normaler Groß-Kleinschreibung oder nur mit Großbuchstaben möglich.
Diese Einstellungen stehen dir für alle 6 Überschriften-Größen zur Verfügung.
Seitenlayout
Video in der Akademie anschauen →
Unter "Seitenlayout" stellst du die Seitenbreite für die Desktop-Ansicht ein.
- "Schmal" ergibt einen weißen Streifen links und rechts.
- Bei der Einstellung “Normal” ist der Rand an den Seiten schmaler.
- Und bei “Breit” reicht die Seite bis zum Bildschirmrand.
Du kannst später bei vielen Abschnitten, die du auf der Startseite oder anderen Seiten einfügst, die Breite der Elemente nochmals individuell einstellen.
Badges
Video in der Akademie anschauen →
Mit "Badges" sind die kleinen Banner gemeint, die an den Produkten angezeigt werden, wenn sie einen Streichpreis haben (Sale), oder ausverkauft sind. Deine Optionen hier:
- Position auf der Karte einstellen: Oben rechts (hier abgebildet), oben links oder unten links.
- Den Eckenradius festlegen (hier: 100% = maximal rund).
- Farbschemata für beide Banner festlegen.
- Die Schriftart einstellen.
- Die Schreibweise in normaler Groß-Kleinschreibung oder Großbuchstaben wählen.
Schaltflächen
Video in der Akademie anschauen →
Mit “Schaltflächen” sind die Buttons gemeint. Primäre Schaltflächen sind gefüllt. Sekundäre Schaltflächen werden mit einem Rand dargestellt. Die Farbgebung für diese Buttons stellst du im Abschnitt “Farben” ein.
Beide Schaltflächen bieten die gleichen Einstell-Möglichkeiten.
Wenn du die Randstärke erhöhst, dann wird der Rand im unter “Farben” gewählten Farbton und der hier eingestellten Randstärke dargestellt.
Der Eckenradius rundet die Ecken ab, in diesem Fall - bei der Einstellung “0px” - gibt es keine Rundungen, sondern spitze Ecken.
Unter “Schriftart” kannst du zwischen den vorab unter “Typografie” eingerichteten Schriftstilen "Text" oder "Akzent" wählen.
Die Schreibweise kann mit normaler Groß-Kleinschreibung oder in Großbuchstaben gewählt werden.
Die gleichen Einstellungen stehen dir auch für die sekundären Buttons zur Verfügung.
Warenkorb
Video in der Akademie anschauen →
Tipp: Bevor du die Einstellungen machst, lege einige Produkte in den Warenkorb, dann kannst du die Wirkung deiner Anpassungen besser beurteilen.
Die erste Einstellung für den Warenkorb bezieht sich auf die Darstellung. “Drawer” - englisch für Schublade - bedeutet, dass der Warenkorb wie eine Lade herausfährt. Wenn du rechts oben auf das Warenkorb-Symbol klickst, kannst du es ausprobieren:
Bei Umstellung des Typs auf “Seite” führt der Klick auf das Warenkorb-Symbol zur Anzeige der Warenkorbseite:
- Die Produkttitel werden im “Standard” mit normaler Groß-Kleinschreibung angezeigt. Dies kannst du umstellen auf Großbuchstaben.
- Die Schriftarten für die Preise kannst du hier auswählen. Ihr Aussehen stellst du ein unter “Typografie”.
- Schalte das Notizfeld ein, sodass deine Kunden dir Nachrichten an ihrer Bestellung senden können.
- Wenn du mit Rabattcodes arbeitest, dann aktiviere diese Funktion und deine Kunden können ihre Codes hier eintragen.
Drawers
Video in der Akademie anschauen →
Drawers - englisch für Schublade - sind Elemente, die vom Bildschirmrand wie eine Lade hineingefahren werden. Zum Beispiel kann der Warenkorb als Drawer angezeigt werden, wenn rechts oben auf das Warenkorb-Symbol geklickt wird.
Wie bei allen Elementen, kannst du dem Drawer hier ein zuvor unter “Farben” vorbereitetes Farbschema zuweisen.
Wenn du “Ränder” einschaltest, wird die im Farbschema verwendete Farbe für Ränder hier verwendet und du kannst außerdem die Randstärke und die Deckkraft der Randfarbe einstellen.
Symbole
Hier kannst du die Strickstärke der Symbole einstellen, die in einigen Abschnitten verwendet werden.
Eingabefelder
Eingabefelder sind Formularfelder, wie hier das Feld zur Eingabe der E-Mail-Adresse.
Du kannst Randstärke, Eckenradius und Textart einstellen.
Popovers und modale Fenster
Ein Beispiel für solche über dem Content liegenden Fenster ist die Suche.
Hier kannst du
- das Farbschema für diese Fenster auswählen.
- den Eckenradius einstellen.
- einen Rand einschalten, dessen Farbe du im Farbschema festgelegt hast.
- einen Schlagschatten einschalten, der den gesamten Hintergrund abdunkelt, so wie auf dem Bild zu sehen.
Produktkarten
Produktkarten werden in Gruppendarstellungen der Produkte verwendet, wie hier auf der Startseite und auch auf den Produktgruppen-Seiten.
Wenn du "Quick Add" aktivierst, wird - wir hier auf dem Bild zu sehen - an den Produkten direkt der Warenkorb-Button angezeigt, wenn mit der Maus über das Produkt gerollt wird. In der mobilen Ansicht ist der Quick-Add-Button immer sichtbar.
Du kannst dem Quick-Add-Button ein Farbschema zuordnen.
Unter "Medien" kannst du das zweite Produktbild anzeigen lassen, wenn über das Produkt gerollt wird (nur bei Desktop-Ansicht).
Für die mobile Ansicht steht dir die Funktion "Karussell" zur Verfügung, sodass die Produktkarten zur Seite gewischt werden können, um mehr Produkte zu sehen.
Suche
Beim Klick auf das Lupen-Symbol oben rechts wird das Suchfenster als sogenanntes Popup- oder Modalfenster angezeigt. Das Aussehen des Fensters stellst du unter "Popovers und modale Fenster" ein (siehe oben).
Du kannst eine Produktgruppe in dem Fenster anzeigen, wenn noch kein Suchbegriff eingegeben wurde.
Die weiteren Einstellungen für das Suchfenster:
- Eckenradius des Produkts
- Eckenradius der Produktkarte
- Schreibweise für die Produkt- und Kartentitel: Groß-Kleinschreibung oder Großbuchstaben