Theme-Einstellungen anpassen
Im Abschnitt Theme-Einstellungen des Seitenleistenmenüs des Theme-Editors kannst du die allgemeinen Einstellungen für deinen Onlineshop anpassen, z. B. Typografie, Farben, Social-Media-Links und die Warenkorbseite. Änderungen, die du im Abschnitt Theme-Einstellungen vornimmst, gelten für deinen gesamten Onlineshop.
Abschnitte und Blöcke haben auch individuelle Einstellungen, die du anpassen kannst, um einzelne Abschnitte deines Themes anzupassen. Erfahre mehr über Abschnitte und Blöcke.
Auf dieser Seite
Logo
Du kannst deinem Onlineshop ein Logo für dein Unternehmen hinzufügen. Dein Logo wird an den folgenden Stellen angezeigt:
- in deinem Header auf allen Seiten
- auf deiner Passwortseite
Logo anpassen
Logobilder haben eine maximale Breite von 300 px.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Logo.
Füge im Bereich Logo dein Bild hinzu oder verwende ein kostenloses Bild:
- Um dein Bild hinzuzufügen, klicke auf Bild auswählen, und füge dann ein neues oder vorhandenes Bild hinzu:
- Um ein Bild zu verwenden, das du bereits in deinen Shopify-Adminbereich hochgeladen hast, wähle das Bild aus und klicke dann auf Fertig.
- Um ein Bild von deinem lokalen Computer zu verwenden, klicke auf Bilder hinzufügen. Wähle ein Bild aus, füge es hinzu und klicke dann auf Fertig.
- Um ein kostenloses Bild zu verwenden, klicke auf Kostenlose Bilder ansehen. Suche ein Bild, klicke darauf, um es auszuwählen, und klicke dann auf Auswählen.
- Um dein Bild hinzuzufügen, klicke auf Bild auswählen, und füge dann ein neues oder vorhandenes Bild hinzu:
Optional: Füge deinem Logobild einen Alt-Text hinzu:
- Klicke im Bereich Logo auf Bearbeiten.
- Gib im Feld Alt-Text eine kurze Beschreibung des Bildes ein.
- Klicke auf Speichern.
Optional: Passe im Bereich Logobreite für Desktop die Logobreite in Pixeln mit dem Schieberegler an.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Logo.
Füge im Bereich Logo dein Bild hinzu oder verwende ein kostenloses Bild:
- Um dein Bild hinzuzufügen, tippe auf Bild auswählen, und füge dann ein neues oder vorhandenes Bild hinzu:
- Um ein Bild zu verwenden, das du bereits in deinen Shopify-Adminbereich hochgeladen hast, wähle das Bild aus und tippe dann auf Fertig.
- Um ein Bild von deinem lokalen Gerät zu verwenden, tippe auf Bilder hinzufügen. Wähle ein Bild von deinem lokalen Gerät aus und füge es hinzu, tippe auf das Bild, um es auszuwählen, und tippe dann auf Fertig.
- Um ein kostenloses Bild zu verwenden, tippe auf Kostenlose Bilder ansehen. Suche ein Bild, tippe darauf, um es auszuwählen, und tippe dann auf Fertig.
- Um dein Bild hinzuzufügen, tippe auf Bild auswählen, und füge dann ein neues oder vorhandenes Bild hinzu:
Optional: Füge deinem Logobild einen Alt-Text hinzu:
- Tippe im Bereich Logo auf Bearbeiten.
- Gib im Feld Alt-Text eine kurze Beschreibung des Bildes ein.
- Tippe auf Speichern oder ✓.
Optional: Passe im Bereich Logobreite für Desktop die Logobreite in Pixeln mit dem Schieberegler an.
Tippe auf Speichern oder ✓.
Favicon hinzufügen
Du kannst ein Favoriten-Symbol bzw. Favicon hinzufügen, das du für das Branding deines Onlineshops verwenden kannst. Ein Favicon wird an den folgenden Stellen angezeigt:
- im Tab deines Webbrowsers
- im Verlauf deines Webbrowsers
- Symbole auf deinem Desktop
- neben dem Namen deines Onlineshops, wenn deine Website als Lesezeichen gespeichert wird
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Finde das Theme, dem du ein Favicon hinzufügen möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke je nach deiner Theme-Version auf Logo oder Favicon.
Klicke im Abschnitt Favicon-Bild auf Bild auswählen und füge dann ein neues oder vorhandenes Bild hinzu:
- Um ein Bild auszuwählen, das du bereits in deinen Shopify-Adminbereich hochgeladen hast, kannst du nach dem Bild suchen oder es finden und es dann mit dem Kontrollkästchen auswählen.
- Um ein Bild von deinem lokalen Computer auszuwählen, klicke auf Bilder hinzufügen, öffne das Bild von deinem lokalen Computer und wähle es dann mit dem Kontrollkästchen aus.
Klicke auf Fertig.
Optional: Füge deinem Favicon-Bild Alt-Text hinzu:
- Klicke im Abschnitt Favicon-Bild auf Bearbeiten.
- Gib im Feld Alt-Text eine kurze Beschreibung des Bildes ein.
- Klicke auf Speichern.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Finde das Theme, dem du ein Favicon hinzufügen möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe je nach deiner Theme-Version auf Logo oder Favicon.
Tippe im Abschnitt Favicon-Bild auf Bild auswählen und füge dann ein neues oder vorhandenes Bild hinzu:
- Um ein Bild auszuwählen, das du bereits in deinen Shopify-Adminbereich hochgeladen hast, kannst du nach dem Bild suchen oder es finden und es dann mit dem Kontrollkästchen auswählen.
- Um ein Bild von deinem lokalen Gerät auszuwählen, tippe auf Bilder hinzufügen, öffne das Bild von deinem lokalen Gerät und wähle es dann mit dem Kontrollkästchen aus.
Tippe auf Fertig.
Füge deinem Favicon-Bild Alt-Text hinzu:
- Tippe im Abschnitt Favicon-Bild auf Bearbeiten.
- Gib im Feld Alt-Text eine kurze Beschreibung des Bildes ein.
- Tippe auf Speichern oder ✓.
Tippe auf Speichern oder ✓.
Farben
Du kannst in deinen Theme-Einstellungen verschiedene Farbschemata definieren und sie mit einer Farbschema-Auswahl auf verschiedene Abschnitte in deinem Onlineshop anwenden. Ein Farbschema ist eine Reihe von Farben. Dein Theme verfügt über eine Reihe von angewendeten Standard-Farbschemata, die du jederzeit im Theme-Editor ändern kannst. Du kannst deine Markenfarben hinzufügen, um eine einheitliche Anwendung deiner Farbpalette in deinem gesamten Onlineshop zu gewährleisten.
Vorlagen haben keine individuellen Farbeinstellungen, damit dein Onlineshop-Design auf deiner gesamten Website einheitlich ist. Eine Vorlage wird als Hauptseite oder als Hauptinhalt für einen Shop angesehen. Unterschiedliche Farbschemata in deinem Shop können zu einem schlechten Benutzererlebnis führen und Kund:innen dazu veranlassen, deinen Shop zu verlassen, ohne Produkte zu kaufen.
Du kannst bis zu 21 einzigartige Farbschemata erstellen und anpassen und sie auf verschiedene Abschnitte in deinem Onlineshop anwenden.
Farbschemata
Farbschemata sind eine Theme-Einstellung, die Elemente und ihre jeweiligen Farben visuell repräsentativ gruppiert. Du kannst verschiedenen Elementen in einem zusammenhängenden Farbschema unterschiedliche Farben zuweisen, das in deinem gesamten Theme überall dort angewendet werden kann, wo eine Farbschema-Auswahl verfügbar ist. Du kannst bis zu 21 Farbschemata haben. Du kannst dir auch in der Vorschau des Schemas ansehen, wie deine Farben angezeigt werden.
| Einstellung | Beschreibung |
|---|---|
| Hintergrund | Die Farbe wird auf den Hintergrund einiger Abschnitte und auf den Hintergrund von Outline-Schaltflächen angewendet. |
| Hintergrundverlauf | Ein Farbverlauf wird auf den Hintergrund einiger Abschnitte angewendet. Hintergrundverläufe ersetzen den Hintergrund, wo immer dies möglich ist. |
| Text | Die Farbe wird auf den Text des Abschnitts oder Blocks angewendet. |
| Hintergrund für vollflächige Schaltflächen | Die Farbe wird auf den Hintergrund der primären Schaltfläche angewendet. |
| Beschriftung für vollflächige Schaltflächen | Die Farbe wird auf den Text der primären Schaltfläche angewendet. |
| Outline-Schaltfläche | Die Farbe wird auf den Text und den Rand der sekundären Schaltfläche angewendet. |
| Schatten | Die Farbe wird auf die Schatten angewendet. |
Farbschema verwalten
Das Farbschema und die Farboptionen deines Shops werden in deinen Theme-Einstellungen festgelegt. Verwende für Volltonfarben die Farbauswahl, um eine neue Farbe auszuwählen, oder gib den Wert der Farbe in das Textfeld ein. Das Farbfeld akzeptiert die folgenden Farbnamen und -werte:
- Farbnamen wie
red,blackoderblue. - RGB-Farbcodes.
- Hexadezimale Farbwerte.
Schritte:
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du anpassen möchtest, auf Theme bearbeiten.
Klicke auf das
Symbol und klicke dann auf Farben.Klicke im Abschnitt Schemata auf ein vorhandenes Schema oder klicke auf Schema hinzufügen, um ein neues Farbschema hinzuzufügen.
Klicke auf das Farbfeld für die Farbe des Inhaltstyps, die du ändern möchtest.
Um deine Farbe festzulegen, gib einen Hex-Farbcode ein oder wähle die Farbe aus der Farbauswahl. Um die Farbe auf transparent einzustellen, lösche den Hex-Code aus dem Textfeld.
Klicke auf Speichern.
Farbschema anwenden
Nachdem du dein Farbschema in deinen Theme-Einstellungen definiert hast, kannst du mithilfe der Farbschema-Auswahl in den Abschnitten und Blöcken deines Themes ein Farbschema zuweisen. Die Farbschema-Auswahl ist nur in bestimmten Abschnitten, Blöcken und allgemeinen Theme-Einstellungen verfügbar.
Farbverläufe
In einigen Themes kannst du einen Farbverlauf für visuell interessante Hintergrundoptionen einrichten. Die Einstellung color_background wird verwendet, um die CSS-Hintergrundeigenschaft anzupassen.
Mit der Farbverlauf-Auswahl kannst du die Farben, den Stil des Farbverlaufs, den Winkel, die Position und die Deckkraft des Verlaufs auswählen. Die in der Farbverlauf-Auswahl ausgewählten Optionen werden in Echtzeit im Theme-Editor in der Vorschau angezeigt. Du kannst auch einen Hintergrund mit Farbverlauf mithilfe von CSS-Code erstellen, der eine Validierungsprüfung enthält.
Farbverläufe einrichten
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du anpassen möchtest, auf Theme bearbeiten.
Klicke auf das
Symbol und klicke dann auf Farben.Klicke im Abschnitt Schemata auf ein vorhandenes Schema, das du bearbeiten möchtest.
Klicke auf die Farbverlauf-Farbfeldoption, wie z. B. Hintergrundverlauf.
Wenn du bisher noch keinen Farbverlauf eingerichtet hast, werden einige voreingestellte Optionen zur Auswahl angezeigt. Wähle einen beliebigen voreingestellten Farbverlauf aus, um das Optionsfenster zu öffnen.
Wähle deine Farbverlaufsoptionen aus:
- Wähle zwischen einem linearen oder radialen Farbverlauf. Verwende die Schaltflächen, um deinen bevorzugten Stil für den Farbverlauf auszuwählen.
- Stelle den Winkel deines Farbverlaufs mit den Pfeilen nach oben und unten ein. Klicke auf den Pfeil nach oben oder unten, um den Winkelprozentsatz um 5 zu erhöhen oder zu verringern.
- Verwende den Schieberegler, um die Position deines Farbverlaufs auszuwählen, oder gib einen numerischen Wert in das Feld ein.
- Gib einen bestimmten Hex-Farbcode ein oder wähle mit dem Farbregler einen Farbton aus. Zuletzt ausgewählte Farben werden unten im Optionsfenster für Farbverläufe angezeigt.
- Um die Transparenz deines Farbverlaufs zu ändern, verwende den Schieberegler auf der rechten Seite. Du kannst auch einen Prozentsatz in das Feld neben dem Hex-Farbcode eingeben.
- Klicke auf Speichern.
Farbverläufe mit CSS festlegen
Die meisten CSS-Eigenschaftswerte für background können verwendet werden, um eine Hintergrundfarbe festzulegen. Du kannst dieses Feld für Volltonfarben (z. B. #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%) und hsla(0, 0%, 0%, 1) erzeugen alle einen vollflächig schwarzen Hintergrund) oder für Farbverläufe (z. B. linear-gradient(red, green), radial-gradient(red, green) oder conic-gradient(red, green)) verwenden. Farbverläufe können auch wiederholt werden.
Schritte:
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du anpassen möchtest, auf Theme bearbeiten.
Klicke auf das
Symbol und klicke dann auf Farben.Klicke im Abschnitt Schemata auf ein vorhandenes Schema, das du bearbeiten möchtest.
Klicke auf den Farbverlauf, den du bearbeiten möchtest.
Klicke auf den Pfeil neben Farbverlauf und wähle dann CSS aus.
Gib im Feld CSS-Code deinen Farbverlaufscode ein oder füge ihn ein. Die Vorschau im Theme-Editor zeigt deinen Farbverlauf an der entsprechenden Stelle an.
Klicke auf Speichern.
Farbverlauf entfernen
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du anpassen möchtest, auf Theme bearbeiten.
Klicke auf das
Symbol und klicke dann auf Farben.Klicke im Abschnitt Schemata auf ein vorhandenes Schema, das du bearbeiten möchtest.
Klicke auf den Farbverlauf, den du entfernen möchtest.
Klicke auf Farbverlauf entfernen.
Klicke auf Speichern.
Typografie
Du kannst den Schriftstil und die -größe für den Text in deinem Onlineshop festlegen. Du kannst eine Systemschriftart auswählen oder eine benutzerdefinierte Schriftart hinzufügen. Die in deinem Theme verfügbaren Schriftarten hängen von your theme's developer ab. Alle free Shopify themes verwenden Schriftarten aus der Shopify's font library.
Verwende für deinen Shop am besten Systemschriftarten, da diese bereits auf den Computern von Nutzer:innen installiert sind. Dadurch müssen keine neuen Schriftarten auf den Computer deiner Kundschaft heruntergeladen werden, was die Ladegeschwindigkeit deines Shops negativ beeinflussen kann. Welche Schriftart auf dem Computer deiner Kundschaft angezeigt wird, hängt vom jeweiligen Betriebssystem ab.
Schriftarten anpassen
Eine Liste der verfügbaren Schriftarten findest du in der Schriftbibliothek von Shopify.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Typografie.
Um eine Schriftart für die Überschriften oder den Fließtext deines Shops zu ändern, klicke im Abschnitt Überschriften oder Fließtext auf Ändern.
Klicke auf den Namen der Schriftart, die du verwenden möchtest, und klicke dann auf Auswählen.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Typografie.
Um eine Schriftart für die Überschriften oder den Fließtext deines Shops zu ändern, tippe im Abschnitt Überschriften oder Fließtext auf Ändern.
Tippe auf den Namen der Schriftart, die du verwenden möchtest, und tippe dann auf Fertig.
Tippe auf Speichern oder ✓.
Schriftgrößen anpassen
Du kannst die Standardschriftgrößen für deine Überschriften und deinen Fließtext mit der Theme-Einstellung „Typografie“ festlegen.
Die minimale Schriftgröße beträgt 100 % und die maximale Schriftgröße 150 %. Jeder Schritt auf der Skala erhöht die Schriftgröße um 5 %. Die Standardeinstellung ist 100 %.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Typografie.
Um die Standardschriftgröße für Überschriften zu ändern, wähle sie mit dem Schieberegler Schriftgrößenskala aus.
Um die Standardschriftgröße für den Fließtext zu ändern, wähle sie mit dem Schieberegler Schriftgrößenskala aus.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Typografie.
Um die Standardschriftgröße für Überschriften zu ändern, wähle sie mit dem Schieberegler Schriftgrößenskala aus.
Um die Standardschriftgröße für den Fließtext zu ändern, wähle sie mit dem Schieberegler Schriftgrößenskala aus.
Tippe auf Speichern oder ✓.
Layout
Du kannst die maximale Breite festlegen, mit der dein Onlineshop angezeigt wird, und den vertikalen und horizontalen Abstand zwischen den Abschnitten einstellen.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Layout.
Verwende den Schieberegler Seitenbreite, um eine Seitenbreite zwischen 1000 px und 1600 px auszuwählen. Die Standardeinstellung ist 1600 px.
Optional: Verwende den Schieberegler, um auf deinen Seiten vertikalen Abstand zwischen Vorlagenabschnitten hinzuzufügen. Du kannst bis zu maximal 100 px Abstand zwischen den Abschnitten hinzufügen.
Optional: Wenn du ein Raster-Layout hast, verwende die Schieberegler Horizontaler Abstand und Vertikaler Abstand, um Abstand zwischen den Rasterinhalten auf deinen Seiten hinzuzufügen. Durch das Hinzufügen von horizontalem Abstand wird den Inhaltszeilen auf deinen Seiten ein Abstand von maximal 40 px hinzugefügt, während durch das Hinzufügen von vertikalem Abstand den Inhaltsspalten auf deinen Seiten ein Abstand von maximal 40 px hinzugefügt wird.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Layout.
Verwende den Schieberegler Seitenbreite, um eine Seitenbreite zwischen 1000 px und 1600 px auszuwählen. Die Standardeinstellung ist 1600 px.
Optional: Verwende den Schieberegler, um auf deinen Seiten vertikalen Abstand zwischen Vorlagenabschnitten hinzuzufügen. Du kannst bis zu maximal 100 px Abstand zwischen den Abschnitten hinzufügen.
Optional: Wenn du ein Raster-Layout hast, verwende die Schieberegler Horizontaler Abstand und Vertikaler Abstand, um Abstand zwischen den Rasterinhalten auf deinen Seiten hinzuzufügen. Durch das Hinzufügen von horizontalem Abstand wird den Inhaltszeilen auf deinen Seiten ein Abstand von maximal 40 px hinzugefügt, während durch das Hinzufügen von vertikalem Abstand den Inhaltsspalten auf deinen Seiten ein Abstand von maximal 40 px hinzugefügt wird.
Tippe auf Speichern oder ✓.
Animationen
Mit Animationen kannst du deinem Onlineshop Bewegung und visuelles Interesse verleihen. Du kannst eine Einblendanimation aktivieren, die die Abschnitte deines Shops beim Scrollen einblendet, und einen Hover-Effekt für deine Karten und Schaltflächen.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Animationen.
Optional: Um eine Animation zu aktivieren, die die Abschnitte deines Onlineshops beim Scrollen einblendet, wähle Abschnitte beim Scrollen einblenden aus.
Optional: Um deinen Karten und Schaltflächen eine Hover-Effekt-Animation hinzuzufügen, wähle eine der folgenden Optionen aus der Einstellung Hover-Effekt aus:
- Vertikales Anheben: Wenn Kund:innen mit der Maus über eine Karte oder eine Schaltfläche fahren, wird das Element nach oben verschoben.
- 3D-Anhebung: Wenn Kund:innen mit der Maus über eine Karte oder eine Schaltfläche fahren, wird das Element nach vorne verschoben, was einen 3D-Effekt erzeugt. Ein subtiler Glanz, der sich über das Element bewegt, verleiht ihm eine zusätzliche Dimension.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Animationen.
Optional: Um eine Animation zu aktivieren, die die Abschnitte deines Onlineshops beim Scrollen einblendet, wähle Abschnitte beim Scrollen einblenden aus.
Optional: Um deinen Karten und Schaltflächen eine Hover-Effekt-Animation hinzuzufügen, wähle eine der folgenden Optionen aus der Einstellung Hover-Effekt aus:
- Vertikales Anheben: Wenn Kund:innen mit der Maus über eine Karte oder eine Schaltfläche fahren, wird das Element nach oben verschoben.
- 3D-Anhebung: Wenn Kund:innen mit der Maus über eine Karte oder eine Schaltfläche fahren, wird das Element nach vorne verschoben, was einen 3D-Effekt erzeugt. Ein subtiler Glanz, der sich über das Element bewegt, verleiht ihm eine zusätzliche Dimension.
Tippe auf Speichern oder ✓.
Anpassungseinstellungen für visuelle Elemente
Du kannst das Erscheinungsbild von Elementen deines Themes, wie z. B. Schaltflächen, Produktkarten und Varianten, auf der Seite Theme-Einstellungen anpassen. Jede Option enthält die relevanten Einstellungen für das jeweilige Element.
Du kannst die Einstellungen für die folgenden Elemente deines Themes anpassen:
- Schaltflächen: Zu den Schaltflächen gehören Call-to-Action-Schaltflächen in Abschnitten wie einer Slideshow oder einem Bild mit Text sowie die Schaltflächen in einem Kontaktformular, auf deinen Produktseiten und auf Warenkorbseiten.
- Varianten-Pills: Mit Varianten-Pills kannst du die Varianten eines Produkts auf einer Produktseite oder in einem Abschnitt für vorgestellte Produkte anzeigen. Kund:innen können die gewünschte Variante auswählen, um das Produkt zu ihrem Warenkorb hinzuzufügen, ohne die Produktseite wechseln zu müssen. Du kannst anpassen, wie deine Varianten-Pills in deinem Onlineshop angezeigt werden.
- Eingabefelder: Eingabefelder sind interaktive Bereiche, die eine Eingabe von Kund:innen erfordern, zum Beispiel eine Mengenauswahl, ein E-Mail-Anmeldeformular oder Warenkorbanmerkungen. Du kannst das Erscheinungsbild der Eingabefelder deines Onlineshops anpassen.
- Mit den Einstellungen für Produktkarten, Kollektionskarten und Blog-Karten kannst du den Stil der einzelnen Kartentypen anpassen, wenn sie in Seitenabschnitten angezeigt werden.
- Produktkarten: Produktkarten zeigen Informationen über deine Produkte in Bereichen deines Themes an, in denen mehrere Produkte aufgeführt sind, z. B. in Kollektionsvorlagen, Kollektionsabschnitten und Suchergebnissen.
- Kollektionskarten: Kollektionskarten zeigen Informationen über deine Kollektionen in Bereichen deines Themes an, in denen Kollektionen aufgeführt sind, wie z. B. in einer Vorlage oder einem Abschnitt für eine Kollektionsliste.
- Blog-Karten: Blog-Karten zeigen Informationen über deine Blog-Beiträge in Bereichen deines Themes an, in denen mehrere Produkte aufgeführt sind, wie z. B. in Blog-Vorlagen, Blog-Abschnitten und Suchergebnissen.
- Inhaltscontainer: Container werden für das Textelement von Inhaltsabschnitten verwendet, zum Beispiel für das Textfeld in einer Slideshow, auf einem Bildbanner oder in den Spalten von mehrspaltigen Abschnitten. Du kannst das Erscheinungsbild der Inhaltscontainer für deinen Onlineshop anpassen.
- Medien: Medien sind die visuelle Komponente von Abschnitten, zum Beispiel Produktmedien oder ein Bild im Abschnitt „Bild mit Text“. Du kannst deinen Medien Ränder und Schatten hinzufügen.
- Dropdowns und Pop-ups: Du kannst das Erscheinungsbild von Dropdown-Menüs, modalen Pop-ups und Warenkorb-Pop-ups in deinem Onlineshop anpassen.
- Einschübe: Einschübe sind verborgene, interaktive Container, die angezeigt werden, wenn darauf getippt oder geklickt wird, wie z. B. minimierbare Menüs oder Filteroptionen für Kollektionen. Du kannst den Rand und den Schatten der Einschübe in deinem Onlineshop anpassen.
- Badges: Die Badges Im Angebot und Ausverkauft werden automatisch zu deinen Produktbildern hinzugefügt, wenn du den Preis reduzierst oder wenn der Inventarbestand 0 erreicht. Du kannst die Position, die Form und die Farbe deiner Badges Im Angebot und Ausverkauft einzeln in deinen Theme-Einstellungen anpassen. Die Badges Seite und Blog werden in relevanten Suchergebnissen angezeigt. Du kannst die Position und Form dieser Badges anpassen, aber die Farbe der Badges Seite und Blog kannst du nicht ändern.
- Markeninformationen: Du kannst Informationen zu deiner Marke in deinem Onlineshop hinterlegen. Wenn du die folgenden Schritte ausgeführt hast, kannst du anschließend den Block Markeninformationen in der Fußzeile deines Onlineshops hinzufügen.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Klicke neben dem Theme, das du bearbeiten möchtest, auf Theme bearbeiten.
Klicke auf das Symbol
.Klicke auf ein Element, um die Einstellungen zu öffnen.
Passe die verfügbaren Einstellungen an. Du kannst die Änderungen überprüfen, indem du im Vorschaufenster zu verschiedenen Bereichen deines Themes navigierst.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe neben dem Theme, das du bearbeiten möchtest, auf Theme bearbeiten.
Tippe auf das Symbol
.Tippe auf ein Element, um die Einstellungen zu öffnen.
Passe die verfügbaren Einstellungen an. Du kannst die Änderungen überprüfen, indem du im Vorschaufenster zu verschiedenen Bereichen deines Themes navigierst.
Tippe auf Speichern oder ✓.
Social Media
Du kannst Links zu deinen Social-Media-Konten hinzufügen, die in der Fußzeile deines Onlineshops angezeigt werden.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Social Media.
Um Links zu deinen Social-Media-Konten hinzuzufügen, gib die Website-Adressen für deine Konten in die entsprechenden Felder unter Social-Media-Konten ein. Du musst vollständige Links eingeben, z. B. https://instagram.com/shopify oder https://tiktok.com/@shopify.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Social Media.
Um Links zu deinen Social-Media-Konten hinzuzufügen, gib die Website-Adressen für deine Konten in die entsprechenden Felder unter Social-Media-Konten ein. Du musst vollständige Links eingeben, z. B. https://instagram.com/shopify oder https://tiktok.com/@shopify.
Tippe auf Speichern oder ✓.
Suchverhalten
Dein Onlineshop verfügt über eine vorausschauende Suche, die Vorschläge anzeigt, wenn Kund:innen anfangen, etwas in das Suchfeld einzugeben. Suchvorschläge können Kund:innen dabei helfen, ihre Suchanfragen zu formulieren und anzupassen, und bieten neue Wege, deinen Onlineshop zu erkunden. Suchvorschläge ermöglichen es Kund:innen auch, schnell Übereinstimmungen zu durchsuchen, ohne ihre aktuelle Seite verlassen zu müssen, um eine separate Liste mit Suchergebnissen anzuzeigen.
Weitere Informationen zur Funktionsweise von Suchvorschlägen findest du unter Vorausschauende Suche.
Du kannst anpassen, wie deinen Kund:innen Suchvorschläge angezeigt werden.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Suchverhalten.
Um Suchvorschläge zu aktivieren oder zu deaktivieren, aktiviere oder deaktiviere die Option Suchvorschläge aktivieren.
Optional: Um den Produktanbieter in den Suchvorschlägen anzuzeigen oder auszublenden, aktiviere oder deaktiviere die Option Produktanbieter anzeigen.
Optional: Um den Produktpreis in den Suchvorschlägen anzuzeigen oder auszublenden, aktiviere oder deaktiviere die Option Produktpreis anzeigen.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Suchverhalten.
Um Suchvorschläge zu aktivieren oder zu deaktivieren, aktiviere oder deaktiviere die Option Suchvorschläge aktivieren.
Optional: Um den Produktanbieter in den Suchvorschlägen anzuzeigen oder auszublenden, aktiviere oder deaktiviere die Option Produktanbieter anzeigen.
Optional: Um den Produktpreis in den Suchvorschlägen anzuzeigen oder auszublenden, aktiviere oder deaktiviere die Option Produktpreis anzeigen.
Tippe auf Speichern oder ✓.
Währungsformat
Du kannst festlegen, dass der Währungscode bei den Preisen deiner Produkte angezeigt wird.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Währungsformat.
Wähle die Option Währungscodes anzeigen aus, um Währungscodes anzuzeigen.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Währungsformat.
Wähle die Option Währungscodes anzeigen aus, um Währungscodes anzuzeigen.
Tippe auf Speichern oder ✓.
Warenkorb
Du kannst den Stil des Warenkorbs in deinem Onlineshop ändern. Wenn ein:e Kund:in ein Produkt aus deinem Shop zum Warenkorb hinzufügt, kann der Warenkorb als Einschub, als Seite oder als Popup-Benachrichtigung angezeigt werden. Um die Kund:innen auf der Produktseite zu halten, verwende die Option „Einschub“ oder „Popup-Benachrichtigung“. Um die Kund:innen zur Warenkorbseite zu leiten, verwende die Option „Seite“. Wenn der Warenkorb von Kund:innen leer ist, kannst du eine vorgestellte Kollektion im Warenkorbeinschub anzeigen.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Warenkorb.
Wähle im Dropdown-Menü Warenkorbtyp den Warenkorbstil Einschub, Seite oder Popup-Benachrichtigung aus.
Optional: Wähle die Option Anbieter anzeigen aus, um die Anbieter der Artikel im Warenkorb von Kund:innen anzuzeigen.
Optional: Wähle die Option Warenkorbanmerkung aktivieren aus, um Kund:innen ein Textfeld bereitzustellen, in das sie Sonderwünsche oder zusätzliche Bestellinformationen eingeben können.
Optional: Wenn du Einschub als Warenkorbtyp auswählst, kannst du eine Kollektion im Warenkorbeinschub anzeigen, wenn dieser leer ist:
- Klicke im Bereich Warenkorbeinschub auf Kollektion auswählen.
- Klicke auf den Namen der Kollektion, die du anzeigen möchtest, und klicke dann auf Auswählen.
Optional: Wenn du Einschub als Warenkorbtyp auswählst, kannst du das Farbschema deines Warenkorbeinschubs ändern, indem du die folgenden Schritte ausführst:
- Klicke im Bereich Warenkorbeinschub > Farbschema auf Ändern.
- Wähle ein Farbschema aus, das du für deinen Warenkorbeinschub verwenden möchtest.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Warenkorb.
Wähle deinen Warenkorbtyp aus den Optionen Einschub, Seite oder Pop-up-Benachrichtigung aus.
Optional: Wähle die Option Anbieter anzeigen aus, um die Anbieter der Artikel im Warenkorb von Kund:innen anzuzeigen.
Optional: Wähle die Option Warenkorbanmerkung aktivieren aus, um Kund:innen ein Textfeld bereitzustellen, in das sie Sonderwünsche oder zusätzliche Bestellinformationen eingeben können.
Optional: Wenn du Einschub als Warenkorbtyp auswählst, kannst du eine Kollektion im Warenkorbeinschub anzeigen, wenn dieser leer ist:
- Tippe im Bereich Warenkorbeinschub auf Kollektion auswählen.
- Tippe auf den Namen der Kollektion, die du anzeigen möchtest, und tippe dann auf Fertig.
Optional: Wenn du Einschub als Warenkorbtyp auswählst, kannst du das Farbschema deines Warenkorbeinschubs ändern, indem du die folgenden Schritte ausführst:
- Tippe im Bereich Warenkorbeinschub > Farbschema auf Ändern.
- Wähle ein Farbschema für deinen Warenkorbeinschub aus und tippe dann auf Fertig.
Tippe auf Speichern oder ✓.
Benutzerdefiniertes CSS
Der Abschnitt Benutzerdefiniertes CSS ermöglicht es dir, deinen eigenen CSS-Code einzugeben, um beispielsweise das Erscheinungsbild der Schaltflächen deines Onlineshops über die verfügbaren Standardeinstellungen hinaus anzupassen oder bestimmten Textelementen ein einzigartiges Styling zuzuweisen.
Benutzerdefiniertes CSS in deinen Theme-Einstellungen wirkt sich auf alle Seiten deines Onlineshops aus, mit Ausnahme deines Checkouts.
Mehr Informationen zum Hinzufügen von benutzerdefiniertem CSS zu deinem Theme.
Theme-Stil
Ein Theme-Stil ist eine Sammlung von Einstellungen, die von Theme-Designer:innen ausgewählt wurden. Du kannst einen Theme-Stil auf deinen Shop anwenden, um ihm ein professionelles Erscheinungsbild zu verleihen. Für alle Themes wird standardmäßig ein Theme-Stil angewendet. Welche anderen Theme-Stil-Optionen dir zur Verfügung stehen, hängt davon ab, welches Theme du verwendest.
Wenn du ein Theme anpasst, ersetzt du die Theme-Stil-Einstellungen durch deine eigenen. Wenn du einen Theme-Stil auf dein Theme anwendest, änderst du deine aktuellen Einstellungen, wie z. B. Farben und Typografie.
Schritte:
Desktop
Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, und klicke dann auf Theme bearbeiten.
Klicke auf das Symbol für die Theme-Einstellungen
.Klicke auf Theme-Stil.
Wähle den Theme-Stil aus, den du verwenden möchtest, und klicke dann auf Stil ändern.
Klicke auf Speichern.
Mobil
Tippe in der Shopify-App auf das Symbol
.Tippe im Abschnitt Vertriebskanäle auf Onlineshop.
Tippe auf Alle Themes verwalten.
Suche das Theme, das du bearbeiten möchtest, und tippe dann auf Theme bearbeiten.
Tippe auf … oder ⋮ und dann auf Theme-Einstellungen.
Tippe auf Theme-Stil.
Wähle den Theme-Stil aus, den du verwenden möchtest, und tippe dann auf Fertig.
Tippe auf Speichern oder ✓.