Theme-Einstellungen

Theme-Einstellungen öffnen

  1. Klicke im Hauptmenü auf Online-Shop und wähle dann Themes.
  2. Klicke am Design Vista auf Anpassen, der Theme-Konfigurator wird angezeigt.

Theme-Konfigurator öffnen

Einstellungen öffnen

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 →
Einstellungen Logo und Favicon

  • Lade dein Logo und passe die Höhe des Logobildes mit dem Padding 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.
Favicon


Farben

Video in der Akademie anschauen →
Farbschemata anlegen

Du legst vorab Farbschemata an, in denen du für alle Elemente des Designs die Farben festlegst:
Farben auswählen

Danach kannst du jedem Abschnitt des Designs ein Farbschema zuordnen und so mit einem Klick Akzente setzen.


Typografie

Video in der Akademie anschauen →
Typografie

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.
Absatz und Überschriften

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 wieder die Schriftgröße und die Zeilenhöhe. Genau wie diese kann der Zeichenabstand normal, eng oder locker eingestellt werden.
  • Und 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 →
Seiten-Layout
Unter "Seitenlayout" stellst du die Seitenbreite 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 Elementen für die Startseite und die anderen Seiten die Breite der Elemente nochmals individuell einstellen.


Badges

Video in der Akademie anschauen →
Badges

Mit "Badges" sind die kleinen Banner gemeint, die an den Produkten angezeigt werden, wenn sie einen Streichpreis haben (Sale), oder ausverkauft sind.

  • Position auf der Karte einstellen: Oben rechts (hier abgebildet), oben links und unten links.
  • Den Eckenradius festlegen (hier: 100% = maximal rund).
  • Farbschemata für beide Banner festlegen.
  • Die Schriftart einstellen und die Schreibweise in normalen Groß-Kleinschreibung oder Großbuchstaben wählen.

Schaltflächen

Video in der Akademie anschauen →
Schaltflächen

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 Rundung, sondern eine spitze Ecke.

Unter “Schriftart” kannst du zwischen den vorab unter “Typografie” eingerichteten Schriftstilen "Text" oder "Akzent" wählen.

Die Schreibweise kann im Standard mit normaler Groß-Kleinschreibung oder in Großbuchstaben eingestellt werden.

Die gleichen Einstellungen stehen dir auch für die sekundären Buttons zur Verfügung.


Warenkorb

Video in der Akademie anschauen →
Warenkorb

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:
Warenkorb-Drawer

Bei Umstellung des Typs auf “Seite” führt der Klick auf das Warenkorb-Symbol zur Anzeige der Warenkorbseite:
Warenkorb-Seite

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

Warenkorb-Alle Einstellungen