Sales-Boost-Abschnitte
Dies sind die konversionsorientierten Abschnitte in Vertex — die Dringlichkeitssignale, die Werbeoberflächen, die Modal-Flows, die Bundle-Blöcke. Keine davon erfordern eine Drittanbieter-App. Alle respektieren die Shopify-Theme-Store-Richtlinie (keine persistenten Wunschlisten, keine Tracking-Skripte, keine Affiliate-Links).
Stapeln Sie zu viele Dringlichkeitssignale, und sie heben sich gegenseitig auf. Ein Countdown neben einem Low-Stock-Counter neben einem Werbepopup schreit verzweifelt. Wählen Sie das, was zu Ihrer Kampagne passt, lehnen Sie sich hinein und rotieren Sie.
promo-banner
Abschnittsdatei: sections/promo-banner.liquid
Schließbares Top-Banner — typischerweise verwendet, um einen seitenweiten Sale, eine Versandkostenfrei-Schwelle oder eine saisonale Kampagne zu bewerben. Unterscheidet sich von der Ankündigungsleiste (die immer eingeblendete Chrome ist); das Werbebanner ist kampagnengesteuert und schließbar.
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Text | Richtext | Kurze Wertbotschaft — "Spring Sale · 15% off orders over $1,000". |
| Background color | Color | Wählen Sie einen kontrastreichen Akzent — Amber, Rot-Orange, Teal usw. |
| Link URL | URL | Klickziel für das Banner (das gesamte Band ist klickbar). |
| Link label | Text | Inline-CTA — "Shop the sale →". |
| Dismissible | Checkbox | Standard aktiviert. Fügt den ×-Schließen-Button + localStorage-Persistenz hinzu. |
| Position | Select | above_header (Standard) · below_header. Above-Header wirkt dringender; Below-Header wirkt mehr wie ein Banner. |
Schließbarkeit
Wenn Dismissible aktiviert ist, schreibt der ×-Button einen vertex_promo_dismissed:{section-id}-Schlüssel in localStorage. Das Banner bleibt ausgeblendet, bis der Besucher seine Site-Daten löscht — oder Sie den Abschnitt mit einer anderen ID erneut veröffentlichen.
Wenn Sie ein geschlossenes Promo für eine neue Kampagne erneut einblenden möchten, ändern Sie die Abschnitts-ID (löschen + erneut hinzufügen des Abschnitts im Customizer). Der alte localStorage-Schlüssel wird nicht mehr übereinstimmen, und das Banner erscheint für alle erneut.
promo-popup
Abschnittsdatei: sections/promo-popup.liquid
Automatisch öffnendes Modal mit Bild, Überschrift, Text und CTA. Konfigurierbarer Trigger und cookie-basierte Kadenz, sodass Besucher es nicht bei jedem Seitenladen sehen.
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Heading | Text | "Subscribe & save 10%" / "Wait — get a free swatch kit". |
| Body | Richtext | Kurze Beruhigung + Wertversprechen. |
| Image | Image | Seitlich gerenderte Illustration (oder Vollbild-Hintergrund). |
| CTA label | Text | "Sign up" / "Get the kit". |
| CTA URL | URL | Formularseite oder Produkt. |
| Trigger | Select | immediate · on_scroll (nach Scrollen von 50 % der Seite) · exit_intent (Mausverlassen-Erkennung). |
| Delay seconds | Number | Wird nur verwendet, wenn der Trigger immediate ist. Standard 5. |
| Cookie expiry days | Number | Standard 7. Besucher, die schließen oder konvertieren, sehen es für N Tage nicht erneut. |
Trigger erklärt
| Trigger | Am besten geeignet für | UX-Überlegung |
|---|---|---|
| Immediate (Verzögerung) | Newsletter-Anmeldungen, Erstbesucher-Angebote | Am aufdringlichsten — verwenden Sie mindestens 5–10 Sekunden Verzögerung |
| On scroll (50 %) | Engagement-Signal — wird erst ausgelöst, nachdem der Besucher gescrollt hat, was Interesse signalisiert | Beste Balance aus Konversion + UX |
| Exit intent | Last-Chance-Angebote, Abbruch-Recovery | Nur Desktop — Exit-Intent wird auf Mobile nicht zuverlässig ausgelöst |
Der Cookie-Schlüssel ist vertex_promo_popup:{section-id}. Das Modal öffnet sich erst wieder, wenn das Cookie abläuft.
countdown
Abschnittsdatei: sections/countdown.liquid
Tage / Stunden / Minuten / Sekunden-Zähler. Live-Zählung über JS, serverseitig gerendert für den Anfangszustand (kein Flash).
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Heading | Text | "Spring sale ends in". |
| End date | Datumsauswahl | Datum + Uhrzeit des Ablaufs. Gespeichert in der Shop-Zeitzone des Händlers. |
| Expired text | Text | Ersetzt den Zähler, sobald der Timer auf Null trifft. "The sale has ended". |
| Link URL | URL | Optionaler CTA unter dem Zähler. |
| Link label | Text | "Shop now". |
| Color scheme | Select | Standard-Farbschema-Dropdown. |
Wie es zählt
Das assets/countdown.js führt eine requestAnimationFrame-Schleife aus, die den Timer jede Sekunde aktualisiert. Wenn die Zielzeit erreicht ist, wird der Zähler durch den Expired text ersetzt. Der Link/CTA wird nach Ablauf ausgeblendet.
Gefälschte Countdowns (dauerhaft 24 Stunden, beim Seiten-Reload zurückgesetzt) zerstören das Vertrauen. Verknüpfen Sie das End date mit einem echten Kampagnenende und lassen Sie den Abschnitt sich um den Ablaufzustand kümmern.
featured-bundles
Abschnittsdatei: sections/featured-bundles.liquid
Kuratierte Bundle-Karten mit Bild, Titel, Rabatt-Badge und ATC. Jeder Block ist ein Bundle (typischerweise ein Eltern-Produkt, das 2–5 SKUs bündelt, konfiguriert als Shopify-Bundle in Ihrem Admin).
Einstellungen pro Block
| Einstellung | Typ | Hinweise |
|---|---|---|
| Product | Produkt-Picker | Das Bundle-Eltern-Produkt. |
| Bundle label | Text | Überschreibt den Produkttitel — "Starter MRO Kit". |
| Discount text | Text | Badge über dem Bild eingeblendet — "Save 15%" / "3 for the price of 2". |
| Description | Richtext | Kurzes Wertversprechen unter dem Titel. |
Abschnittseinstellungen
- Heading — "Bundle & save"
- Columns — 2 / 3 / 4
- Show price — Toggle (respektiert Login-required pricing)
Styling des Rabatt-Badges
Der Rabatt-Text wird als runde Pille über der rechten oberen Ecke des Bildes gerendert. Verwenden Sie Akzentfarben (Amber, Rot-Orange, Teal) — das Badge ist klein genug, sodass es das Bundle-Visual nicht überwältigt.
Stock-Counter (Low-Stock-Indikator)
Snippet: snippets/stock-counter.liquid (gerendert als Block in main-product)
Bereits behandelt in Produktseite. Er erscheint nur für Varianten, deren Bestand Sie tracken, und wechselt zur Warnung „Only N left", sobald der Bestand den Low-Stock-Schwellenwert (10 Einheiten) erreicht. Der Schwellenwert ist auf 10 fest eingestellt — es ist keine Theme-Einstellung. Er löst Dringlichkeit aus, ohne exakte Bestände an Wettbewerber preiszugeben.
Zustände:
- Mehr als 10 auf Lager: "In stock"
- Bei oder unter 10: "Only 4 left in stock"
- Nachbestellbar (null, auf Weiterverkauf gesetzt): "Back-ordered — ships in 7–10 days"
- Ausverkauft (null, nicht nachbestellbar): "Sold out" (mit Back-in-Stock-Formular)
Back-in-Stock-Alert
Snippet: snippets/back-in-stock.liquid (automatisch auf ausverkauften Varianten in main-product gerendert)
E-Mail-Opt-in-Formular, das auf ausverkauften Varianten erscheint, wenn Pre-Order nicht aktiviert ist. Nativ — keine Drittanbieter-App.
Wie es funktioniert
- Käufer wählt eine ausverkaufte Variante
- Der ATC wird durch eine E-Mail-Eingabe + Notify me-Button ersetzt
- Beim Absenden wird die E-Mail des Käufers mit einem
back_in_stock:{product_id}:{variant_id}-Tag in die Shopify-Kundenliste geschrieben - Wenn Sie nachfüllen und die Variante erneut veröffentlichen, können Sie Kunden nach diesem Tag filtern und eine Kampagne senden
Was der Händler tun muss
- Erstellen Sie ein Kundensegment im Shopify-Admin, gefiltert nach dem
back_in_stock:{product_id}:*-Tag - Wenn Sie nachfüllen, senden Sie eine manuelle Kampagne an dieses Segment über Shopify Email oder Ihren ESP
Vertex erfasst das Opt-in. Das Senden der Restock-E-Mail ist ein manueller Schritt — Shopify exponiert keinen nativen "Auto-E-Mail-bei-Restock"-Hook aus dem Theme-Code ohne App. Der Kompromiss ist volle Theme-Store-Richtlinien-Konformität + null Monatskosten.
Quick-View-Modal
Asset: assets/quick-view.js + snippets/quick-view-button.liquid
Ausgelöst durch den Quick view-Button auf Produktkarten. Öffnet ein Modal mit der Produktgalerie, Variantenauswahl, Mengeneingabe und ATC — ohne die Kollektionsseite zu verlassen.
Was im Modal gerendert wird
- Multi-Bild-Galerie (mit Wischen auf Mobile)
- Titel + Preis (respektiert Login-required pricing + B2B-Katalogpreis)
- Variantenauswahl
- Mengeneingabe (mit MOQ- / Max- / Case-Pack-Durchsetzung)
- ATC-Button
- "View full details →"-Link zur PDP
Einstellungen (auf Produktkarte / Kollektionsabschnitten)
- Show quick view button — Toggle (pro Abschnitt:
featured-collection,collection-list, Suchergebnisse, Related Products) - Quick view button label — Text (Standard "Quick view")
Wann aktivieren / deaktivieren
| Anwendungsfall | Empfehlung |
|---|---|
| Hochvolumiger Katalog, in dem Käufer Varianten schnell vergleichen | Aktivieren — beschleunigt den "20 Produkte durchsuchen, 3 hinzufügen"-Flow |
| Hochtechnischer Katalog, in dem Käufer Datenblätter + Specs vor der Entscheidung benötigen | Deaktivieren — Quick-View bringt keine Specs oder Dokumente an die Oberfläche; erzwingen Sie den Click-Through zur PDP |
Wann was verwenden
| Ziel | Abschnitt |
|---|---|
| Aufmerksamkeit auf eine seitenweite Kampagne lenken | promo-banner |
| E-Mail erfassen + Erstkäufer-Rabatt anbieten | promo-popup |
| Zeitlich begrenztes Angebot mit hartem Ablauf | countdown |
| Kuratierte Multi-Produkt-Angebote hervorheben | featured-bundles |
| Dringlichkeit auf der PDP ohne Offenlegung exakter Bestände | Stock-Counter |
| Nachfrage für ausverkaufte Artikel erfassen | Back-in-Stock-Alert |
| Reibung im Kollektionsseite → ATC-Flow reduzieren | Quick-View |
Wie es weitergeht
- Produktseiten-Abschnitte → — Stock-Counter + Back-in-Stock auf der PDP im Detail
- Startseiten-Marketing → — Wo Werbebanner auf der Startseite zu platzieren sind
- Finder-Abschnitte → — Make/Model/Year + Brand/Category/Capacity-Finder
- Theme-Einstellungen-Referenz → — Farbschemata, Layout und die Produktseiten-Schalter