Les 4 vitrines de démonstration de Vertex — Vertex, Throttle, OfficeIT, Inkline
Une seule licence du thème Vertex. Quatre apparences de vitrine prêtes pour la production. Chaque préréglage est ajusté pour une verticale industrielle B2B / B2C spécifique — couleurs d'accent différentes, compositions de page d'accueil différentes, finders différents, imagerie lifestyle différente, accroches de copie différentes. Basculer entre eux se fait en un clic dans le personnaliseur (permanent) ou par un paramètre d'URL (prévisualisation temporaire).
Si vous vendez sur plusieurs verticales — ou si vous décidez quelle verticale mettre en avant avant le lancement — c'est le guide qui choisit le bon point de départ pour votre vitrine.
Vous n'avez pas besoin d'acheter Vertex quatre fois. Les 4 préréglages sont livrés dans le même fichier de thème. Vous pouvez également les mélanger — choisir la page d'accueil OfficeIT mais la couleur d'accent Throttle, ou remplacer n'importe quel préréglage avec le sélecteur de palette personnalisée. Ce sont des points de départ, pas des modèles verrouillés.
Pourquoi 4 préréglages ?
Le Shopify Theme Store récompense les thèmes qui démontrent leur étendue. Un acheteur qui parcourt le répertoire des thèmes veut voir son secteur en un coup d'œil — pas une démo générique de « thème B2B » qu'il doit traduire mentalement en son cas d'usage.
Vertex répond à cela en livrant quatre vitrines de démonstration entièrement renseignées sous une seule licence de thème. Chaque préréglage est :
- Ajusté au secteur — la couleur, la copie, la composition du hero et l'ordre des sections de la page d'accueil sont choisis pour un parcours acheteur spécifique
- Conscient du finder — les pièces auto obtiennent un finder de compatibilité Marque/Modèle/Année ; les consommables d'impression obtiennent un finder Marque d'imprimante/Modèle/Couleur ; le préréglage industriel n'a pas de finder (il s'appuie sur la navigation par collection à facettes)
- Imagerie complète — environ 9 images hero / lifestyle / grille de secteur par préréglage, toutes générées pour l'esthétique de cette verticale. Pas de discordance avec des photos d'archive.
- Thématisable indépendamment — chaque préréglage a son propre fichier de surcharges CSS (
assets/demo-{preset}.css) qui change les couleurs d'accent, les accents du finder et tous les choix typographiques par préréglage
Résultat : vous pouvez lancer Vertex comme vitrine industrielle MRO, catalogue de pièces auto, distributeur de fournitures de bureau ou fournisseur d'imprimerie sans commander aucun design personnalisé.
Les 4 préréglages en détail
Préréglage 1 — Vertex (par défaut)
| Secteur | Fournitures industrielles, MRO, quincaillerie, fixations, outils à main, fluides, abrasifs |
| Couleur d'accent | Ambre #fbbf24 |
| Finder | Aucun — s'appuie sur les filtres à facettes + la recherche prédictive |
| Hero de la page d'accueil | Typographie audacieuse + imagerie lifestyle atelier / entrepôt |
| Accroches B2B | « Volume pricing », « NET-30 disponible », « Certifié ISO 9001 », « Expédition sous 24 h » |
| Idéal pour | Distributeurs industriels génériques, fournisseurs MRO, marchands de fixations / quincaillerie, catalogues d'outils, fournisseurs JanSan |
C'est le préréglage par défaut. Lorsque vous installez Vertex depuis le Shopify Theme Store, c'est ce qui se charge. L'accent ambre correspond à un langage visuel industriel chaleureux de type McMaster-Carr / Grainger / Fastenal que les acheteurs procurement reconnaissent immédiatement.
Préréglage 2 — Throttle (pièces auto)
| Secteur | Pièces auto, performance, aftermarket, remplacement OEM, moto, marine, sports motorisés |
| Couleur d'accent | Rouge-orange #ec5f24 |
| Finder | Cascade de compatibilité Marque / Modèle / Année (3 menus déroulants) |
| Hero de la page d'accueil | Messages axés sur la compatibilité (« Trouvez des pièces pour votre véhicule ») avec le finder au-dessus des collections de produits |
| Accroches B2B | « Tarification trade », « Expédition depuis l'entrepôt », « Référence croisée OEM », « Comptes revendeurs » |
| Idéal pour | Distributeurs de pièces auto, ateliers de performance, pièces moto / marine / camping-car, ATV / UTV / sports motorisés |
La caractéristique déterminante du préréglage Throttle est le finder de compatibilité — un menu déroulant en cascade en 3 étapes (Marque ▸ Modèle ▸ Année) affiché sur le hero de la page d'accueil, dans la barre latérale de la page de collection et comme barre persistante optionnelle. Les acheteurs sélectionnent leur véhicule une fois ; les vues de produit suivantes sont filtrées pour ne montrer que les pièces compatibles.
L'accent rouge-orange correspond à un langage visuel performance / automobile / énergie — RockAuto + Summit Racing dans un seul thème.
Préréglage 3 — OfficeIT (bureau, IT, électronique)
| Secteur | Fournitures de bureau, matériel IT, électronique, papier copieur, écrans, claviers, ordinateurs portables, consommables en gros |
| Couleur d'accent | Bleu (corporate, qualité IT) |
| Finder | Cascade Marque / Catégorie / Capacité (3 menus déroulants) — par exemple, « HP ▸ Toner ▸ 5000 pages » |
| Hero de la page d'accueil | Messages sur la commande en gros, accroches de compte B2B, CTA NET-30 / facturation |
| Accroches B2B | « Remises en gros », « Net-30 pour les entreprises », « Livraison gratuite à partir de X $ », « Account manager dédié » |
| Idéal pour | Distributeurs de fournitures de bureau, revendeurs IT, grossistes en électronique, fournitures scolaires / gouvernementales, fournisseurs de procurement d'entreprise |
OfficeIT met en avant les commandes B2B de bureau en gros — le parcours acheteur est « J'ai besoin d'équiper un bureau de 50 postes » plutôt que « J'ai besoin d'une souris ». La copie du hero et les CTA mettent en évidence la commande en gros, le RFQ et le NET-30 ; la page d'accueil présente le pavé de commande rapide en gros au-dessus de la collection mise en avant standard.
L'accent bleu correspond au langage visuel IT corporate / Quill / Staples Business Advantage que les acheteurs attendent de cette catégorie.
Ce qui se trouve à l'intérieur de chaque préréglage
Chaque préréglage est livré avec ses propres copies de ces assets :
| Asset | Variante par préréglage |
|---|---|
| Modèle de page d'accueil | templates/index.json (Vertex par défaut) + templates/index.throttle.json, index.officeit.json, index.printsupply.json |
| Modèle de collection | templates/collection.json + variantes par préréglage où l'ordre des sections diffère (par exemple, Throttle place le finder au-dessus des filtres) |
| Modèle de produit | templates/product.json + variantes par préréglage (par exemple, Inkline ajoute un onglet « imprimantes compatibles ») |
| Surcharge CSS | assets/demo-{preset}.css — surcharge --color-accent, --color-on-accent, accent du finder, arrêts de dégradé |
| Imagerie hero | ~3 variantes hero par préréglage, toutes générées pour l'esthétique de la verticale |
| Imagerie lifestyle | ~3 photos lifestyle par préréglage (atelier / concession / bureau / boutique d'impression) |
| Imagerie de grille de secteur | ~3 images de cartes de secteur par préréglage (par exemple, CVC + fabrication + facilities pour Vertex ; voitures + motos + bateaux pour Throttle) |
| Copie de démonstration | Titres de hero, sous-titres, libellés de CTA, texte de témoignages — tous ajustés par préréglage |
Cela signifie que basculer entre préréglages n'est pas « changer une couleur et prier » — c'est un échange cohérent de vitrine.
Comment basculer entre les préréglages
Vous avez deux façons de basculer — permanente et prévisualisation temporaire.
Permanente — via le personnaliseur
- Ouvrez l'admin Shopify et allez dans Boutique en ligne ▸ Thèmes.
- Cliquez sur Personnaliser sur Vertex.
- Dans la barre latérale gauche, cliquez sur Paramètres du thème ▸ Couleurs.
- Faites défiler jusqu'à Palette de couleurs de démarrage.
- Choisissez parmi :
- Personnalisée — palette entièrement personnalisée (utilise vos sélecteurs de couleur manuels ci-dessous)
- Vertex — ambre industriel (par défaut)
- Throttle — rouge-orange pièces auto
- OfficeIT — bleu corporate
- Inkline — turquoise impression/repro
- Enregistrer en haut à droite.
La couleur d'accent change instantanément. Pour également échanger la page d'accueil contre la mise en page de ce préréglage, consultez Changer le modèle de page d'accueil ci-dessous.
Le préréglage de couleur dans Paramètres du thème ▸ Couleurs ne change que les couleurs. Pour obtenir l'expérience complète du préréglage (mise en page de la page d'accueil, finder, imagerie lifestyle), vous devez également appliquer le suffixe de modèle de page d'accueil correspondant — voir la section suivante.
Temporaire — via prévisualisation d'URL
Pour prévisualiser un préréglage sur n'importe quelle URL de vitrine sans l'appliquer :
| Préréglage | Paramètre d'URL de prévisualisation |
|---|---|
| Vertex | (par défaut — aucun paramètre) |
| Throttle | ?view=throttle |
| OfficeIT | ?view=officeit |
Par exemple :
https://your-store.myshopify.com/?view=throttle
https://your-store.myshopify.com/collections/all?view=officeit
Cela utilise la fonctionnalité native de suffixe de modèle de Shopify — la vitrine s'affiche en utilisant le fichier de modèle alternatif (index.throttle.json) pour cette seule vue de page. Rien n'est sauvegardé ; actualiser sans le paramètre revient à votre défaut.
Utilisez ceci pour :
- Tester A/B un préréglage avec un public restreint avant de vous engager
- Envoyer une URL de démo à une partie prenante (« regardez à quoi ressemblerait la version pièces auto de notre boutique »)
- Comparer les compositions de hero côte à côte dans deux onglets de navigateur
Changer le modèle de page d'accueil
Pour appliquer de manière permanente la mise en page de la page d'accueil d'un préréglage :
- Ouvrez Boutique en ligne ▸ Thèmes ▸ Personnaliser ▸ Accueil.
- Dans le sélecteur de modèle en haut, choisissez Ajouter un modèle ou sélectionnez la variante
index.{preset}.jsondu préréglage. - Enregistrez.
Vous pouvez aussi définir une page d'accueil avec le suffixe de modèle approprié dans la configuration de page, ou modifier settings_data.json directement si vous êtes à l'aise.
Rien ne vous oblige à utiliser la page d'accueil d'un préréglage avec son accent. Vous pouvez utiliser la mise en page de la page d'accueil Throttle (parce que vous aimez la composition avec finder de compatibilité en avant) avec l'accent turquoise Inkline (parce qu'il correspond à votre marque) et la section pavé de commande en gros OfficeIT (parce que vos acheteurs collent depuis des feuilles de calcul). Vertex est composable.
Comment fonctionne la surcharge de couleur d'accent
Chaque préréglage est livré avec un petit fichier CSS dans 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); }
Lorsque le paramètre Palette de couleurs de démarrage est défini sur Throttle, la mise en page inclut ce fichier via {% if settings.starter_palette == 'throttle' %}{{ 'demo-throttle.css' | asset_url | stylesheet_tag }}{% endif %}.
Les variables CSS d'accent --color-accent + --color-on-accent circulent à travers chaque composant — boutons, pastilles, badges, liens, anneaux de focus, surbrillances de menus déroulants, barre d'accueil B2B, menus déroulants de finder, CTA de hero. Changer la palette change l'accent de toute la vitrine en un seul rendu.
Cela signifie que vous pouvez également créer votre propre préréglage en :
- Copiant l'un des fichiers
demo-*.cssexistants - Le renommant en
demo-mybrand.css - Ajustant les valeurs
--color-accent+--color-on-accent - Le câblant dans
layout/theme.liquidavec une autre branche{% if %} - (Optionnel) Ajoutant un modèle de page d'accueil correspondant à
templates/index.mybrand.json
Un utilisateur avancé peut produire un 5e préréglage en moins d'une heure.
Choisir votre préréglage — matrice de décision
Utilisez ceci pour choisir un point de départ. Rappel : vous pouvez tout remplacer ensuite.
| Si vous vendez... | Commencer avec | Raison |
|---|---|---|
| Fixations, outils à main, lubrifiants, abrasifs, quincaillerie, MRO général | Vertex | Base industrielle générique, aucun finder nécessaire (les filtres à facettes font le travail) |
| Pièces auto / moto / marine / camping-car / sports motorisés | Throttle | Le finder de compatibilité est la fonctionnalité décisive pour cette verticale |
| Bureau, IT, électronique, fournitures de copieur, fournitures scolaires / gouvernementales | OfficeIT | Commandes B2B de bureau en gros + langage visuel IT corporate |
| Encre d'imprimante, toner, papier grand format, consommables de reprographie | Inkline | Le finder de cartouche d'imprimante élimine l'erreur acheteur n°1 de cette verticale |
| Nettoyage / hygiène (JanSan) | Vertex | La base MRO de Vertex correspond parfaitement au JanSan ; aucun finder spécialisé nécessaire |
| Produits chimiques industriels / lubrifiants avec fiches techniques | Vertex | Tableaux de spécifications techniques + bloc de documents sont au cœur du préréglage Vertex |
| Matériaux de construction (bois, béton, plâtre) | Vertex | Base Vertex + page de commande en gros fonctionnent bien ; envisagez le bleu OfficeIT si vous voulez une palette plus froide |
| Produits promotionnels avec impression de logo personnalisé | Inkline | L'accent turquoise + le langage visuel boutique d'impression s'alignent avec la catégorie, même si le finder est plus utile pour l'encre/toner |
| Grossiste uniquement (pas de B2C) | Vertex ou OfficeIT | L'un ou l'autre fonctionne ; choisissez l'accent qui correspond à votre marque. Basculez le Mode vitrine sur B2B uniquement. |
Personnalisation d'un préréglage
Les préréglages sont des points de départ. Après installation, vous pouvez :
| Personnaliser | Comment |
|---|---|
| Couleur d'accent | Paramètres du thème ▸ Couleurs ▸ Palette de démarrage ▸ Personnalisée, puis choisissez votre propre --color-accent |
| Logo | Paramètres du thème ▸ Logo — remplacez le logo de démonstration par votre propre SVG ou PNG |
| Ordre des sections de la page d'accueil | Personnaliseur ▸ Accueil — glissez les sections pour réorganiser, ou ajoutez/supprimez des sections depuis la palette de 30+ sections |
| Imagerie hero | Cliquez sur la section Hero dans le personnaliseur, remplacez l'image de chaque diapositive |
| Imagerie lifestyle / secteur | Remplacez par section dans le personnaliseur ; chaque section a un sélecteur d'image |
| Libellés et données des menus déroulants du finder | (Throttle / OfficeIT / Inkline) — voir le Guide de configuration des finders pour la structure de données pilotée par métaobject |
| Typographie | Paramètres du thème ▸ Typographie — police de titre, police de corps, ratio d'échelle |
| Copie / CTA | Modifiez le texte en ligne dans le personnaliseur pour chaque section |
| Traductions | Paramètres du thème ▸ Langues — fournissez des chaînes personnalisées via les surcharges locales/*.schema.json |
Après personnalisation, vous pouvez enregistrer votre travail comme un thème nommé dans Boutique en ligne ▸ Thèmes ▸ Bibliothèque de thèmes — utile lors de tests A/B ou de mise en scène de modifications visuelles.
Lectures associées
- Aperçu — Pourquoi Vertex livre 4 préréglages dans un seul thème
- Installation — Installation du thème + sélection de préréglage pendant la configuration
- Référence des paramètres de thème — Couleurs ▸ Palette de démarrage et paramètres par préréglage
- Markets & multi-devises — Chaque préréglage fonctionne de manière identique dans tous les markets
- Guide des modes vitrine — Comment Hybride / B2B uniquement / B2C uniquement interagissent avec les préréglages
- Tableau de bord du compte client — Identique dans tous les préréglages (seule la couleur d'accent change)
- Guide de la page RFQ — Identique dans tous les préréglages
- Guide de configuration B2B — La même configuration B2B fonctionne pour les 4 préréglages
Résumé
- Vertex livre 4 préréglages de démonstration dans une seule licence de thème : Vertex (ambre industriel), Throttle (rouge-orange pièces auto), OfficeIT (bleu bureau/IT), Inkline (turquoise consommables d'impression).
- Chaque préréglage a son propre modèle de page d'accueil, son finder, sa CSS d'accent et ~9 images lifestyle.
- Basculez de manière permanente dans Paramètres du thème ▸ Couleurs ▸ Palette de démarrage + en appliquant le suffixe de modèle de page d'accueil du préréglage.
- Basculez temporairement pour les prévisualisations en ajoutant
?view=throttle | officeit | printsupplyà n'importe quelle URL de vitrine. - Les préréglages sont des points de départ — la couleur d'accent, la mise en page de la page d'accueil, le finder, l'imagerie et la copie sont tous remplaçables indépendamment.
- Un 5e préréglage personnalisé prend environ une heure à créer en copiant un fichier
demo-*.cssexistant et en le câblant danslayout/theme.liquid.