Die 4 Demo-Storefronts von Vertex — Vertex, Throttle, OfficeIT, Inkline
Eine Vertex-Theme-Lizenz. Vier produktionsreife Storefront-Looks. Jedes Preset ist für eine bestimmte B2B- / B2C-Industriebranche optimiert — verschiedene Akzentfarben, verschiedene Homepage-Kompositionen, verschiedene Finder, verschiedene Lifestyle-Bilder, verschiedene Copy-Hooks. Der Wechsel zwischen ihnen erfolgt mit einem Klick im Customizer (dauerhaft) oder mit einem URL-Parameter (temporäre Vorschau).
Wenn Sie über mehrere Branchen hinweg verkaufen — oder vor dem Launch entscheiden, mit welcher Branche Sie zuerst starten — ist dies die Anleitung, die den richtigen Startpunkt für Ihre Storefront wählt.
Sie müssen Vertex nicht viermal kaufen. Die 4 Presets werden in derselben Theme-Datei ausgeliefert. Sie können sie auch remixen — wählen Sie die OfficeIT-Homepage, aber die Throttle-Akzentfarbe, oder überschreiben Sie jedes Preset mit dem Custom Palette-Picker. Sie sind Startpunkte, keine gesperrten Templates.
Warum 4 Presets?
Der Shopify Theme Store belohnt Themes, die Bandbreite zeigen. Ein Käufer, der das Theme-Verzeichnis durchforstet, möchte seine Branche auf einen Blick sehen — nicht eine generische „B2B-Theme"-Demo, die er gedanklich in seinen Anwendungsfall übersetzen muss.
Vertex begegnet dem, indem es vier vollständig befüllte Demo-Storefronts unter einer Theme-Lizenz ausliefert. Jedes Preset ist:
- Branchenoptimiert — Farbe, Copy, Hero-Komposition und Reihenfolge der Homepage-Sections sind für eine bestimmte Buyer-Journey ausgewählt
- Finder-fähig — Autoteile erhalten einen Make/Model/Year-Fitment-Finder; Druckerbedarf erhält einen Printer Brand/Model/Color-Finder; das Industrie-Preset hat keinen Finder (es stützt sich auf die Facetten-Navigation der Collection)
- Bilder vollständig — ~9 Hero- / Lifestyle- / Branchenraster-Bilder pro Preset, alle für die Ästhetik dieser Branche generiert. Kein Stockfoto-Missmatch.
- Unabhängig themable — jedes Preset hat seine eigene CSS-Overrides-Datei (
assets/demo-{preset}.css), die Akzentfarben, Finder-Akzente und alle preset-spezifischen Typografie-Entscheidungen umstellt
Das Ergebnis: Sie können Vertex als Storefront für Industriebedarf/MRO, als Autoteile-Katalog, als Bürobedarf-Distributor oder als Druckerbedarf-Lieferant starten, ohne eine maßgeschneiderte Designarbeit zu beauftragen.
Die 4 Presets im Detail
Preset 1 — Vertex (Standard)
| Branche | Industriebedarf, MRO, Hardware, Befestigungselemente, Handwerkzeuge, Flüssigkeiten, Schleifmittel |
| Akzentfarbe | Bernsteingelb #fbbf24 |
| Finder | Keiner — stützt sich auf Facettenfilter + prädiktive Suche |
| Homepage-Hero | Bold Typografie + Werkstatt- / Lagerhalle-Lifestyle-Bilder |
| B2B-Hooks | „Volumenpreise", „NET-30 verfügbar", „ISO 9001-zertifiziert", „Versand in 24 Stunden" |
| Am besten geeignet für | Generische Industriedistributoren, MRO-Lieferanten, Befestigungselemente- / Hardware-Händler, Werkzeugkataloge, JanSan-Lieferanten |
Das ist der Standard. Wenn Sie Vertex aus dem Shopify Theme Store installieren, ist dies das, was geladen wird. Der Bernstein-Akzent entspricht einer warmen, industriellen visuellen Sprache à la McMaster-Carr / Grainger / Fastenal, die Einkaufsmitarbeiter sofort erkennen.
Preset 2 — Throttle (Autoteile)
| Branche | Autoteile, Performance, Aftermarket, OEM-Ersatz, Motorrad, Marine, Powersports |
| Akzentfarbe | Rotorange #ec5f24 |
| Finder | Make / Model / Year Fitment-Kaskade (3 Dropdowns) |
| Homepage-Hero | Fitment-First-Messaging („Teile für Ihr Fahrzeug finden") mit dem Finder über den Produkt-Collections |
| B2B-Hooks | „Trade-Preise", „Versand ab Lager", „OEM-Cross-Reference", „Händlerkonten" |
| Am besten geeignet für | Autoteile-Distributoren, Performance-Shops, Motorrad- / Marine- / RV-Teile, ATV / UTV / Powersports |
Das definierende Feature des Throttle-Presets ist der Fitment-Finder — ein 3-stufiges kaskadierendes Dropdown (Make ▸ Model ▸ Year), das im Homepage-Hero, in der Seitenleiste der Collection-Seite und als optionale Sticky-Leiste gerendert wird. Buyer wählen ihr Fahrzeug einmal aus; nachfolgende Produktansichten werden auf Teile gefiltert, die zum Fitment passen.
Der rotorange Akzent entspricht einer Performance / Automotive / Energy-visuellen Sprache — RockAuto + Summit Racing in einem einzigen Theme.
Preset 3 — OfficeIT (Büro, IT, Elektronik)
| Branche | Bürobedarf, IT-Hardware, Elektronik, Kopierpapier, Monitore, Tastaturen, Laptops, Massenverbrauchsmaterial |
| Akzentfarbe | Blau (Corporate, IT-tauglich) |
| Finder | Brand / Category / Capacity Kaskade (3 Dropdowns) — z. B. „HP ▸ Toner ▸ 5000 Seiten" |
| Homepage-Hero | Bulk-Order-Messaging, B2B-Account-Hooks, NET-30 / Rechnungsbillungs-CTAs |
| B2B-Hooks | „Mengenrabatte", „Net-30 für Unternehmen", „Kostenloser Versand ab X $", „Persönlicher Account-Manager" |
| Am besten geeignet für | Bürobedarf-Distributoren, IT-Wiederverkäufer, Elektronik-Großhändler, Schul-/Behördenbedarf, Anbieter für Corporate Procurement |
OfficeIT führt mit bulk B2B office orders — die Buyer-Journey ist „Ich muss ein Büro mit 50 Schreibtischen ausstatten" und nicht „Ich brauche eine Maus". Hero-Copy und CTAs heben Bulk-Order, RFQ und NET-30 prominent hervor; die Homepage zeigt das Bulk-Order-Quick-Pad oberhalb der Standard-Featured-Collection.
Der blaue Akzent entspricht der Corporate IT / Quill / Staples Business Advantage-visuellen Sprache, die Buyer von dieser Kategorie erwarten.
Was in jedem Preset enthalten ist
Jedes Preset bringt seine eigenen Kopien dieser Assets mit:
| Asset | Variante pro Preset |
|---|---|
| Homepage-Template | templates/index.json (Standard Vertex) + templates/index.throttle.json, index.officeit.json, index.printsupply.json |
| Collection-Template | templates/collection.json + Pro-Preset-Varianten, in denen die Section-Reihenfolge abweicht (z. B. Throttle stellt den Finder über die Filter) |
| Produkt-Template | templates/product.json + Pro-Preset-Varianten (z. B. Inkline fügt einen „Kompatible Drucker"-Tab hinzu) |
| CSS-Override | assets/demo-{preset}.css — überschreibt --color-accent, --color-on-accent, Finder-Akzent, Gradient Stops |
| Hero-Bilder | ~3 Hero-Varianten pro Preset, alle für die Ästhetik der Branche generiert |
| Lifestyle-Bilder | ~3 Lifestyle-Fotos pro Preset (Werkstatt / Händler / Büro / Druckerei) |
| Branchen-Raster-Bilder | ~3 Branchen-Karten-Bilder pro Preset (z. B. HLK + Fertigung + Gebäudemanagement für Vertex; Autos + Motorräder + Boote für Throttle) |
| Demo-Copy | Hero-Headlines, Subheads, CTA-Labels, Testimonial-Text — alle pro Preset abgestimmt |
Das bedeutet, dass der Wechsel von Presets nicht „eine Farbe ändern und beten" ist — es ist ein kohärenter Storefront-Wechsel.
So wechseln Sie Presets
Sie haben zwei Möglichkeiten zum Wechseln — dauerhaft und temporäre Vorschau.
Dauerhaft — über den Customizer
- Öffnen Sie den Shopify-Admin und gehen Sie zu Online Store ▸ Themes.
- Klicken Sie auf Anpassen bei Vertex.
- Klicken Sie in der linken Seitenleiste auf Theme-Einstellungen ▸ Farben.
- Scrollen Sie zu Starter-Farbpalette.
- Wählen Sie eines von:
- Custom — vollständig benutzerdefinierte Palette (verwendet Ihre manuellen Farbauswahlen unten)
- Vertex — Bernsteinindustriell (Standard)
- Throttle — Rotorange Autoteile
- OfficeIT — Corporate Blau
- Inkline — Druck/Repro Türkis
- Speichern oben rechts.
Die Akzentfarbe wechselt sofort. Um auch die Homepage auf das Layout dieses Presets zu wechseln, siehe Homepage-Template wechseln unten.
Das Farbpreset in Theme-Einstellungen ▸ Farben wechselt nur Farben. Um das vollständige Preset-Erlebnis (Homepage-Layout, Finder, Lifestyle-Bilder) zu erhalten, müssen Sie auch das passende Homepage-Template-Suffix anwenden — siehe nächster Abschnitt.
Temporär — über URL-Vorschau
Um ein Preset auf einer beliebigen Storefront-URL anzuzeigen ohne es anzuwenden:
| Preset | Vorschau-URL-Parameter |
|---|---|
| Vertex | (Standard — kein Parameter) |
| Throttle | ?view=throttle |
| OfficeIT | ?view=officeit |
Zum Beispiel:
https://your-store.myshopify.com/?view=throttle
https://your-store.myshopify.com/collections/all?view=officeit
Dies nutzt das native Template-Suffix-Feature von Shopify — die Storefront rendert mit der alternativen Template-Datei (index.throttle.json) für diese einzelne Seitenansicht. Es wird nichts gespeichert; das Aktualisieren ohne den Parameter setzt auf Ihren Standard zurück.
Verwenden Sie dies, um:
- Ein Preset mit einem kleinen Publikum A/B zu testen, bevor Sie sich festlegen
- Eine Demo-URL an einen Stakeholder zu senden („Schauen Sie sich an, wie sich die Autoteile-Version unseres Shops anfühlen würde")
- Hero-Kompositionen in zwei Browser-Tabs nebeneinander zu vergleichen
Homepage-Template wechseln
Um das Homepage-Layout eines Presets dauerhaft anzuwenden:
- Öffnen Sie Online Store ▸ Themes ▸ Anpassen ▸ Startseite.
- Wählen Sie im oberen Template-Selektor Template hinzufügen oder wählen Sie die
index.{preset}.json-Variante des Presets. - Speichern.
Alternativ können Sie eine Homepage mit dem entsprechenden Template-Suffix in der Seiten-Einrichtung festlegen oder settings_data.json direkt bearbeiten, wenn Sie damit vertraut sind.
Nichts zwingt Sie, das Homepage-Layout eines Presets mit dessen Akzent zu verwenden. Sie können das Throttle-Homepage-Layout (weil Sie die Fitment-Finder-First-Komposition lieben) mit dem Inkline-türkisen Akzent (weil er zu Ihrer Marke passt) und der OfficeIT-Bulk-Order-Pad-Section (weil Ihre Buyer aus Spreadsheets einfügen) verwenden. Vertex ist komponierbar.
So funktioniert die Akzentfarben-Überschreibung
Jedes Preset liefert eine winzige CSS-Datei unter assets/demo-{preset}.css:
/* assets/demo-throttle.css */
:root {
--color-accent: 236 95 36; /* ec5f24 — Throttle red-orange */
--color-on-accent: 255 255 255;
}
.finder-bar { --finder-accent: var(--color-accent); }
Wenn die Einstellung Starter-Farbpalette auf Throttle gesetzt ist, bindet das Layout diese Datei über {% if settings.starter_palette == 'throttle' %}{{ 'demo-throttle.css' | asset_url | stylesheet_tag }}{% endif %} ein.
Die Akzent-CSS-Variablen --color-accent + --color-on-accent fließen durch jede Komponente — Buttons, Pillen, Badges, Links, Focus-Ringe, Dropdown-Hervorhebungen, die B2B-Begrüßungsleiste, Finder-Dropdowns, Hero-CTAs. Das Umstellen der Palette stellt den gesamten Akzent der Storefront in einem Render um.
Das bedeutet, dass Sie auch Ihr eigenes Preset erstellen können, indem Sie:
- Eine der vorhandenen
demo-*.css-Dateien kopieren - Sie in
demo-mybrand.cssumbenennen - Die
--color-accent- +--color-on-accent-Werte anpassen - Sie in
layout/theme.liquidmit einem weiteren{% if %}-Zweig verknüpfen - (Optional) Ein passendes Homepage-Template unter
templates/index.mybrand.jsonhinzufügen
Ein Power User kann in unter einer Stunde ein 5. Preset erstellen.
Preset wählen — Entscheidungsmatrix
Verwenden Sie diese, um einen Startpunkt zu wählen. Denken Sie daran: Sie können nachträglich alles überschreiben.
| Wenn Sie verkaufen... | Beginnen Sie mit | Grund |
|---|---|---|
| Befestigungselemente, Handwerkzeuge, Schmierstoffe, Schleifmittel, Hardware, allgemeines MRO | Vertex | Generische Industrie-Baseline, kein Finder nötig (Facettenfilter erledigen die Arbeit) |
| Auto- / Motorrad- / Marine- / RV- / Powersports-Teile | Throttle | Der Fitment-Finder ist das entscheidende Feature für diese Branche |
| Büro, IT, Elektronik, Kopierbedarf, Schul- / Behördenbedarf | OfficeIT | Bulk B2B Office Orders + Corporate IT visuelle Sprache |
| Druckertinte, Toner, Großformat-Papier, Reprografie-Verbrauchsmaterial | Inkline | Der Druckerkartuschen-Finder eliminiert den häufigsten Buyer-Fehler in dieser Branche |
| Reinigung / Sanitär (JanSan) | Vertex | Vertex's MRO-Baseline lässt sich sauber auf JanSan abbilden; kein spezialisierter Finder nötig |
| Industriechemikalien / Schmierstoffe mit technischen Datenblättern | Vertex | Tech-Spec-Tabellen + Documents-Block sind Kern des Vertex-Presets |
| Baumaterialien (Holz, Beton, Trockenbau) | Vertex | Vertex-Baseline + Bulk-Order-Seite funktionieren gut; ziehen Sie OfficeIT-Blau in Betracht, wenn Sie eine kühlere Palette möchten |
| Promotionsprodukte mit individuellem Logo-Druck | Inkline | Türkiser Akzent + Druckerei-visuelle Sprache passen zur Kategorie, auch wenn der Finder für Tinte/Toner nützlicher ist |
| Nur Wholesale (kein B2C) | Vertex oder OfficeIT | Beides funktioniert; wählen Sie den Akzent, der zu Ihrer Marke passt. Wechseln Sie Storefront-Modus auf B2B-only. |
Ein Preset anpassen
Presets sind Startpunkte. Nach der Installation können Sie:
| Anpassen | Wie |
|---|---|
| Akzentfarbe | Theme-Einstellungen ▸ Farben ▸ Starter-Palette ▸ Custom, dann wählen Sie Ihr eigenes --color-accent |
| Logo | Theme-Einstellungen ▸ Logo — ersetzen Sie das Demo-Logo mit Ihrem eigenen SVG oder PNG |
| Reihenfolge der Homepage-Sections | Customizer ▸ Startseite — Sections ziehen zum Sortieren oder Sections aus der 30+ Section-Palette hinzufügen/entfernen |
| Hero-Bilder | Klicken Sie auf die Hero-Section im Customizer, ersetzen Sie das Bild jedes Slides |
| Lifestyle- / Branchen-Bilder | Pro Section im Customizer ersetzen; jede Section hat einen Image-Picker |
| Finder-Dropdown-Labels + Daten | (Throttle / OfficeIT / Inkline) — siehe Finder-Setup-Anleitung für die metafelddatengesteuerte Datenstruktur |
| Typografie | Theme-Einstellungen ▸ Typografie — Heading-Schrift, Body-Schrift, Skalierungsverhältnis |
| Copy / CTAs | Text inline im Customizer für jede Section bearbeiten |
| Übersetzungen | Theme-Einstellungen ▸ Sprachen — benutzerdefinierte Strings über locales/*.schema.json-Überschreibungen bereitstellen |
Nach der Anpassung können Sie Ihre Arbeit als benanntes Theme in Online Store ▸ Themes ▸ Theme-Bibliothek speichern — nützlich bei A/B-Tests oder beim Staging visueller Änderungen.
Weiterführende Literatur
- Übersicht — Warum Vertex 4 Presets in einem Theme ausliefert
- Installation — Theme-Installation + Preset-Auswahl während des Setups
- Referenz der Theme-Einstellungen — Farben ▸ Starter-Palette und Pro-Preset-Einstellungen
- Markets & Multi-Währung — Jedes Preset funktioniert identisch über alle Markets
- Storefront-Modus-Anleitung — Wie Hybrid / B2B-only / B2C-only mit Presets interagieren
- Customer Account Dashboard — Identisch über alle Presets (nur Akzentfarbe wechselt)
- RFQ-Seiten-Anleitung — Identisch über alle Presets
- B2B-Setup-Anleitung — Gleiche B2B-Konfiguration funktioniert für alle 4 Presets
Zusammenfassung
- Vertex liefert 4 Demo-Presets in einer einzigen Theme-Lizenz aus: Vertex (Industriebernstein), Throttle (Autoteile-Rotorange), OfficeIT (Büro/IT-Blau), Inkline (Druck-Türkis).
- Jedes Preset hat sein eigenes Homepage-Template, Finder, Akzent-CSS und ~9 Lifestyle-Bilder.
- Wechseln Sie dauerhaft in Theme-Einstellungen ▸ Farben ▸ Starter-Palette + indem Sie das Homepage-Template-Suffix des Presets anwenden.
- Wechseln Sie temporär für Vorschauen, indem Sie an jede Storefront-URL
?view=throttle | officeit | printsupplyanhängen. - Presets sind Startpunkte — Akzentfarbe, Homepage-Layout, Finder, Bilder und Copy sind alle unabhängig überschreibbar.
- Ein 5. benutzerdefiniertes Preset braucht etwa eine Stunde zum Erstellen, indem eine vorhandene
demo-*.css-Datei kopiert und inlayout/theme.liquidverknüpft wird.