Der Kopfzeilenbereich steuert die Navigation auf oberster Ebene, das Branding und Schnellzugriffs-Utility-Steuerelemente in Ihrem Shop. Die Haupteinstellungen ermöglichen es Ihnen, Hintergrundfarbe, Kopfzeilenhöhe, klebende Anzeige, Logo-Layout und spezifische Steuerungen für wichtige Funktionen anzupassen:

Suchleiste:

Schalten Sie die Sichtbarkeit der zentralen Suchleiste um und passen Sie den Platzhaltertext an.

Menü-Schublade:

Wählen Sie Navigationsmenüs aus, passen Sie den Linktext an und entscheiden Sie, ob die Navigation in einer Seiten-Schublade (auch auf dem Desktop) rechts angezeigt wird.

Konto- & Warenkorb-Schublade:

Legen Sie benutzerdefinierte Beschriftungen für Kundenkonto- und Warenkorb-Auslöser fest und definieren Sie die Überschrift für den leeren Zustand der Warenkorb-Schublade.

Der Akkordeon-Bereich ermöglicht es Ihnen, einklappbare Textlisten zu erstellen, die sich perfekt für häufig gestellte Fragen oder Ladenrichtlinien eignen. Besucher können auf jede Frage klicken, um sie aufzuklappen und die Antwort zu lesen, wodurch Ihre Seite sauber und organisiert bleibt. Sie können ganz einfach Ihren Hauptabschnittstitel festlegen, dessen Textfarbe ändern und den Abstand oberhalb und unterhalb des Blocks mit einfachen Schiebereglern im Theme-Editor anpassen.

Der Aktionsaufteilungsbereich kombiniert eine detaillierte Textnachricht links mit einem speziellen Funktionsfeld oder einem direkten Kontaktmenü rechts. Er eignet sich ideal zur Präsentation von Dienstleistungen wie Massenbewertungen, Kommission oder speziellen Kundensupport-Kanälen. Sie können die Hauptüberschrift, den Untertitel, die Beschreibung, Tag-Schaltflächen und den Seitentitel anpassen sowie Schriftgrößen, Seitenleistenbreite und individuelle Hintergrund- und Akzentfarben direkt in den Einstellungen einstellen.

Der Blog-Slider-Bereich präsentiert die neuesten Beiträge und Geschichten Ihres Shops in einem sauberen, scrollbaren Karussell. In den Haupteinstellungen des Abschnitts können Sie eine Hintergrundfarbe oder einen Farbverlauf festlegen, die obere und untere Polsterung anpassen, Schriftstärken einstellen und Standardbeschriftungen wie Abschnittsüberschrift, Linktext und "Weiterlesen"-Schaltflächen festlegen. Durch Hinzufügen einzelner Artikelblöcke können Sie entweder Standard-Blogbeiträge oder benutzerdefinierte Geschichten mit Optionen für Vollbild- oder geteilte Kartenlayouts, benutzerdefinierte Bilder, Videohintergründe (YouTube, Vimeo oder MP4) und benutzerdefinierte Weiterleitungslinks anzeigen.

Das Call-to-Action-Banner erstellt einen breiten, auffälligen Promo-Bereich, der darauf ausgelegt ist, die Kundenbindung zu fördern. Sie können den Untertitel, den Haupttitel, die Beschreibung und die Call-to-Action-Schaltfläche mit einem direkten Link anpassen. Sie können auch einzelne Info-Blöcke hinzufügen, die automatisch unter dem Text mit sauberen Häkchen-Symbolen angezeigt werden, um wichtige Vertrauenspunkte oder Garantien hervorzuheben. Die Abschnittseinstellungen ermöglichen es Ihnen außerdem, die obere und untere Polsterung anzupassen und eine benutzerdefinierte Hintergrundfarbe oder einen Farbverlauf auszuwählen.

Der Kampagnenzentrum-Bereich zeigt ein strukturiertes Raster von Werbekarten, um wichtige Shop-Angebote, Kampagnen und exklusive Inhalte hervorzuheben. Die Abschnittseinstellungen steuern die Hauptüberschriften, Spalten pro Reihe, Hintergrundgestaltung und globale Hover-Effekte für Karten, während einzelne Kartenblöcke es Ihnen ermöglichen, Titel, Beschreibungen, Schaltflächenlinks und Symbole anzupassen.

Wie man SVG-Icon-Codes erhält

Um benutzerdefinierte Vektor-Icons zu Ihren Karten hinzuzufügen:

1. Finden Sie ein Icon: Besuchen Sie eine kostenlose Open-Source-Icon-Bibliothek (wie Lucide Icons oder Tabler Icons).
2. Kopieren Sie den SVG-Code: Suchen Sie Ihr gewünschtes Icon (z. B. ein Herz, einen Stern oder einen Diamanten), klicken Sie darauf und wählen Sie SVG kopieren oder Code kopieren.
3. Fügen Sie es in die Einstellungen ein: Fügen Sie den rohen -Codeblock direkt in das Icon-Feld Ihres Kartenblocks ein.

Die Warenkorbschublade ermöglicht es Kunden, Artikel über ein Dropdown-Menü im Header oder eine hochschiebbare Schublade mit Mengensteuerung, Promo-Eingaben und Checkout-Links (erfordert das Hinzufügen des Warenkorbschubladenblocks unter Header) zu überprüfen und zu verwalten. In den Theme-Einstellungen > Warenkorbrabatte können Sie bis zu drei gestaffelte Ausgabeschwellen konfigurieren (z. B. Ausgabestufen für 30 %, 50 % oder 70 % Rabatt), um eine dynamische Fortschrittsanzeige für Belohnungen direkt in der Schublade anzuzeigen.

Das Inhalts-Galerieraster kombiniert vorgestellte Medienelemente (Video und statische Bilder) neben einem sauberen Kundenbewertungs-Karussell.

• Gesamte Abschnittseinstellungen: Passen Sie die obere und untere Polsterung, den Abschnittsuntertitel (z. B. "KUNDENBEWERTUNGEN"), das Hauptbild, Videomedien und Container-Randfarben an. Für Videoinhalte können Sie eine direkte MP4-Datei über Shopify Video hochladen oder eine YouTube-URL eingeben (wird automatisch verwendet, wenn kein Shopify Video ausgewählt ist), mit der Option, Video automatisch abspielen zu aktivieren.

• Bewertungsblöcke: Fügen Sie mehrere Bewertungsblöcke hinzu, um einen Testimonial-Slider neben Ihrem Medienraster zu erstellen. Für jeden einzelnen Bewertungsblock können Sie folgende Einstellungen anpassen: Sternebewertung, Bewertungstext, Autor und Label.

Der Kollektion-Karussell-Bereich zeigt Produkte aus einer ausgewählten Kollektion in einem sauberen, horizontal scrollbaren Slider mit Navigationspfeilen.

• Kollektion & Überschrift: Wählen Sie aus, welche Shop-Kollektion hervorgehoben werden soll, und legen Sie einen benutzerdefinierten Abschnittstitel fest (z. B. "Mythos Fantasy Karten").
• Abzeichen-Einstellungen: Fügen Sie ein werbliches Auszeichnungsabzeichen (z. B. "NEU") neben der Überschrift hinzu, wählen Sie dessen Akzentfarbe und aktivieren Sie "Abzeichen oben positionieren", um es auszurichten.
• Schaltflächen & Navigation: Passen Sie Standardbeschriftungen für einzelne Produktkartenschaltflächen an (z. B. "In den Warenkorb") und konfigurieren Sie eine eigenständige Abschnittsschaltfläche mit benutzerdefiniertem Label (z. B. "Kollektion shoppen") und direktem Link.
• Styling & Layout: Legen Sie benutzerdefinierte Farben für den Abschnittshintergrund, den Schaltflächenhintergrund und den Schaltflächentext fest, zusammen mit Steuerungen für die obere und untere Abschnittspolsterung.

Der Abschnitt "Collection List" erstellt ein Raster interaktiver Karten mit benutzerdefinierten Farbverläufen, Vektoricons und direkten Links zu Kollektionen. Sie können die Hintergrundfarbe des Abschnitts, die Überschrift, die Spalten pro Reihe und die Hover-Akzentfarben anpassen und dann einzelne Collection Card-Blöcke hinzufügen, um jede Kollektion darzustellen.

Collection Card Block Einstellungen

Für jeden Kartenblock können Sie konfigurieren:

• Kollektion: Wählen Sie die Zielkollektion für den Weiterleitungslink aus.
• Kollektionstitel: Geben Sie das benutzerdefinierte Kartenlabel ein (z. B. "Neuankömmlinge").
• Icon: Fügen Sie rohen
• Karten-Hintergrundverlauf: Fügen Sie einen CSS-Linearverlaufscode hinzu, um jeder Karte einen eindeutigen Hintergrundfarbübergang zu geben. Format: linear-gradient(Richtung, Farbe1, Farbe2)

Der Abschnitt "Collections Grid" zeigt ein responsives Layout von vorgestellten Kollektionenkarten mit hervorgehobenen Bildern und direkten Kollektionstiteln. Die Steuerungen des Abschnitts ermöglichen es Ihnen, die Größe der Rasterelemente (Klein/Groß) umzuschalten und den Rasterabstand anzupassen, während einzelne Kollektion-Blöcke es Ihnen erlauben, bestimmte Shop-Kollektionen auszuwählen und zu präsentieren.

Der Abschnitt Kontaktformular zeigt ein schlankes Kundenanfrageformular in einem dunklen Kartencontainer an. Die Einstellungen ermöglichen eine vollständige Anpassung von Überschriften, Unterüberschriften, Beschreibungen, Beschriftungen der Absende-Schaltfläche sowie benutzerdefinierten Feldbeschriftungen oder Platzhaltertexten für die Eingaben Betreff, E-Mail und Nachricht.

Der Hero-Abschnitt verfügt über ein vollflächiges Hintergrundbanner mit zentrierten Textüberlagerungen und einer Call-to-Action-Schaltfläche. Die Abschnittssteuerungen ermöglichen die Auswahl des Hintergrundbildes und die Anpassung der Gesamthöhe des Banners, während Inhaltsblöcke das Hinzufügen anpassbarer Überschriften-, Absatz- und Schaltflächenelemente erlauben.

Der Abschnitt Hero-Hotspots kombiniert ein interaktives Banner-Hero mit punktgenauen Hotspot-Symbolen (+ Indikatoren), die beim Überfahren verlinkte Sammlungskarussells anzeigen. Die Abschnittseinstellungen steuern die Typografie des Heroes, die Gestaltung der Schaltflächen, Desktop-/Mobile-Hintergrundbilder und die Überlagerungsopazität, während einzelne Hotspot-Blöcke es ermöglichen, Titel, Beschreibungen, Zielkollektionen und präzise X/Y-Prozentkoordinaten zuzuweisen, um jeden Pin über dem Bild zu positionieren.

Der Abschnitt Showcase mit Tooltips kombiniert ein hervorgehobenes Hintergrundbanner mit linksbündigen Überschriften, Beschreibungen und anpassbaren Bullet-Item-Blöcken. Die Abschnittseinstellungen ermöglichen die Anpassung der Hintergrundmedien, der Überlagerungsopazität und der Kartenstilistik (Farben und Randradius), während Hotspot-Blöcke interaktive Pins über das Bild mit unabhängigen Desktop- und Mobile-X/Y-Koordinaten platzieren, um Pop-up-Kartendetails und Links anzuzeigen.

Der Abschnitt Textlaufband erstellt ein animiertes, kontinuierlich scrollendes Textbanner für Ankündigungen und Website-Benachrichtigungen. Die Abschnittseinstellungen ermöglichen die Anpassung der Hintergrundfarbe, Textfarbe, Schriftgröße und des Abstands zwischen den Elementen, während einzelne Textblöcke einzigartige Werbebotschaften, Emojis oder Aktualisierungsnotizen zur Laufbandschleife hinzufügen können.

Der Abschnitt Text mit Symbolen zeigt Feature-Karten mit benutzerdefinierten Symbolen, Titeln und Beschreibungen, die in einem mehrspaltigen Raster angeordnet sind. Die allgemeinen Abschnittseinstellungen ermöglichen die Anpassung von Überschriften, Spalten pro Reihe, Rasterabstand, Symbolabmessungen und einem optionalen Schrittzählabzeichen, während einzelne Box-Blöcke das Hochladen von Bildern oder das Eingeben von rohen SVG-Vektor-Symbolen, das Festlegen benutzerdefinierter Farbverläufe und die Konfiguration kartspezifischer Farben und Call-to-Action-Schaltflächen erlauben.

Um SVG-Code zu erhalten, besuchen Sie eine Open-Source-Icon-Bibliothek wie Lucide Icons oder Tabler Icons, suchen Sie Ihr gewünschtes Symbol und klicken Sie auf SVG kopieren oder Code kopieren. Fügen Sie dann den rohen -Codeblock direkt in das SVG-Feld Ihres Box-Blocks ein.

Der Abschnitt Brotkrumen bietet eine einfache Seitennavigation mit einer Zurück-Schaltfläche links und einer Anzeige der aktuellen Seite rechts. Die Abschnittseinstellungen ermöglichen die Anpassung der Hintergrundfarbe, der Beschriftung der Zurück-Schaltfläche (z. B. "Zurück gehen") und des Präfixtexts des Anzeigeindikators (z. B. "Sie sehen:").

Der Mehrspaltig-Abschnitt ermöglicht es Ihnen, Inhalte nebeneinander anzuzeigen, um wichtige Vorteile, Schritte oder Shop-Funktionen in einem klaren Layout hervorzuheben. Sie können einen Haupttitel und eine Unterüberschrift für den gesamten Abschnitt festlegen sowie einzelne Spaltenblöcke hinzufügen oder entfernen, um Bilder, Titel und kurze Beschreibungen zu präsentieren.

Der Wunschliste-Abschnitt schafft einen dedizierten Bereich, um alle Artikel anzuzeigen, die ein Kunde beim Stöbern gespeichert hat.

Wenn ein Käufer auf der Produktseite die Wunschliste-Utility-Schaltfläche anklickt, wird dieser Artikel gespeichert und automatisch als Kartenraster in diesem Abschnitt angezeigt – so erhalten Kunden einen einfachen, zentralen Ort, um ihre favorisierten Artikel später zu überprüfen und zu kaufen.

Der Footer-Bereich verankert den unteren Bereich Ihres Shops mit Navigationslinks, Branding, Compliance-Details und Kundenbindungswerkzeugen. Hier können Sie die Hintergrundfarbe einstellen, die Anzeige von Zahlungsicons aktivieren, um akzeptierte Zahlungsmethoden anzuzeigen, und die Shop-Richtlinien in der unteren Leiste einblenden.

Footer-Blöcke

• Logo-Block: Laden Sie Ihr Logo hoch, passen Sie die Größe an und fügen Sie einen kurzen Slogan hinzu. Sie können auch soziale Symbole oder den Namen Ihres Shops ein- oder ausblenden.

• Links-Block: Zeigen Sie ein Navigationsmenü aus Ihrem Shopify-Adminbereich unter einem benutzerdefinierten Titel an.

• Newsletter-Block: Fügen Sie ein E-Mail-Anmeldefeld mit Ihrer Wahl von Überschrift, Unterüberschrift und Platzhaltertext hinzu.

Der Produktabschnitt verfügt über ein zweispaltiges Layout, das Produktmedien neben wichtigen Details und Kaufoptionen anzeigt. Die Haupteinstellungen ermöglichen die Anpassung der Hintergrundfarbe, der Abschnittsbreite, klebender Bilder, des Randradius und des Bildzoom, während Blöcke wie Titel, Preis, Lagerbestand, Varianten-Auswahl und Kauf-Schaltflächen das Kernproduktlayout vervollständigen.

Der Details-Tab-Block organisiert Produktinformationen in einer sauberen, tabellarischen Oberfläche, um die Seite übersichtlich und einfach durchsuchbar zu halten. Sie können benutzerdefinierte Tab-Titel festlegen (z. B. "Kartenbeschreibung" und "Kartenübersicht") und für jeden entsprechenden Inhaltsbereich Rich-Text eingeben.

Tipp: Um automatisch die tatsächliche Beschreibung Ihres Produkts aus Shopify zu übernehmen, klicken Sie auf das Symbol "Dynamische Quelle verbinden" (das Datenbanksymbol neben dem Feldlabel) über dem Inhaltsfeld und wählen Sie Beschreibung aus.

Der Produktmerkmale-Block zeigt wichtige Attribute – wie Kartenrarität oder Zustand – in einer übersichtlichen Beschriftungs- und Werteliste an (unterstützt bis zu 6 benutzerdefinierte Merkmals-Paare).

So verknüpfen Sie benutzerdefinierte Produktdetails

1. Erstellen Sie das Detailfeld (einmalige Einrichtung)
   • Gehen Sie in Shopify zu Einstellungen > Benutzerdaten > Produkte.
   • Klicken Sie auf Definition hinzufügen, benennen Sie Ihr Detail (z. B. "Kartenrarität") und klicken Sie auf Speichern.
2. Fügen Sie Details zu einem Produkt hinzu
   • Öffnen Sie Ihre Produktseite in Shopify.
   • Scrollen Sie zum Abschnitt Metafelder unten, geben Sie den Wert ein (z. B. "Selten") und speichern Sie.
3. Zeigen Sie es in Ihrem Shop an
   • Öffnen Sie im Theme-Editor Ihren Produktmerkmale-Block.
   • Geben Sie die Beschriftung (z. B. "Kartenrarität") im Titel-Feld ein.
   • Klicken Sie im Textfeld auf das gestapelte Datenbanksymbol in der Ecke und wählen Sie Ihren Detailnamen aus, um es automatisch zu verknüpfen!

Der Text mit Icon-Block zeigt bis zu 3 kompakte Feature-Pillen nebeneinander im Produktbereich an, um wichtige Verkaufsargumente hervorzuheben (wie schnellen Versand, Produktgarantien oder Echtheit). Jeder Textblock ermöglicht die Eingabe von benutzerdefiniertem Text zusammen mit rohem SVG-Code, um Ihre Wahl an Vektor-Icons darzustellen.

Der Utility-Button-Block fügt Ihrer Produktseite sekundäre Aktionen hinzu, mit denen Kunden Artikel speichern oder Produkte mit anderen teilen können. Die Einstellungen ermöglichen es Ihnen, die Wunschliste- und Teilen-Buttons unabhängig voneinander ein- oder auszuschalten und die Beschriftungstexte für jeden Button anzupassen.

Typografie

Die Typografie-Einstellungen steuern die globalen Schriftartenstile in Ihrem gesamten Shop. Die Auswahl einer Primärschriftart (wie Work Sans) schafft eine konsistente visuelle Identität, indem Ihre gewählte Schriftart automatisch auf Überschriften, Fließtext, Schaltflächen und Navigationselemente auf der gesamten Website angewendet wird.

Layout

Die Layout-Einstellungen definieren die strukturellen Abmessungen und Abstände Ihres Shops, indem sie die Seitenbreite (maximale Containerbreite für den Hauptinhalt) und den Seitenrand (äußerer Seitenabstand, um zu verhindern, dass Inhalte auf kleineren Displays an den Bildschirmrändern kleben) steuern.

Farben

Die Farben-Einstellungen legen die globale Farbpalette Ihres Shops für vollständige Marken-Konsistenz auf jeder Seite fest:

• Hintergrund & Vordergrund: Legt die Hauptseitenhintergrundfarbe und die Standardakzentgestaltung fest.
• Primär & Sekundär: Definiert die Hauptüberschriften-Schriftfarben (Primär) und Fließtextfarben (Sekundär).
• Rahmen & Akzent: Steuert Linien-Trenner, Container-Rahmen und strukturelle Akzente.
• Schaltflächensteuerung: Passt Hintergrund-, Text- und Rahmenfarben für Schaltflächen an.
• Link & Hover: Legt Standard-Hyperlinkfarben und deren interaktive Hover-Zustände fest.

Soziale Netzwerke

Die Soziale Netzwerke-Einstellungen ermöglichen es Ihnen, Links zu den Social-Media-Konten Ihrer Marke hinzuzufügen. Fügen Sie einfach die URLs Ihrer Profile in die entsprechenden Plattformfelder ein, und die passenden Social-Icons erscheinen automatisch in Ihrer Fußzeile.

Die Logo-Einstellungen ermöglichen es Ihnen, Ihr primäres Shop-Logo hochzuladen, die Anzeigegröße in Pixeln zu steuern und ein Favicon-Symbol festzulegen, das Ihre Website in Browser-Tabs repräsentiert.

Die Warenkorb-Belohnungen-Einstellungen ermöglichen es Ihnen, größere Bestellungen durch bis zu drei gestaffelte Ausgabenziele zu fördern. Definieren Sie spezifische Warenkorb-Beträge und benutzerdefinierte Bezeichnungen für jede Stufe, um eine dynamische Fortschrittsanzeige direkt im Warenkorb-Schubfach anzuzeigen, die Kunden ermutigt, mehr Artikel hinzuzufügen, um Rabatte oder Vorteile freizuschalten.