Der Kopfbereich steuert die Navigation auf oberster Ebene, das Branding und Schnellzugriffs-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 Seitenschublade (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 Shop-Richtlinien 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, Schriftgewichte einstellen und Standardbeschriftungen wie Abschnittsüberschrift, Linktext und "Weiterlesen"-Schaltflächen definieren. 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 Kampagnen-Hub-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 Warenkorb-Schublade ermöglicht es Kunden, Artikel über ein Dropdown-Menü in der Kopfzeile oder eine hochschiebbare Schublade mit Mengensteuerungen, Promo-Eingaben und Checkout-Links zu überprüfen und zu verwalten (erfordert das Hinzufügen des Warenkorb-Schubladenblocks unter Kopfbereich). In den Theme-Einstellungen > Warenkorb-Belohnungen 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 Content Gallery Grid kombiniert vorgestellte Medienelemente (Video und statische Bilder) mit einem sauberen Kundenbewertungs-Karussell.

• Allgemeine Abschnittseinstellungen: Passen Sie den oberen und unteren Abstand, den Abschnittsuntertitel (z. B. "KUNDENBEWERTUNGEN"), das Hauptbild, Videomedien und die Farben der Containerrahmen 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 vornehmen: Sternebewertung, Bewertungstext, Autor und Bezeichnung.

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

• Kollektion & Überschrift: Wählen Sie aus, welche Shop-Kollektion angezeigt werden soll, und legen Sie einen benutzerdefinierten Abschnittstitel fest (z. B. "Mythos Fantasy Karten").
• Abzeicheneinstellungen: Fügen Sie neben der Überschrift ein werbliches Auszeichnungsabzeichen hinzu (z. B. "NEU"), 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 benutzerdefinierter Beschriftung (z. B. "Kollektion shoppen") und Direktlink.
• Styling & Layout: Legen Sie benutzerdefinierte Farben für den Abschnittshintergrund, den Schaltflächenhintergrund und den Schaltflächentext fest, sowie Steuerungen für den oberen und unteren Abschnittsabstand.

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

Einstellungen für Kollektion-Kartenblöcke

Für jeden Kartenblock können Sie konfigurieren:

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

Der Abschnitt "Collections Grid" zeigt ein responsives Layout mit vorgestellten Sammlungskarten mit ausgewählten Bildern und direkten Sammlungstiteln. Die Steuerungen des Abschnitts ermöglichen das Umschalten der Rasterelementgröße (Klein/Groß) und die Anpassung des Rasterabstands, während einzelne Sammlungsblöcke es Ihnen erlauben, bestimmte Shop-Sammlungen auszuwählen und hervorzuheben.

Der Abschnitt "Kontaktformular" zeigt ein schlankes Kundenanfrageformular in einem dunklen Kartencontainer. 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 Abschnitt "Held" verfügt über ein vollflächiges Hintergrundbanner mit zentrierten Textüberlagerungen und einer Call-to-Action-Schaltfläche. Die Steuerungen des Abschnitts 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 "Held-Hotspots" kombiniert ein interaktives Banner-Held-Element mit präzisen Hotspot-Symbolen (+ Indikatoren), die beim Überfahren verlinkte Sammlungskarussells anzeigen. Die Einstellungen des Abschnitts steuern die Typografie des Helden, die Gestaltung der Schaltflächen, Desktop-/Mobile-Hintergrundbilder und die Deckkraft der Überlagerung, während einzelne Hotspot-Blöcke es ermöglichen, Titel, Beschreibungen, Zielkollektionen und genaue X/Y-Prozentkoordinaten zuzuweisen, um jeden Pin über dem Bild zu positionieren.

Der Abschnitt "Schaufenster mit Tooltips" kombiniert ein hervorgehobenes Hintergrundbanner mit linksbündigen Überschriften, Beschreibungen und anpassbaren Aufzählungspunkten. Die Einstellungen des Abschnitts ermöglichen die Anpassung der Hintergrundmedien, der Deckkraft der Überlagerung und der Kartengestaltung (Farben und Randradius), während Hotspot-Blöcke das Platzieren interaktiver Pins über das Bild mit unabhängigen Desktop- und mobilen X/Y-Koordinaten erlauben, um Pop-up-Kartendetails und Links anzuzeigen.

Der Abschnitt "Textlaufband" erstellt ein animiertes, kontinuierlich scrollendes Textbanner für Ankündigungen und Seitenwarnungen. Die Einstellungen des Abschnitts 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 lassen.

Der Abschnitt "Text mit Symbolen" zeigt Feature-Karten mit benutzerdefinierten Symbolen, Titeln und Beschreibungen, die in einem mehrspaltigen Raster angeordnet sind. Die allgemeinen Einstellungen des Abschnitts ermöglichen die Anpassung von Überschriften, Spalten pro Reihe, Rasterabstand, Symbolgrößen 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 kartenbezogener 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 einem Indikator für die aktuelle Seite rechts. Die Einstellungen des Abschnitts ermöglichen die Anpassung der Hintergrundfarbe, der Beschriftung der Zurück-Schaltfläche (z. B. "Zurück") 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 klickt, wird dieser Artikel gespeichert und automatisch als Kartenraster in diesem Abschnitt angezeigt – so haben Kunden einen einfachen, zentralen Ort, um ihre favorisierten Artikel später zu überprüfen und zu kaufen.

Der Fußzeilenabschnitt 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 Shop-Richtlinien in der unteren Leiste aktivieren.

Fußzeilenblö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 Ihren Shopnamen ein- oder ausblenden.

• Link-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 von Hintergrundfarbe, Abschnittsbreite, klebenden Bildern, Randradius und 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 sauberen 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") in das Titelfeld 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 Symbol-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 Vektorsymbolen darzustellen.

Der Dienstprogramm-Schaltflächen-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-Schaltflächen unabhängig voneinander ein- oder auszuschalten und die Beschriftungstexte für jede Schaltfläche 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 und wendet Ihre gewählte Schriftart automatisch auf Überschriften, Fließtext, Schaltflächen und Navigationselemente auf der gesamten Website an.

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 fest, um vollständige Marken-Konsistenz auf jeder Seite zu gewährleisten:

• Hintergrund & Vordergrund: Legt die Hauptseiten-Hintergrundfarbe und die Standard-Akzentgestaltung 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ächen-Steuerung: 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 Ihre Profil-URLs 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.