Création d’un site vitrine/catalogue pour Serge Heitz

CSS
jQuery
Shopify
Twig

Table des matières

Serge Heitz est un spécialiste de véhicules d’exception / de collection.
Le besoin : un site vitrine qui ressemble à une galerie haut de gamme, avec un vrai catalogue structuré pour présenter les véhicules disponibles, vendus récemment, projets en cours, etc.

On est partis sur Shopify, non pas pour faire un “pur e-commerce classique”, mais pour utiliser :

  • son backend propre et robuste pour gérer les fiches véhicules comme des produits,
  • ses collections pour organiser l’inventaire,
  • et son écosystème pour préparer d’éventuelles évolutions (paiement d’acomptes, réservations, merchandising).

Le plan de travail

1. Architecture du catalogue

  • Structuration en collections :
    • par type de véhicule,
    • par état (disponible, vendu, réservé),
    • par période / gamme (ex : “youngtimers”, “classics”, etc.).
  • Utilisation des tags pour permettre des filtres simples : année, boîte, couleur, puissance, etc.

Objectif : que l’utilisateur puisse naviguer rapidement dans les véhicules, même si le catalogue est riche.

2. Fiches “produit” pensées comme fiches véhicules

On a détourné la logique standard Shopify :

  • champs mis en avant :
    • année, kilométrage, motorisation, boîte, couleur, numéro de châssis (si souhaité),
    • état du véhicule, historique, points forts.
  • mise en avant des galeries photos en plein écran / grande largeur,
  • mise en avant de blocs “storytelling” : histoire du modèle, rareté, intérêt collection.

Le bouton “Ajouter au panier” peut être remplacé ou complété par :

  • “Demander plus d’informations”,
  • “Réserver un appel”,
  • ou un formulaire de contact ciblé.

3. Design vitrine haut de gamme

  • Page d’accueil orientée image : visuels plein écran, focus sur quelques modèles emblématiques.
  • Travail sur la typographie et la respiration des pages pour laisser la place aux photos.
  • Mise en avant de rubriques de réassurance :
    • expertise,
    • accompagnement,
    • service sur mesure.

Le but : un site qui se consulte comme un portfolio de collectionneur, tout en restant très lisible.

4. Back-office simple pour gérer les annonces

  • Utilisation de metafields pour les données techniques spécifiques.
  • Process interne clair :
    • création de la fiche,
    • ajout des visuels,
    • association aux bonnes collections,
    • bascule en “vendu” sans supprimer la page (utile pour l’historique et la crédibilité).