Header, Footer & Site Chrome
Das Chrome ist alles, was Ihre Storefront umrahmt — die Announcement Bar, der Header (Logo, Nav, Suche, Account, Cart), die B2B-Begrüßungsleiste, die automatisch für eingeloggte Unternehmenskäufer erscheint, sowie der Footer. In Vertex ist jedes Teil dieses Chromes ab Werk B2B-bewusst: Switcher, Badges und REP-Pills erscheinen automatisch, wenn ein Unternehmenskäufer angemeldet ist, und degradieren elegant zu einem ausgefeilten B2C-Layout, wenn nicht.
Sie müssen nicht zwischen einem "B2B-Header" und einem "B2C-Header" wählen. Vertex rendert einen Header — und legt die bernsteinfarbene B2B-Begrüßungsleiste darüber, sobald sich ein Unternehmenskäufer anmeldet. Gäste erhalten den sauberen weißen Header; eingeloggte Käufer erhalten denselben Header plus ihre Firmen-Badges, NET-Terms-Pill, Steuerbefreiungs-Indikator und Ship-to-Switcher.
Announcement Bar
Section-Datei: sections/announcement-bar.liquid
Die APEX-style-Top-Leiste über dem Hauptheader — Text auf der linken Seite, optionales Left-Icon (Truck / Lightning / Lock), Telefonnummer, Social-Icons und ein schließbares × auf der rechten Seite. Zwei Farbschemata werden out of the box ausgeliefert: dark und amber.
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Text | Rich Text | Kurze Werbebotschaft — "Kostenloser Versand ab 500 $", "NET-30 für qualifizierte Käufer verfügbar". Unterstützt Inline-Links. |
| Left icon | Select | truck · lightning · lock · none. Paart ein SVG-Glyph mit dem Text. |
| Phone number | Text | Rechtsbündige Telefon-Pill. Tap-to-call auf Mobilgeräten (tel:-Link). |
| Instagram URL | URL | Markenspezifisches Social-Icon. Wird nur gerendert, wenn ausgefüllt. |
| LinkedIn URL | URL | LinkedIn-Icon. |
| X (Twitter) URL | URL | X-Icon. |
| YouTube URL | URL | YouTube-Icon. |
| Color scheme | Select | dark (Standard) oder amber. |
Link-Blöcke
Fügen Sie Link-Blöcke hinzu, um kleine Textlinks in die Announcement Bar zu schieben — Spezialangebote, Händler werden, Ressourcen. Jeder Block hat ein label und eine url.
Schließbar
Der ×-Button auf der rechten Seite schließt die Announcement Bar für den aktuellen Besucher. Der Zustand wird über assets/announcement-dismiss.js in localStorage persistiert, sodass die Leiste verborgen bleibt, bis der Besucher seine Site-Daten löscht.
Das Amber-Schema entspricht der Akzentfarbe der B2B-Begrüßungsleiste. Verwenden Sie es, wenn Ihre Ankündigung ein B2B-Wertversprechen ist (NET-30-Zahlungsziele, Händler-Signup, RFQ). Verwenden Sie das Dark-Schema für allgemeines Marketing.
Haupt-Header
Section-Datei: sections/header.liquid
Die primäre Navigations-Surface — Logo, Brand-Text, primäres Menü, optionales Sekundär-Menü, Predictive Search, Locale- und Currency-Switcher, Account und Cart.
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Logo | Image | Empfohlen: SVG oder 2x PNG. Begrenzt durch eine numerische Einstellung Logo max height. |
| Brand text override | Text | Optionaler Text, der verwendet wird, wenn kein Logo vorhanden ist (z. B. "Vertex Supply"). Wird in der Heading-Typografie gerendert. |
| Primary menu | Link list | Die Hauptnavigation. Jedes übergeordnete Menüelement erhält ein Dropdown, das von seinen Untermenüpunkten getrieben wird. |
| Submenu style | Select | auto · mega · dropdown. Auto wählt mega, wenn ein Parent 8+ Untermenüpunkte hat oder ein Grid-Layout erkannt wird; andernfalls rendert es ein flaches Dropdown. |
| Secondary menu | Link list | Rechtsbündige Utility-Nav (Spezialangebote · Anleitungen · Services · FAQ). Automatisch über den secondary-menu-Link-Listen-Handle erkannt, wenn Sie keinen auswählen. |
| Search placeholder | Text | Übersetzbar. Standardmäßig "Nach Produkt, SKU oder Teilenummer suchen". |
| Show locale switcher | Checkbox | Standard on. Blendet die Sprach-Pill im Desktop-Header und im Mobile Drawer ein/aus. |
| Show currency switcher | Checkbox | Standard on. Blendet die Currency-Pill ein/aus. Auch B2B-Käufer mit Single-Market sehen diese informativ, damit sie immer wissen, in welcher Währung sie bezahlen. |
| Sticky on scroll | Checkbox | Heftet den Header beim Scrollen an den Viewport. |
Was rechts vom Menü gerendert wird
Von links nach rechts: Predictive-Search-Input, Sprach-Pill, Currency-Pill, Vertriebs-Pill (auto-shown für B2B), Account, Cart-Counter.
Die Vertriebs-Pill zieht aus den vertex.rep_name-, vertex.rep_email-, vertex.rep_phone-Metafields des Unternehmens. Siehe den B2B-Setup-Guide für Befüllungsdetails.
Mega-Menu vs. Simple-Dropdown
Der Submenu-Stil wird pro übergeordnetem Menüelement durch die menu_style-Einstellung entschieden. Zwei Formate:
- Mega-Menu — mehrspaltige Grid-Panels mit optionalen Icons und einem dedizierten Brand-Grid. Verwenden Sie es für Shop by category, Shop by brand, Industries — Parent-Items mit 8+ Untermenüpunkten oder visuellen Unterkategorien.
- Simple-Dropdown — flache Liste. Verwenden Sie es für About, Resources, Account — Parent-Items mit einer Handvoll Seiten.
Bei auto wählt Vertex mega, wenn der Parent ≥ 8 Untermenüpunkte hat; andernfalls das Simple-Dropdown.
B2B-Begrüßungsleiste
Section-Datei: sections/b2b-greeting-bar.liquid
Das bernsteinfarbene Band, das für eingeloggte Unternehmenskäufer über dem Haupt-Header sitzt. Keine Händler-Einstellungen — wird basierend auf dem Kundenzustand automatisch gerendert.
Wann sie erscheint
Alle drei Bedingungen müssen wahr sein:
customer.b2b?— der Kunde ist ein B2B-Käufer (Unternehmen), nicht ein B2C-Accountcustomer.current_company— er ist mindestens einem Unternehmen zugeordnetsettings.storefront_mode != 'b2c'— das Theme ist nicht im B2C-only-Modus gepinnt
Wenn eine davon fehlschlägt (Gast, B2C-only-Modus, kein zugeordnetes Unternehmen), wird die Begrüßungsleiste überhaupt nicht gerendert.
Was sie anzeigt
- Firmenname — "Angemeldet als
{company.name}" - NET-Terms-Badge — NET-30 / NET-60 / NET-90 aus dem Payment-Terms-Metafield des Unternehmens
- Steuerbefreiungs-Badge — aus Shopifys nativem Company-Tax-Status
- Sprach-Pill — REP-Style-Avatar + ISO-Code + Chevron
- Currency-Pill — REP-Style-Avatar + ISO-Code + Chevron
- Ship-to-Switcher — statisches Label, wenn der Käufer einen Standort hat; vollständiges Dropdown, wenn mehrere
Auf Bildschirmen ≤ 1169px wird die Begrüßungsleiste eingeklappt und ihre Inhalte wandern in den Account-Bereich des Hamburger Drawers. Das bernsteinfarbene Band erscheint nur auf ≥ 1170px (Desktop), damit es auf Mobilgeräten nicht um den vertikalen Raum mit der Suchleiste konkurriert.
→ Siehe B2B-only-Sections für die vollständige Feature-Surface.
Footer
Section-Datei: sections/footer.liquid
Der Site-Footer — Menü, Social, E-Mail, Payment-Icons, Newsletter, Rechts-Links.
Einstellungen
| Einstellung | Typ | Hinweise |
|---|---|---|
| Footer menu | Link list | Mehrspaltige Footer-Navigation. Jeder Parent rendert als Spaltenüberschrift. |
| Instagram URL | URL | Wird nur gerendert, wenn ausgefüllt. |
| Facebook URL | URL | Wird nur gerendert, wenn ausgefüllt. |
| LinkedIn URL | URL | Wird nur gerendert, wenn ausgefüllt. |
| X (Twitter) URL | URL | Wird nur gerendert, wenn ausgefüllt. |
| YouTube URL | URL | Wird nur gerendert, wenn ausgefüllt. |
| Text | Standard leer. Wenn ausgefüllt, wird als mailto:-Link in der Kontaktspalte gerendert. | |
| Show payment icons | Checkbox | Standard on. Verwendet shop.enabled_payment_types, sodass Sie die Liste nicht selbst pflegen müssen. |
| Newsletter heading | Text | Z. B. "Trade-Liste beitreten". |
| Newsletter intro | Richtext | Kurzer Reassurance-Text — "Monatliche Drops, kein Spam". |
| Legal menu | Link list | Datenschutz · AGB · Rückerstattung · Cookies. Fällt automatisch auf Ihre /policies/*-URLs zurück, wenn Sie das Menü leer lassen. |
Newsletter-Formular
Der Newsletter-Block verwendet Shopifys natives Customer-Newsletter-Formular, sodass Subscriber in Ihre Shopify-Kundenliste geschrieben werden (mit dem newsletter-Accepts-Marketing-Flag). Keine Drittanbieter-Integration erforderlich.
Sie wählen Payment-Icons nicht von Hand — Vertex liest shop.enabled_payment_types und rendert nur die Icons, die Sie in den Shopify-Zahlungseinstellungen aktiviert haben. Aktivieren Sie Apple Pay in Settings → Payments → es erscheint im Footer. Deaktivieren Sie es → es verschwindet.
Predictive Search
Section-Datei: sections/predictive-search.liquid (gerendert von header.liquid)
Wird aus dem Sucheingabefeld ausgeklappt, während der Käufer tippt. Zeigt vier Panels:
- Produkte — Bild-Thumbnail, Titel, Vendor, Preis. Erkennt Hersteller-Teilenummern über das
vertex.mpn-Metafield (sodass die Suche nach1N4148die Diode anhand der Teilenummer findet). - Kollektionen — Titel + Bild.
- Seiten — Titel + URL.
- Vorgeschlagene Suchanfragen — Shopifys native Suchvorschläge.
MPN-Erkennung
Wenn Sie das vertex.mpn-Metafield (Single-Line-Text) auf einem Produkt befüllen, gleicht die Predictive Search Anfragen zusätzlich zum Standard-Produkttitel / SKU / Vendor gegen dieses Feld ab. Entscheidend für technische Kataloge, bei denen Käufer nach Teilenummer statt nach Produktnamen suchen.
→ Siehe den Metafield-Setup-Guide für Befüllungsdetails.
Responsives Verhalten
Der Header hat einen harten Breakpoint bei 1170px — gewählt, sodass iPad Pro im Hochformat (1024px) im Hamburger-Flow bleibt, aber die meisten Laptops im Desktop-Layout landen.
| Viewport | Layout |
|---|---|
| < 1170px | Hamburger-Menü → Drawer. Drawer enthält: Primärmenü, Sekundärmenü, Ship-to-Switcher, Sprach- + Currency-Pills (2-spaltiges Grid), Vertriebskarte (Full-Width unten), Sprache + Anmelden. |
| ≥ 1170px | Volle Desktop-Nav. Mega-Menu / Dropdown-Panels, Predictive-Search-Input, REP-Pills, Vertriebs-Pill, Account, Cart. |
Custom-Dropdown-Panels (kein natives <select>)
Vertex verwendet null native <select>-Elemente irgendwo. Sprache, Währung und Ship-to-Switcher verwenden alle ein gemeinsames <details>-+-<summary>-+-Custom-Panel-System mit:
- Hover-Zuständen
- Markierung der aktuellen Auswahl + Check-Icon
- Fade-in-Animation
- Gegenseitigem Ausschluss (Öffnen eines schließt die anderen)
- Schließen bei Klick außerhalb
- Schließen mit Escape
- Vollständiger Tastaturnavigation (Pfeiltasten + Enter)
Die Implementierung liegt in assets/global.js (suchen Sie nach dem closeAllDetails()-Helper). Das Restylen dieser Dropdowns ist eine Frage des Überschreibens der details[data-vertex-dropdown]-Selektoren — kein JS erforderlich.
Was kommt als Nächstes
- Homepage-Marketing-Sections → — Konfigurieren Sie den Hero, die Featured Collection, Testimonials, FAQ und die 25+ anderen Homepage-Sections
- Produktseiten-Sections → — Main Product, Produkt-Tabs, Related Products, Recently Viewed, Sticky Cart
- B2B-only-Sections → — B2B-Begrüßungsleiste (Cross-Link), B2B-Feature-Promo, Bulk Order, RFQ, Compare
- Storefront-Modi-Guide → — Hybrid vs B2B-only vs B2C-only
- Theme-Settings-Referenz → — Jede Theme-weite Einstellung erklärt