Lumiere
Guide de mise en route

1. Décompresser, puis importer

Ce que vous téléchargez est un paquet, pas le thème lui-même. À l’intérieur :

1. Dans votre admin Shopify : Boutique en ligne → Thèmes.
2. Sous Bibliothèque de thèmes : Ajouter un thème → Importer un fichier zip.
3. Choisissez lumiere-theme.zip (le fichier intérieur — ne le décompressez pas).
4. LUMIERE apparaît dans votre bibliothèque en brouillon. Personnaliser pour le régler, Publier quand vous êtes prêt — votre thème en ligne reste intact jusque-là.

L’erreur la plus courante est d’importer le paquet extérieur. Shopify le refusera — il attend lumiere-theme.zip.

Le thème est Online Store 2.0. Il fonctionne sur tout forfait Shopify, ne demande aucune application et ne charge aucun service tiers.

2. Premiers réglages (10 minutes)

• Logo & favicon — votre logo et sa largeur. Laissé vide, le thème affiche le nom de votre boutique dans la police de titres.
• Couleurs — quatre couleurs pilotent tout : principale, accent, fond, texte. Bordures, texte secondaire et voiles en sont dérivés automatiquement.
• Typographie — polices de titres et de texte tirées de la bibliothèque Shopify. Playfair Display et Inter par défaut.
• Style de thème — la densité (compacte, confortable, spacieuse) multiplie tous les espacements d’un coup ; le style des filets les règle sur aucun, fin ou marqué.
• Mise en page, boutons, champs, icônes, badges — largeur du conteneur, rayon des coins, casse et bordure des boutons, fond des champs, épaisseur du trait des icônes. Chacun pilote une variable CSS utilisée dans tout le thème.

3. Menus

• Le menu principal se règle dans la section En-tête. Il alimente la navigation de bureau, ses menus déroulants (deux niveaux pris en charge) et le tiroir mobile.
• Les menus déroulants s’ouvrent au survol et au focus clavier ; le tiroir mobile confine le focus et se ferme avec Échap.

4. Gabarits de page fournis

Créez vos pages dans Boutique en ligne → Pages et attribuez-leur le gabarit correspondant (liste déroulante « Modèle » à droite) :

Ces deux-là comptent : l’en-tête renvoie vers /pages/wishlist, et le formulaire de contact n’apparaît que sur une page utilisant le gabarit page.contact. Recherche, blog, article, liste de collections, panier, 404, mot de passe, carte cadeau et tout l’espace client sont déjà inclus et ne demandent aucun réglage.

5. Sections

28 sections sont disponibles depuis Ajouter une section, chacune avec un préréglage prêt :

• Éditorial — hero, diaporama, texte enrichi, image avec texte, bannière vidéo, lookbook, galerie, multi-colonnes, onglets, séparateur.
• Commerce — collection mise en avant, collections mises en avant, produits associés, comparatif, compte à rebours, guide des tailles.
• Preuve — témoignages, avis, FAQ, liste de logos, badges de confiance, carte.
• Autres — newsletter, articles de blog, contact, favoris, contenu personnalisé (Liquid).

La section Carte n’intègre volontairement aucun cadre tiers : vous fournissez une image fixe de votre carte et un lien vers l’application de cartes de votre choix, si bien que rien concernant vos visiteurs ne quitte la boutique au chargement de la page. La section Contenu personnalisé (Liquid) n’est pas vérifiée par le thème — une erreur de syntaxe peut y casser la page, prévisualisez donc toujours avant de publier.

6. Nuanciers

Paramètres du thème → Nuanciers. Une correspondance par ligne, sous la forme Nom: #hex :

Le thème fait correspondre les valeurs d’option de vos produits sans tenir compte de la casse. Une valeur qui est déjà une couleur CSS valide (black, #c0392b) fonctionne sans correspondance ; ce qui n’est pas associé retombe sur un gris neutre plutôt que de disparaître. La taille et la forme des pastilles se règlent dans le même panneau ; le sélecteur peut aussi passer en liste déroulante sous Sélecteurs de variantes.

7. Panier & favoris

• Paramètres du thème → Panier — tiroir latéral (le panier s’ouvre sans quitter la page) ou page dédiée. En mode « page », le tiroir n’est pas rendu du tout et l’icône de l’en-tête devient un simple lien.
• Barre de livraison offerte — indiquez le seuil en centimes (10000 = 100,00). Mettez 0 pour masquer la barre.
• Note de commande — active le champ de note sur la page panier.
• Favoris — enregistrés dans le navigateur du visiteur, sans compte ni application. Créez la page des favoris (voir plus haut) pour que le lien de l’en-tête aboutisse.
• Boutons de paiement express — Apple Pay, Google Pay et Shop Pay sur la page produit, pour qu’un acheteur puisse payer en un geste. Activez-les avec Afficher les boutons de paiement express dans la section produit. Ils viennent de Shopify : ils n’apparaissent qu’une fois les paiements accélérés activés dans Paramètres → Paiements → Shopify Payments → Gérer → Portefeuilles, et chaque visiteur ne voit que ce que son appareil prend en charge.

8. Shopify Markets

Paramètres du thème → Shopify Markets active les sélecteurs de pays, de langue et de devise dans l’en-tête. Ils soumettent le formulaire de localisation de Shopify et ramènent le visiteur à la page où il se trouvait.

Le bandeau de marché suggère un changement quand le pays détecté diffère du pays courant. La détection passe par le point d’accès de Shopify lui-même — aucun service de géolocalisation tiers, aucune adresse IP de visiteur envoyée hors de la boutique.

9. Traductions

La vitrine est livrée avec des traductions complètes en anglais et en français, et l’éditeur de thème aussi — chaque libellé de réglage est traduit, pas seulement le texte visible par les clients.

Toute autre langue passe par le système standard de Shopify : Paramètres → Langues → Ajouter une langue, puis Boutique en ligne → Thèmes → ⋯ → Modifier le contenu du thème par défaut.

10. Bon à savoir

• Sans JavaScript — filtres de collection, choix de variante et panier fonctionnent toujours ; le tiroir se replie sur la page panier.
• Accessibilité — chaque tiroir et chaque fenêtre confine le focus et le restitue à la fermeture, la section onglets suit le modèle ARIA, les tableaux sont de vrais tableaux avec en-têtes, et les animations respectent prefers-reduced-motion.
• Médias produit — vidéos et modèles 3D sont pris en charge dans la galerie produit.
• CSS personnalisé — Paramètres du thème → CSS personnalisé s’applique sur chaque page. Pratique pour les retouches ponctuelles, et le premier endroit où regarder si quelque chose s’affiche bizarrement.