Ocre
Guide d’installation

1. Installer le thème

1. Dans l’admin Shopify : Boutique en ligne → Thèmes.
2. Ajouter un thème → Importer un fichier zip.
3. Choisissez ocre.zip, le fichier intérieur du paquet téléchargé, pas le paquet entier.
4. OCRE apparaît dans votre bibliothèque, non publié. Personnaliser pour le régler avec vos propres produits ; publiez quand vous êtes prêt. Votre thème actuel reste en ligne pendant ce temps.

Si Shopify répond que le fichier n’est pas un thème valide, vous avez presque certainement importé le paquet extérieur. Décompressez-le d’abord.

2. Le menu principal

Sur ordinateur, l’en-tête est un rail latéral : votre menu s’y écrit à la verticale, à côté du bouton panier. Sur mobile, il devient un en-tête collant avec un menu plein écran en grands titres.

1. Boutique en ligne → Navigation : ouvrez le Menu principal ou créez-en un.
2. Gardez 4 à 7 éléments d’un ou deux mots, par exemple Accueil, Gamme, Campagne, Maison, Aide.
3. Dans l’éditeur de thème, En-tête → Menu : choisissez-le.

Les sous-menus s’affichent dans le menu mobile ; le rail sur ordinateur ne montre que le premier niveau. Le pied de page compte deux colonnes de menu, chacune avec son titre et son menu.

3. Les cinq métachamps produit

La matière, le poids, l’origine et la garantie de chaque pièce viennent de cinq métachamps de l’espace de noms custom. Tous sont facultatifs : un métachamp vide masque simplement la ligne qui l’utilise.

1. Paramètres → Données personnalisées → Produits → Ajouter une définition.
2. Saisissez exactement l’espace de noms et la clé du tableau et le type indiqué, du texte simple même pour le poids : le thème affiche la valeur telle que vous la tapez.
3. Activez l’accès vitrine. Sans lui, le thème ne peut pas lire la valeur, et les caractéristiques restent vides, sans erreur.

La petite étiquette au-dessus du titre du produit associe le type de produit et la matière, par exemple Assises · Chêne et lin.

4. Modèles de page

Créez les pages dans Boutique en ligne → Pages, puis choisissez le modèle dans le champ Modèle de thème de chaque page.

5. Paramètres du thème

• Couleurs : accent (terracotta #a8532e), encre, bois (le trait des dessins de mobilier), fond, fond doux, dégradé de l’étagère, bordures, paragraphes et texte secondaire. Gardez un contraste d’au moins 4,5:1 entre le texte et son fond si vous les changez.
• Logo : une image pour le rail et l’en-tête mobile, ou une seule lettre du rail dans le carré d’accent ; favicon.
• Panier : tiroir en bas d’écran ou page panier, la barre de livraison offerte et son seuil dans la devise de la boutique, et le nombre de mensualités affiché sous le prix (0 le masque).
• Pastilles de finition : les noms d’options affichés en pastilles de couleur (Finish, Finition, Color, Couleur par défaut) et une liste Nom:#hex en secours. Les pastilles natives de Shopify passent en premier.
• Animations : un seul interrupteur pour les effets 3D (inclinaison des cartes, cartes qui se retournent, parallaxe du héros). Le mouvement est toujours coupé pour les visiteurs qui demandent moins d’animations.

6. Accueil

Chaque section peut être ajoutée à n’importe quelle page, déplacée et retirée.

• Héros en deux parties : fond d’accent, badge, titre, texte, deux boutons et une carte produit qui s’incline en 3D sous le pointeur, avec des cercles en parallaxe.
• Barre d’avantages : jusqu’à six avantages, chacun avec une icône (camion, horloge, bouclier, flèche de retour).
• Étagère 3D : un carrousel en perspective, de 3 à 12 produits d’une collection ; on le fait glisser, on utilise les flèches, les points ou les touches fléchées.
• Grille de chiffres : jusqu’à huit chiffres avec une légende, chacun sur sa couleur.
• Cartes qui se retournent : quatre produits dont la carte se retourne au survol ou au toucher ; le dos montre custom.back_text, la matière, le poids et la garantie, et un bouton d’ajout.
• Aussi : bande de campagne, grille de valeurs, FAQ et livraison, introduction de page et formulaire de contact.

7. Fiche produit

La colonne média reste en place pendant que les informations défilent ; avec plusieurs images, des vignettes s’affichent dessous et le choix d’une variante montre son image. Les blocs se réordonnent : catégorie et matière, titre, prix avec mensualités et mention des taxes, description, sélecteur de variantes (pastilles pour les finitions, boutons pour le reste), caractéristiques tirées des métachamps, texte libre, boutons d’achat et blocs d’application.

• La barre d’achat reste collée au bas de l’écran pendant la lecture, avec le sélecteur de quantité et les boutons de paiement accéléré de Shopify.
• Présélectionner chaque option est désactivé par défaut : la dernière option, la taille par exemple, doit être choisie avant l’ajout au panier.
• Va bien avec affiche sous le produit les recommandations de Shopify.

8. Collection, panier, recherche

• Collection : une liste dont la ligne survolée s’agrandit, ou une grille de cartes qui s’inclinent ; le visiteur change de vue et son choix est retenu. Les filtres de l’application Search & Discovery s’affichent en pastilles, avec un filtre de prix et le tri, le tout utilisable sans JavaScript.
• Panier : un volet qui monte du bas de l’écran, avec la barre de progression vers la livraison offerte ; ou la page panier, avec la note de commande.
• Recherche : des suggestions apparaissent pendant la saisie.
• Inclus aussi : journal et article, liste des collections, 404, pages du compte client, page mot de passe et carte cadeau.

9. Langues

L’interface est livrée en anglais par défaut avec une traduction française complète, vitrine et éditeur de thème. Pour vendre en français : Paramètres → Langues → Ajouter une langue → Français, puis publiez-la. Le texte que vous saisissez dans les sections est votre propre contenu : traduisez-le avec l’application gratuite Translate & Adapt de Shopify. Les sélecteurs de langue et de pays du pied de page apparaissent dès que la boutique a plus d’une langue ou d’un pays.

10. Bon à savoir

Certaines fonctions sont intégrées mais n’apparaissent qu’une fois la boutique réglée pour elles :

• Boutons de paiement accéléré (Shop Pay, Apple Pay…) : activez les portefeuilles dans Paramètres → Paiements ; ils ne s’affichent pas tant que la boutique est protégée par un mot de passe.
• Prix unitaires : ils s’affichent quand une variante a une mesure de prix unitaire.
• Recommandations : Shopify les construit à partir de vos ventes et de votre catalogue ; une boutique récente peut en montrer peu au début.
• Filtres de collection : ils demandent l’application gratuite Search & Discovery.
• Accessibilité : l’étagère 3D se pilote au clavier et annonce chaque changement, les cartes ont un bouton de chaque côté, et le tiroir panier garde le focus jusqu’à ce qu’Échap le ferme.