Storefront-Builder

Abschnitte und Blöcke

Alle im Builder verfügbaren Abschnitts- und Blocktypen mit einer Beschreibung, was jeder Einzelne zu Ihrem Shop hinzufügt.

Abschnitte versus Blöcke

Ein Abschnitt ist eine vollbreite Zeile auf einer Seite. Abschnitte stapeln sich vertikal und können neu angeordnet, ausgeblendet oder gelöscht werden. Ein Block ist ein Inhaltselement innerhalb eines Abschnitts: ein Textblock, ein Bild, eine Schaltfläche oder eine Layout-Gruppe. Einige Abschnitte enthalten einen festen Satz von Blöcken (wie der Header), während andere das freie Hinzufügen, Entfernen und Neuanordnen von Blöcken erlauben.

Globale Abschnitte (erscheinen auf jeder Seite)

Ankündigungsleiste

Ein schmaler Werbestreifen oben auf der Seite. Sie können bis zu 7 individuelle Ankündigungsnachrichten hinzufügen, jeweils mit eigenem Text. Nachrichten wechseln in zwei Modi: Laufschrift (kontinuierliches horizontales Scrollen) oder Diashow (eigenständige Übergänge mit einem konfigurierbaren Intervall von 2-10 Sekunden). Zusätzliche Optionen umfassen Textrichtung (links nach rechts oder rechts nach links), ein Trennzeichen zwischen Laufschrift-Nachrichten, Schriftgröße (10-30 px) und Farbschema. Sie können maximal 2 Ankündigungsleisten pro Seite hinzufügen.

Die Haupt-Navigationsleiste. Sie enthält fünf feste Blöcke, die nicht hinzugefügt, entfernt oder neu angeordnet, nur konfiguriert werden können:

Logo: zeigt das Markenbild Ihres Shops an. Legen Sie die Position (links, Mitte oder rechts), Breite (20-300 px), Höhe (20-300 px) und Polsterung fest.
Menü: das Navigationsmenü. Wählen Sie ein Menü, das Sie in Menüs erstellt haben, dann legen Sie seine horizontale Position, die Header-Zeile (oben oder unten), den Anzeigetyp (Schublade, Mega-Menü oder Dropdown) und das Farbschema für das Dropdown-Panel fest. Eine Menüleisten-Option fügt einen vollbreiten farbigen Streifen hinter der unteren Zeile hinzu.
Suche: ein Suchsymbol, das eine Produktsuchüberlagerung öffnet. Legen Sie seine horizontale Position (links oder rechts) und die Zeile fest, in der es sitzt.
Warenkorb: das Warenkorb-Symbol mit einem Artikelanzahl-Badge. Anzeigetyp-Optionen: Schublade (ein Seitenpanel), Dropdown (ein Mini-Warenkorb im Header) oder Seite (leitet zur vollständigen Warenkorbseite weiter). Jeder Typ hat einen eigenen Farbschema-Selektor.
Lokalisierung: ein Land- und Sprachselektor für Multi-Markt-Shops. Schalten Sie ein, ob der Ländername und die Flagge angezeigt werden sollen, und legen Sie Position und Zeile fest.

Einstellungen auf Header-Ebene umfassen: Sticky-Verhalten (Scrollen (smart-sticky: versteckt sich beim Runterscrollen, erscheint beim Hochscrollen wieder), Immer (dauerhaft am oberen Rand fixiert), Reduzieren (schrumpft beim Scrollen) oder Nie (scrollt mit der Seite)), plus Breite (seitenbegrenzt oder randlos), Farbschema, obere und untere Polsterung und ein benutzerdefiniertes CSS-Feld. Maximal 1 Header pro Seite.

Der untere Bereich jeder Seite. Sie können Blöcke im Footer hinzufügen, entfernen und neu anordnen. Verfügbare Footer-Blöcke:

Über uns: ein Markenbereich mit Ihrem Logo, Textblöcken, Kontaktinformationen und optionalen Layout-Gruppen. Unterstützt Richtungs-, Ausrichtungs-, Abstands-, Breiten- und Polsterungssteuerungen. Maximal 1 pro Footer.
Menü: ein als Link-Liste angezeigtes Navigationsmenü. Wählen Sie ein Menü, das Sie in Menüs erstellt haben. Maximal 1 pro Footer.
Social-Media-Symbole: eine Zeile von Social-Plattform-Symbolen. Unterstützte Plattformen: Facebook, Instagram, Threads, X (Twitter), TikTok, Snapchat, YouTube, LinkedIn, Pinterest, Tumblr, WhatsApp und Telegram. Symbol-Größe (12-64 px), Abstand (0-48 px), Form (keine, Kreis, abgerundet oder quadratisch), Form-Füllstil (flach oder Umriss), Containergröße (26-80 px), Farbpalette (Markenfarben, monochrom oder eine benutzerdefinierte Farbe) und Hover-Effekt (keine, Marke, Skalierung, Anheben oder Deckkraft) konfigurierbar. Maximal 1 pro Footer.
Zahlungssymbole: zeigt automatisch Symbole für die in Ihrem Shop aktivierten Zahlungsmethoden an (Visa, Mastercard, PayPal, Stripe, Apple Pay usw.). Keine Konfiguration erforderlich. Maximal 1 pro Footer.
Datenschutz-Links: Links zu Ihren rechtlichen Seiten (Datenschutzrichtlinie, Nutzungsbedingungen, Rückerstattungsrichtlinie, Versandrichtlinie), automatisch aus Ihren Shop-Richtlinien generiert. Schriftgröße (12-20 px) und Textfall (Standard oder Großbuchstaben) festlegbar. Maximal 1 pro Footer.
Copyright: zeigt das Copyright-Jahr und Ihren Shop-Namen an, mit einer optionalen „Powered by Storeep“-Zeile. Schriftgröße (12-20 px), Textfall und ob die Storeep-Zuschreibung angezeigt werden soll festlegbar. Maximal 1 pro Footer.
Text, Trennlinie und Gruppe: dieselben Layout-Komponenten, die in anderen Abschnitten verfügbar sind. Siehe Layout-Komponenten für vollständige Details.

Abschnitte der Startseite

Hero

Ein vollansichtsgroßer Banner-Abschnitt mit einem Medienhintergrund (Bild oder Video). Zwei Anzeigemodi: Einzeln (ein Hintergrund) und Geteilt (zwei Medienpanels nebeneinander). Höhenvoreinstellungen: Klein (50% der Viewport-Höhe), Mittel (70%), Groß (90%), Vollbild (die volle Bildschirmhöhe), Bild (nimmt die natürliche Größe Ihrer Medien an, sodass das gesamte Bild sichtbar ist) oder Benutzerdefiniert (ein benutzerdefinierter Prozentsatz). Inhaltsblöcke überlagern die Medien und unterstützen dieselben Layout-Steuerungen wie eine Gruppe: Richtung, Ausrichtung, Abstand und Polsterung. Eine Überlagerung mit einer einfarbigen oder Verlaufsfüllung kann über die Medien angewendet werden. Wenn direkt nach dem Header platziert und die Option Transparenter Header aktiviert ist, mischt sich der Header in den Hero und verwendet sein Farbschema.

Ausgewählte Produkte

Ein Produktraster oder -karussell aus Ihrem Katalog. Quelloptionen: Manuell (Sie wählen bestimmte Produkte aus), Neueste (die zuletzt hinzugefügten Produkte) oder Bestseller (Produkte geordnet nach Verkaufsvolumen). Desktop-Spalten (1-8), mobile Spalten (1 oder 2), Abstand zwischen Karten, Abschnittsbreite und Farbschema konfigurierbar. Enthält einen Produktkarten-Block, der das Layout jeder Karte definiert (Bild, Titel, Preis, Bewertung und Kaufschaltfläche), plus optionale Text- und Trennlinien-Blöcke ober- oder unterhalb des Rasters.

Diashow

Ein vollbreites Bild- oder Video-Karussell. Jede Folie kann ihren eigenen Medienhintergrund, Überlagerung und Inhaltsblöcke (Text, Schaltfläche, Gruppe und Trennlinie) haben. Bis zu 7 Folien pro Diashow, mit maximal 2 Diashow-Abschnitten pro Seite. Nur auf der Startseite verfügbar.

Ein E-Mail-Abonnementformular. Anzeigemodi: Inline (in die Seite eingebettet) oder Fest (ein schwebendes Widget, das am unteren Rand verankert ist). Blöcke im Inneren umfassen Text (Überschriften und Beschreibungen), ein E-Mail-Eingabefeld (mit optionalem Label, Platzhalter und Datenschutzhinweis), eine Abonnieren-Schaltfläche (Symbol oder Text-Label, mit Option, sie visuell in das Eingabefeld einzufügen), Trennlinien und Gruppen. Sie können auch die Erfolgsüberschrift und -nachricht konfigurieren, die nach der Anmeldung angezeigt wird.

Abschnitte der Produktseite

Produktinformationen

Der Hauptabschnitt mit Produktdetails. Enthält die Produktmediengalerie (Bilder und Videos), den Produktdetailbereich (Titel, Preis, Rabatt-Badge, Varianten, Kaufformular, WhatsApp-Bestellschaltfläche und Countdown-Timer) und den Produktbeschreibungsblock. Das Kaufformular unterstützt ein Inline- oder Popup-Layout, eine Bestellzusammenfassung-Umschaltung, benutzerdefinierten Überschriften- und Unterüberschriftentext, benutzerdefinierte Schaltflächen-Labels für In den Warenkorb und Jetzt kaufen, einen Geschenknachrichten-Hook und einen Countdown-Timer für den Ablauf von Rabatten. Dieser Abschnitt ist auf der Produktseite erforderlich.

Bewertungen

Zeigt Kundenbewertungen für das aktuelle Produkt an. Enthält einen Bewertungszusammenfassungsblock (durchschnittliche Sternebewertung, Gesamtanzahl der Bewertungen und optionale Sterneverteilungsbalken) und einen Bewertungsformularblock (eine Schaltfläche, die ein Bewertungseinreichungsfeld öffnet). Bewertungen werden vor der Veröffentlichung moderiert.

Landingpage-Abschnitte

Landingpage-Informationen

Der Produktverkaufsabschnitt für Landingpages. Ähnlich wie Produktinformationen, aber für eine dedizierte Verkaufsseite angeordnet: kombiniert das Produktformular, Medien, Beschreibung und verwandte Inhaltsblöcke in einem einzigen fokussierten Layout. Dieser Abschnitt ist auf der Landingpage erforderlich.

Kollektionsseiten-Abschnitte

Kollektionsprodukte

Das Produktraster für eine Kollektionsseite. Angezeigte Produkte werden aus der Kollektion gezogen, zu der der Käufer navigiert hat. Desktop-Spalten (1-8), mobile Spalten (1 oder 2), Abstand zwischen Karten, Sortieroptionen, eine Filter-Seitenleiste und das Produktkarten-Layout konfigurierbar. Dieser Abschnitt ist auf der Kollektionsseite erforderlich.

Suchseiten-Abschnitte

Suchprodukte

Das Produktraster für Suchergebnisse. Rendert Produkte, die der Suchanfrage des Käufers entsprechen. Verwendet dieselbe Karten- und Rasterkonfiguration wie der Abschnitt „Kollektionsprodukte“. Dieser Abschnitt ist auf der Suchseite erforderlich.

Kontaktseiten-Abschnitte

Kontakt

Ein Kontaktformular mit Name-, E-Mail-, Betreff- und Nachrichtenfeldern. Sie können Textblöcke und Layout-Gruppen ober- oder unterhalb des Formulars hinzufügen. Das Label der Senden-Schaltfläche und der Stil (primär oder sekundär) sind konfigurierbar. Eingereichte Nachrichten werden an Ihre Shop-E-Mail-Adresse gesendet. Dieser Abschnitt ist auf der Kontaktseite erforderlich.

Auf allen Seiten verfügbare Abschnitte

Text

Ein eigenständiger Textabschnitt für eine Überschrift, einen Absatz oder einen formatierten Inhaltsblock. Bis zu 3 Textabschnitte pro Seite. Siehe Layout-Komponenten für alle Texteinstellungen.

Bild

Ein eigenständiger Bildabschnitt. Bis zu 3 Bildabschnitte pro Seite. Breite, Ausrichtung, Seitenverhältnis (auto, Hochformat 3:4, Quadrat 1:1 oder Querformat 4:3), Anpassung (Abdecken oder Enthalten), Eckenrundung, Polsterung und ein optionaler Klick-Link konfigurierbar.

Trennlinie

Eine horizontale oder vertikale Trennlinie. Bis zu 10 Trennlinienabschnitte pro Seite. Dicke, Länge (als Prozentsatz des Containers), Endkappenstil (scharf oder abgerundet), Ausrichtung, Farbschema, Breite (anpassen oder füllen) und Polsterung konfigurierbar. Siehe Layout-Komponenten für vollständige Details.

FAQ

Ein Akkordeon-artiger Bereich mit häufig gestellten Fragen. Fügen Sie so viele Frage-und-Antwort-Paare hinzu, wie Sie benötigen. Farbschema, Abschnittsbreite und Polsterung konfigurierbar.

Benutzerdefinierter Code

Ein Abschnitt für rohes HTML, CSS und JavaScript. Ihr HTML wird innerhalb eines eindeutigen Containers auf der Seite eingefügt. Von Ihnen geschriebenes CSS wird automatisch auf diesen Container beschränkt, sodass Ihre Stile keine anderen Abschnitte beeinflussen können. JavaScript läuft in einem isolierten Bereich und erhält den Container als einzige Referenz, geladen nachdem der Seiteninhalt fertig ist, sodass Ihre Abfragen korrekt aufgelöst werden. Maximal 2 benutzerdefinierte Code-Abschnitte pro Seite. Nützlich zum Einbetten von Drittanbieter-Widgets, benutzerdefinierten Animationen oder allem anderen, was die Standard-Abschnitte nicht ausdrücken können.