Theme-Einstellungen

Theme-Einstellungen sind globale Einstellungen. Sie gelten für jede Seite deines Shops. Auf dieser Seite erklären wir jede Gruppe in den Theme-Einstellungen, in der Reihenfolge, in der du sie im Theme-Editor siehst.

So öffnest du die Theme-Einstellungen:

1. Öffne Onlineshop → Themes.
2. Wähle auf der Karte des Tenora-Themes Anpassen.
3. Wähle im Theme-Editor Theme-Einstellungen (das Zahnradsymbol).

Die unten empfohlenen Werte sind die Standardwerte des Tenora-Presets, sofern der Text nichts anderes sagt.

Logo und Favicon

Einstellung	Funktion	Empfohlener Wert
Logo	Das Logobild im Header und auf der Passwortseite. Ohne Logo zeigt der Header deinen Shopnamen als Text.	Eine transparente .png- oder .svg-Datei
Logobreite	Die Breite des Logos, von 40 bis 300px.	120px
Favicon-Bild	Das kleine Symbol im Browser-Tab.	Eine .png-Datei mit 32 x 32px

Tipps

• Das Logo ist im Header nie höher als 56px. Ein hohes Logo bleibt kompakt, daher sieht ein breites Logo meist am besten aus.
• Das Logo verwendet den Alt-Text des Bildes. Hat das Bild keinen Alt-Text, wird der Shopname verwendet. Füge den Alt-Text des Logos unter Inhalt → Dateien hinzu.
• Shopnamen ohne Logo, die länger als 18 Zeichen sind, werden in einer kleineren Schriftgröße angezeigt. Bei einem langen Shopnamen empfehlen wir, ein Logo hochzuladen.
• Für eine helle Version deines Logos über dem Bild-Banner verwende die Einstellung Logo für transparenten Header im Abschnitt Header.

Farben

Farbschemas

Ein Farbschema ist eine Gruppe von Farben, die du einem Abschnitt zuweist. Tenora hat 5 Farbschemas. Die meisten Abschnitte haben die Einstellung Farbschema, sodass du für jeden Abschnitt ein anderes Schema wählen kannst.

Jedes Farbschema enthält diese Farben:

Farbe	Wo sie verwendet wird
Hintergrund	Der Hintergrund des Abschnitts
Text	Überschriften, Fließtext und Symbole
Akzent	Links, aktive Zustände und die Details der Maßlinien
Button-Hintergrund	Der Hintergrund gefüllter Buttons
Button-Beschriftung	Der Text auf gefüllten Buttons
Beschriftung Outline-Button	Text und Rahmen von Outline-Buttons

So bearbeitest du ein Farbschema:

1. Öffne Theme-Einstellungen → Farben.
2. Wähle das Farbschema, das du ändern möchtest.
3. Ändere die Farben. Die Vorschau wird sofort aktualisiert.
4. Wähle Speichern.

Empfehlungen

• Halte ein Kontrastverhältnis von mindestens 4.5:1 zwischen Text und Hintergrund sowie zwischen Button-Beschriftung und Button-Hintergrund ein. Alle Farbpaare in den drei Presets erfüllen dieses Niveau (WCAG AA).
• Nutze wie in den Presets ein helles Schema für die meisten Seiten und ein dunkles Schema für die Fußzeile.
• Fehler- und Erfolgsmeldungen verwenden die Textfarbe des Schemas mit einem farbigen Symbol. So bleiben sie in jedem Schema lesbar.

Oberflächen

Einstellung	Funktion	Empfohlener Wert
Körnung anzeigen	Fügt Hintergründen eine dezente, papierartige Struktur hinzu.	An für helle, natürliche Stile (Tenora, Terrace). Aus für dunkle Stile (Lantern).

Typografie

Überschriften

Einstellung	Funktion	Empfohlener Wert
Schriftart	Die Schriftart für Überschriften. Wähle aus der Shopify-Schriftbibliothek.	Cormorant (Tenora), Fraunces (Terrace), Bodoni Moda (Lantern)
Skalierung der Überschriftengrößen	Legt fest, wie viel größer jede Überschriftenebene als der Fließtext ist. Optionen: Kompakt, Ausgewogen, Ausdrucksstark.	Ausgewogen
Groß-/Kleinschreibung	Standard übernimmt deinen Text so, wie du ihn eingegeben hast. Großbuchstaben zeigt Überschriften in Großbuchstaben.	Standard

Fließtext

Einstellung	Funktion	Empfohlener Wert
Schriftart	Die Schriftart für Fließtext, Buttons und Beschriftungen.	Instrument Sans (Tenora), Work Sans (Terrace), Manrope (Lantern)
Schriftgröße	Die Basis-Textgröße, von 14 bis 20px.	16px

Tipp: Wähle Schriftarten, die die Zeichen aller deiner Shop-Sprachen enthalten. Manche Schriftarten unterstützen nicht jedes Alphabet. Fehlt ein Zeichen, zeigt der Browser dafür eine Ersatzschrift an.

Layout

Einstellung	Funktion	Empfohlener Wert
Seitenbreite	Die maximale Breite des Inhalts. Optionen: Schmal (1200px), Standard (1440px), Breit (1680px).	Standard
Seitenrand	Der Abstand links und rechts auf der Seite, von 16 bis 80px. Auf kleinen Bildschirmen wird er automatisch verkleinert.	48px
Abschnittsabstand	Skaliert das obere und untere Padding jedes Abschnitts. Optionen: Kompakt, Standard, Großzügig.	Standard
Rasterabstand	Der Abstand zwischen Elementen in Rastern, etwa Produktkarten, von 8 bis 48px.	24px

Buttons

Einstellung	Funktion	Empfohlener Wert
Eckenradius	Rundet die Ecken von Buttons ab, von 0 bis 40px. 0 ergibt eckige Ecken.	0px (Tenora, Lantern), 24px (Terrace)
Rahmenstärke	Die Rahmenbreite von Outline-Buttons, von 1 bis 3px.	1px
Groß-/Kleinschreibung	Button-Beschriftungen in Standard oder Großbuchstaben.	Großbuchstaben (Tenora, Lantern), Standard (Terrace)

Gebrandete Zahlungsbuttons wie Shop Pay behalten ihre eigenen Farben und ihren eigenen Stil. Das Theme ändert sie nicht.

Eingabefelder

Diese Einstellungen gelten für Formularfelder, etwa die Mengenauswahl, das Feld der E-Mail-Anmeldung, die Felder von „Passt es?“ und die Felder des Kontaktformulars.

Einstellung	Funktion	Empfohlener Wert
Eckenradius	Rundet die Ecken von Feldern ab, von 0 bis 24px.	Passend zu deinem Button-Stil: 0px bei eckigen Buttons, etwa 8px bei abgerundeten Buttons
Rahmenstärke	Die Rahmenbreite von Feldern, von 1 bis 3px.	1px

Produkt- und Kollektionskarten

Einstellung	Funktion	Empfohlener Wert
Stil	Das Aussehen der Produktkarten. Standard zeigt nur Bild und Text. Gerahmt setzt die Karte mit Padding auf eine helle Fläche. Muster fügt dem Kartenbild einen Materialmuster-Reiter hinzu.	Muster (Tenora), Standard (Terrace), Gerahmt (Lantern)
Bildverhältnis	Die Form der Kartenbilder. Optionen: An Bild anpassen, Hochformat, Quadratisch, Querformat.	Hochformat für Möbelfotos, Quadratisch für Leuchten und kleine Artikel
Eckenradius	Rundet die Ecken von Karten ab, von 0 bis 24px.	0px, oder 8px bei abgerundeten Buttons

Tipp: Mit An Bild anpassen verwendet jede Karte die Form ihres eigenen Produktbilds. Nutze diese Option nur, wenn alle deine Produktbilder dieselbe Form haben. Sonst wirkt das Raster unruhig.

Währungsformat

Einstellung	Funktion	Empfohlener Wert
Währungscodes anzeigen	Zeigt Preise mit Währungscode an, zum Beispiel „$12.00 USD“ statt „$12.00“ – auf Produktseiten, Produktkarten, im Warenkorb und im Warenkorb-Einschub.	An, wenn du in mehreren Währungen mit demselben Symbol verkaufst, etwa USD, CAD und AUD. Sonst aus.

Die geschätzte Gesamtsumme im Warenkorb zeigt immer den Währungscode. Weitere Informationen findest du unter International verkaufen.

Warenkorb

Einstellung	Funktion	Empfohlener Wert
Warenkorbtyp	Einschub öffnet den Warenkorb als Seitenpanel, wenn Kunden ein Produkt hinzufügen oder das Warenkorbsymbol wählen. Seite führt Kunden zur Warenkorbseite.	Einschub
Bestellnotiz anzeigen	Zeigt im Warenkorb-Einschub und auf der Warenkorbseite das Feld „Bestellnotiz hinzufügen“. Kunden können es für Lieferhinweise nutzen.	An

Der Warenkorb-Einschub hat eigene Einstellungen. Um sie zu bearbeiten, öffne den Theme-Editor, wähle den Abschnitt Warenkorb-Einschub und ändere Farbschema oder Dynamische Checkout-Buttons anzeigen.

Suche

Einstellung	Funktion	Empfohlener Wert
Vorausschauende Suche aktivieren	Zeigt Produkte, Vorschläge, Kollektionen, Seiten und Beiträge an, während Kunden im Suchpanel tippen. Ist sie deaktiviert, funktioniert das Suchpanel weiterhin und öffnet die Seite mit den Suchergebnissen.	An
Produktpreis anzeigen	Zeigt in der vorausschauenden Suche den Preis neben Produkten an. Diese Einstellung ist nur sichtbar, wenn die vorausschauende Suche aktiviert ist.	An

Social Media

Gib die vollständige Adresse jedes Social-Media-Kontos ein, zum Beispiel https://www.instagram.com/yourstore. Lass ein Feld leer, um das jeweilige Symbol auszublenden.

Verfügbare Konten: Facebook, Instagram, Pinterest, TikTok, X (Twitter), YouTube, Vimeo, Tumblr und Snapchat.

Die Symbole erscheinen:

• im Block Social-Media-Symbole des Abschnitts Fußzeile
• im Menü-Einschub auf Smartphones und Tablets

Ist kein Konto ausgefüllt, werden keine Symbole angezeigt.

Verwandte Seiten

• Referenz der Abschnitte und Blöcke
• Barrierefreiheit und Performance