Vertex Theme Settings Referenz
Jede Option unter Theme Settings im Shopify-Theme-Editor, erklärt. So greifen Sie darauf zu: Öffnen Sie den Theme-Editor und klicken Sie auf das Zahnrad-Symbol (unten links), das mit Theme settings beschriftet ist.
Vertex' Einstellungen sind in 7 Panels gruppiert:
Typografie
| Einstellung | Was sie tut | Standard |
|---|---|---|
| Heading-Schrift | Schriftart für <h1>–<h6> auf jeder Seite plus Marketing-Section-Headlines. | Poppins Bold |
| Body-Schrift | Schriftart für Body-Text, Navigation, Buttons, Formularfelder und Preise. | Poppins Regular |
Best Practice
Vertex preloadet beide Schriftarten, damit sie vor dem ersten Paint bereit sind. Verwenden Sie eine Schrift für beide (unterschiedliche Gewichte), wenn Sie den schnellsten LCP wünschen.
Farben
Starter-Farbpalette
Ein einzelnes Dropdown, das die gesamte Storefront mit einem Klick neu einfärbt.
| Option | Branche | Akzentfarbe |
|---|---|---|
| Custom | Beliebig | Verwenden Sie die individuellen Farbwähler unten |
| Vertex amber | Industrial / MRO-Bedarf (Standard) | #fbbf24 |
| Throttle red | Auto-Teile | #ec5f24 |
| OfficeIT blue | Büro & IT-Bedarf | #3b82f6 |
| Inkline teal | Print & Reprografie | #0d9488 |
Custom-Palette (nur verwendet, wenn Starter-Palette = Custom)
| Einstellung | Zweck | Standard (Vertex amber) |
|---|---|---|
| Background | Body-Hintergrund, Drawer-Hintergrund | #ffffff |
| Surface | Karten-Hintergrund, Settings-Panel-Hintergrund | #f5f5f4 |
| Surface alternate | Subtile sekundäre Oberfläche | #fafaf9 |
| Text | Primäre Textfarbe | #0c0a09 |
| Muted text | Eyebrows, Labels, Captions | #57534e |
| Borders | Karten-Borders, Trennlinien | #e7e5e4 |
| Accent | Primäre Markenfarbe (CTAs, Badges) | #d97706 |
| Accent dark | Hover-/Active-Zustand bei Amber-CTAs | #b45309 |
| Accent soft | Sanfter Ton für bernsteinfarbig getönte Hintergründe | #fef3c7 |
| Text on accent | Die Text- und Icon-Farbe auf akzentgefüllten Buttons und Badges. Halten Sie sie kontrastreich gegenüber Accent dark (Standard: Weiß) | #ffffff |
| Success | Success-Badges (Auf Lager, NET-30 genehmigt) | #15803d |
Layout
| Einstellung | Optionen | Standard |
|---|---|---|
| Seitenbreite | Narrow (75rem) / Standard (90rem) / Wide (110rem) | Narrow |
| Seitlicher Padding | 16–60 px (Slider) | 28 px |
Header-Verhalten
| Einstellung | Was sie tut | Standard |
|---|---|---|
| Sticky-Header beim Scrollen | Heftet den Haupt-Header an den Viewport. | An |
Cart-Verhalten
| Einstellung | Was sie tut | Standard |
|---|---|---|
| Cart-Layout | Slide-out-Drawer (empfohlen für B2B-Quick-Adds) oder Dedizierte Warenkorb-Seite. | Drawer |
Utilities
| Einstellung | Was sie tut | Standard |
|---|---|---|
| 'Back to top'-Button anzeigen | Schwebender Button nach einem Viewport Scrollen. | An |
| 'Recently viewed' auf Produktseiten anzeigen | Verfolgt bis zu 12 Produkte pro Käufer in localStorage. | An |
B2B
Storefront-Modus
| Option | Was sie tut | Am besten geeignet für |
|---|---|---|
| Hybrid (auto) (Standard) | Erkennt automatisch: B2C-freundliche Defaults für Gäste, B2B-Chrome für eingeloggte B2B-Käufer. | Die meisten Händler — bedienen beide Zielgruppen. |
| B2B-only | Verbirgt B2C-freundliche Defaults. | Reine Wholesale-Händler. |
| B2C-only | Unterdrückt jedes B2B-Element der UI auch für eingeloggte B2B-Käufer. | Wenn dasselbe Theme auf einem Schwester-B2C-Shop läuft. |
→ Tiefer Einblick: Storefront-Modi-Guide
Preissichtbarkeit
| Einstellung | Was sie tut | Standard |
|---|---|---|
| Preise verbergen, bis Kunde sich anmeldet | Ersetzt Preise durch "Zum Anzeigen der Preise anmelden" für Gäste. | Aus |
Produktseiten-Sections
| Einstellung | Was sie tut | Backing-Metafield |
|---|---|---|
| Preishistorie auf PDP anzeigen | Rendert eine "Preishistorie"-Disclosure, wenn das Produkt vertex.price_history hat. | vertex.price_history |
| 'Ships from' auf PDP anzeigen | Liest vertex.ships_from, fällt auf den Standard unten zurück. | vertex.ships_from |
| Standard-'Ships from'-Standort | Wird verwendet, wenn das Produkt kein vertex.ships_from hat. Leer lassen, um zu überspringen. | — |
| 'Dokumente & Downloads' auf PDP anzeigen | Umschließt Datenblatt- / MSDS- / Broschüren- / Installationsanleitung-Links. Wird pro Produkt automatisch ausgeblendet, wenn keine Dokumente angehängt sind. | vertex.datasheet usw. |
| Varianten-Swatches anzeigen | Wandelt Farb-/Bild-Optionswerte in anklickbare Swatch-Chips auf der Produktseite um. Wenn aus, werden Optionen überall als einfache Dropdowns dargestellt. | — |
Woher die Swatches kommen
Weisen Sie einem Optionswert in Ihrem Shopify-Admin eine Farbe oder ein Bild zu, und Vertex zeigt ihn automatisch als anklickbaren Chip an — keine Theme-Einrichtung nötig. Ein barrierefreies Dropdown bleibt darunter erhalten, für Tastatur- und Screenreader-Nutzer.
Lokalisierung
| Einstellung | Optionen | Standard |
|---|---|---|
| Textrichtung | Auto (locale-gesteuert) / Links nach rechts / Rechts nach links | Auto |
Auto-RTL
Vertex wechselt <html dir> automatisch für Arabisch, Hebräisch, Farsi, Urdu, Jiddisch, Kurdisch, Dhivehi und Paschto. Setzen Sie Links nach rechts / Rechts nach links nur, wenn Sie erzwingen müssen.
SEO & Sharing
Brand Assets
| Einstellung | Empfohlene Größe |
|---|---|
| Favicon | 32×32 PNG. Leer lassen, um die mitgelieferte Vertex-Markenkennzeichnung zu verwenden. |
Social Cards
| Einstellung | Empfohlene Größe |
|---|---|
| Standard-Share-Bild (OG / Twitter) | 1200 × 630 px. |
| Twitter- / X-Handle | Ohne das @. |
Social-Profil-URLs (Organization-JSON-LD sameAs)
- LinkedIn URL, Twitter / X URL, Facebook URL, Instagram URL, YouTube URL
Google Merchant / Shopping
| Einstellung | Hinweise |
|---|---|
| Standard-Versandland (ISO-Code) | Zweistellig (US, GB, DE usw.) |
| Standard-Versandtarif (numerisch) | Verwenden Sie 0 für kostenlosen Versand |
| Bearbeitungszeit — min / max (Tage) | 0–14 Tage |
| Transitzeit — min / max (Tage) | 0–30 Tage |
| Rückgabefenster (Tage) | 0–180 Tage |
| Rückgabemethode | Per Post / Im Geschäft / Produkt behalten |
| Rücksendekosten | Kostenloser Rückversand / Kunde zahlt |
Geschäftsinformationen
Diese Werte fließen in das sitewide Organization-JSON-LD (Knowledge-Panel-Daten) ein.
| Einstellung | Format | Beispiel |
|---|---|---|
| Telefon (E.164 bevorzugt) | Internationales Format mit Ländervorwahl | +1-216-555-0182 |
| Telefonzeiten | Freitext | Mon-Fri 7am-6pm CST |
| Straßenadresse | — | 1500 W Industrial Pkwy |
| Stadt / Ort | — | Cleveland |
| Bundesland-/Regions-Code | 2-stelliger Regionscode | OH |
| Postleitzahl | — | 44113 |
| Land (ISO-Code) | 2-stelliger Ländercode | US |
| Gründungsjahr | 4-stellige Jahreszahl | 2014 |
Der wirkungsvollste SEO-Gewinn in 5 Minuten
Das Ausfüllen dieser Felder befüllt das Organization + LocalBusiness-JSON-LD auf jeder Seite — die Daten, mit denen Google Ihr Knowledge Panel und Ihren Maps-Eintrag erstellt.
Wo jede Einstellung wirkt
| Panel | Wirkt auf |
|---|---|
| Typografie | Jede Seite — Body + Headings |
| Farben | Jede Seite — Hintergrund, Text, Akzent |
| Layout | Jede Seite — max-width, Padding, Sticky-Header |
| B2B | B2B-Chrome (bernsteinfarbene Leiste, RFQ, Bulk-Bestellung) + Preissichtbarkeit |
| Lokalisierung | <html dir>-Attribut auf jeder Seite |
| SEO & Sharing | <meta>-Tags + JSON-LD auf jeder Seite |
| Geschäftsinformationen | Organization + LocalBusiness-JSON-LD auf jeder Seite |
Nächste Schritte
- Section-Setup-Guides → — Jeden Section-Block konfigurieren
- Storefront-Modi-Guide → — Hybrid / B2B-only / B2C-only im Detail
- Metafield-Setup-Guide → — Backing-Metafields für B2B-PDP-Verbesserungen