Homepage- & Marketing-Sections
Vertex liefert 30+ homepagebereite Sections für B2B- und Industriebedarf-Storefronts: Hero-Rotatoren, editoriale Multicolumns, Trust-Marks, KPI-Bars, FAQ-Accordions mit auto-emittiertem JSON-LD, Conversion-Banner und 50/50-Merged-Sections, die zwei verwandte Ideen in einem Band kombinieren (Brands + Quick-Order, Resources + FAQ).
Jede Section hier ist eine eigenständige OS-2.0-Section. Ziehen Sie sie im Customizer in beliebige Reihenfolge. Sie müssen sie auch nicht auf der Homepage verwenden — legen Sie sie auf page.about.json, page.services.json oder ein beliebiges Custom-Page-Template.
Hero- & Eröffnungs-Sections
hero
Section-Datei: sections/hero.liquid
Multi-Slide-Rotator mit Auto-Advance, Dot-Navigation und editorialer Komposition (Eyebrow + Headline + Subhead + Dual-CTAs). Standardmäßig ein Slide für den schnellsten LCP — zusätzliche Slides sind Progressive Enhancement.
Pro-Slide-Block-Einstellungen: Bild (mit mobile-bewusster Breitenauswahl via <picture><source>), Eyebrow-Text, Headline, Subhead, primäres CTA-Label + URL, sekundäres CTA-Label + URL, Ausrichtung (links / zentriert).
Section-Einstellungen: Auto-Advance-Intervall (Sekunden), Dots-anzeigen-Toggle, Farbschema.
Halten Sie die Homepage auf einem einzelnen Hero-Slide, wenn Lighthouse-Performance Priorität hat. Jeder zusätzliche Slide fügt der initialen Payload ein Hero-großes Bild hinzu. Der Standard wird aus diesem Grund mit 1 Slide ausgeliefert.
featured-collection
Section-Datei: sections/featured-collection.liquid
Produkt-Grid, das aus einem Collection-Picker zieht. Akzeptiert @app-Blöcke für Theme-Store-Konformität.
Einstellungen: Collection-Picker, Heading, Produkte-pro-Reihe (2 / 3 / 4 / 5), Spalten auf Mobile (1 / 2), View all-Link anzeigen, Farbschema.
collection-list
Section-Datei: sections/collection-list.liquid
Kategorie-Grid mit Bild-Overlays und Titeln, die über jeder Kachel zentriert sind. Konfigurierbare Spalten und Seitenverhältnis.
Editoriale Blöcke
image-with-text
Section-Datei: sections/image-with-text.liquid
Klassische 50/50- oder asymmetrische Bild-+-Text-Paarung. Nützlich für Über uns, Unser Prozess, Warum wir.
Einstellungen: Bild, Heading, Body (Richtext), CTA-Label + URL, Layout (image-left / image-right), Farbschema.
multicolumn
Section-Datei: sections/multicolumn.liquid
2-, 3- oder 4-spaltiges Grid. Jede Spalte hat ein Icon (oder Bild), Heading, Body und einen optionalen Link. Verwenden Sie es für Value Propositions (Versand am selben Tag · NET-30 · Staffelpreise · ISO 9001 zertifiziert).
Pro-Spalten-Block-Einstellungen: Icon (Bild), Heading, Body, Link-Label + URL.
rich-text
Section-Datei: sections/rich-text.liquid
Zentrierter Intro- oder About-Block. Heading + Richtext-Body + optionaler CTA. Sparsam verwenden — es ist der "Page-Break"-Block.
timeline
Section-Datei: sections/timeline.liquid
Jahr-+-Meilenstein-Chronik für eine About-Seite. Pro Block: Jahr, Titel, Body.
Trust & Social Proof
testimonials
Section-Datei: sections/testimonials.liquid
Bewertete Karten mit Avatar-Overlap-Header-Treatment. Jede Karte hat eine Bewertung (1–5 Sterne), Zitat, Kundenname, Rolle, Unternehmen und Avatar-Bild.
Pro-Block-Einstellungen: Name, Rolle, Unternehmen, Zitat (Richtext), Bewertung (1–5), Avatar (Bild).
logo-list
Section-Datei: sections/logo-list.liquid
Marquee-scrollende Markenlogos mit Fading-Grid-Linien. Verwenden Sie es für Vertraut von / Erschienen in / Marken, die wir führen.
Pro-Block-Einstellungen: Logo-Bild, optionale URL. Section-Ebene: Scroll-Geschwindigkeit, Grid-Linien anzeigen.
press-coverage
Section-Datei: sections/press-coverage.liquid
Logo-Strip + Pull-Quotes. Kombiniert Presse-Logos mit kurzen zugeschriebenen Zitaten — "...das McMaster-Carr von WordPress." — Trade Weekly.
stats-bar
Section-Datei: sections/stats-bar.liquid
Dark-Mode-KPI-Band. Verwenden Sie es für Headline-Zahlen — 40.000+ SKUs · NET-30 · 24-Std.-Versand · ISO 9001.
Pro-Block-Einstellungen: Zahl (großer Text), Label (kleiner Text).
"40.000+ SKUs" liest sich stärker als "40.127 SKUs" und erfordert kein Aktualisieren der Section bei jeder Bestandsänderung. Dasselbe gilt für das Bestellvolumen.
Conversion & CTA
cta-banner
Section-Datei: sections/cta-banner.liquid
Pre-Footer-Call-to-Action mit Überlapp-in-Footer-Effekt — das Band bricht visuell in den Footer für editorialen Schliff.
Einstellungen: Heading, Subhead, primärer CTA, sekundärer CTA, Bild (optional), Für B2B-Kunden verbergen-Toggle.
Der Für B2B-Kunden verbergen-Toggle ist ein kleines, aber kritisches Detail. Wenn der CTA "Händler werden" oder "Angebot anfordern" lautet, möchten Sie ihn einem Käufer, der bereits ein eingeloggter Händler ist, nicht zeigen. Aktivieren Sie ihn, und die Section verschwindet, wenn customer.b2b? true ist.
newsletter
Section-Datei: sections/newsletter.liquid
E-Mail-Opt-in mit Subscribe-Button. Verwendet Shopifys natives Customer-Newsletter-Formular — Subscriber landen in Ihrer Shopify-Kundenliste mit dem newsletter-Flag.
industries-grid
Section-Datei: sections/industries-grid.liquid
Editoriales Karten-Grid zur Präsentation der von Ihnen bedienten Branchen — HVAC · Manufacturing · Facilities · Marine · Aerospace.
Pro-Block-Einstellungen: Bild, Titel, Link.
resource-hub
Section-Datei: sections/resource-hub.liquid
Downloads-Liste für Datenblätter, MSDS, Broschüren, Zertifizierungen. Jeder Eintrag ist ein Datei-Link.
Pro-Block-Einstellungen: Titel, Datei (PDF), Beschreibung, optionales Icon.
services-grid
Section-Datei: sections/services-grid.liquid
Bild-Overlay-Tiles für Service-Angebote — Cut to size · Custom kitting · Onsite consultation · Inventory management.
FAQ
faq
Section-Datei: sections/faq.liquid
Disclosure-basiertes Accordion (gebaut auf nativem <details> / <summary> für vollen Tastatur- + Screenreader-Support). Emittiert automatisch FAQPage-JSON-LD für Google-Rich-Snippets.
Pro-Block-Einstellungen: Frage (Text), Antwort (Richtext).
Die Section emittiert den JSON-LD-Graph automatisch — Sie erhalten FAQ-Rich-Snippets in den Google-Suchergebnissen, ohne Code zu berühren. Achten Sie darauf, dass die Fragen echte Fragen sind, die Käufer stellen (keine Marketing-Texte), da Googles Content-Richtlinien gelten.
Dual-Purpose-Merged-Sections
Einige Sections kombinieren zwei Ideen in einem Band, sparen vertikalen Raum und erzeugen editorialen Rhythmus.
dual-brands-quickorder
Section-Datei: sections/dual-brands-quickorder.liquid
50/50 gemerged: Markenlogos-Grid auf einer Seite, Quick-Order-Paste-to-Cart-Pad auf der anderen. Großartig für B2B-Homepages, auf denen Sie Trust-Marks UND einen Conversion-Pfad im selben Band präsentieren möchten.
dual-resources-faq
Section-Datei: sections/dual-resources-faq.liquid
50/50 gemerged: Resource-Downloads (Datenblätter, Broschüren) auf einer Seite, FAQ-Accordion auf der anderen. Übliche Kombination für support-lastige Branchen.
Empfehlungen zur Section-Reihenfolge
Vorgeschlagene Reihenfolge für eine MRO- / Industriebedarf-Homepage:
- Hero — das Wertversprechen + primärer CTA (Katalog vs. RFQ)
- Stats Bar — sofortige Credibility-Marks
- Featured Collection — Bestseller oder Top-of-Funnel-Kategorie
- Multicolumn — Warum wir in 3 Spalten
- Industries Grid — die von Ihnen bedienten Branchen
- Logo List — Marken, die Sie führen
- Dual Brands + Quickorder — kombiniert mit dem Trade-List-CTA
- Testimonials — Käufer-Zitate mit Bewertungen
- Resource Hub — Downloads
- FAQ — Top-Einwände
- CTA-Banner — Angebot anfordern (für eingeloggte B2B ausgeblendet)
- Newsletter — Trade-Listen-Signup
Was kommt als Nächstes
- Produktseiten-Sections → — Main Product, Tabs, Related Products, Recently Viewed, Sticky Cart
- B2B-only-Sections → — B2B-Feature-Promo, Bulk Order, RFQ, Compare
- Sales-Boost-Sections → — Promo-Banner, Countdown, Bundles, Stock-Counter
- Finder-Sections → — Make/Model/Year-, Brand/Category/Capacity-, Printer-Finder
- Theme-Settings-Referenz → — Farbschemata, Typografie, Layout-Einstellungen