Pop
Guide de mise en route

1. Installer le thème

1. Dans votre admin Shopify : Boutique en ligne → Thèmes.
2. Ajouter un thème → Importer un fichier zip.
3. Choisissez pop.zip, le fichier intérieur du paquet téléchargé, pas le paquet entier.
4. Il apparaît dans votre bibliothèque sous POP, non publié. Personnaliser pour y travailler ; publiez quand vous êtes prêt.

Si Shopify indique que le fichier n’est pas un thème valide, vous avez presque sûrement téléversé le paquet extérieur. Décompressez-le d’abord.

2. L’accent

Le thème livre un seul style, Play, déjà appliqué : papier crème, une encre pour le texte et les traits de 2 px, un accent corail. Le seul choix à faire est l’accent. Dans l’éditeur, ouvrez Paramètres du thème → Couleurs → Accent : Corail, Violet, Menthe, Jaune ou Personnalisé, auquel cas la couleur Accent personnalisé en dessous est utilisée.

• L’accent peint les boutons au survol, le prix du stack, les étoiles et le point du logo.
• Quel que soit votre choix, le thème le mélange pas à pas vers l’encre jusqu’à tenir 4,5:1 sur le papier et sur la teinte pêche, et utilise cette version plus sombre pour le texte. Un jaune pâle reste lisible.
• Les cinq teintes pastel sous les produits (pêche, menthe, beurre, ciel, lilas) font partie du design et ne changent pas.

3. Réglages du thème

• Couleurs : Encre (texte, contours, boutons pleins), Papier, l’Accent ci-dessus, Texte secondaire.
• Typographie : rien à régler. Young Serif (les grands titres) et Manrope (tout le reste) sont chargées depuis Google Fonts par le thème, avec un preconnect ; il n’y a pas de sélecteur de police. Toutes deux sont sous SIL Open Font License, qui autorise l’auto-hébergement si vous préférez.
• Mise en page : Largeur du conteneur (1100 à 1440 px) et Marge latérale (16 à 40 px).
• Marque : le Logotype et le Second mot après le point accent (« pop » et « play » dans la démo ; laissez le second vide pour un seul mot), ou un Logo image avec sa hauteur (20 à 48 px), plus l’Image de partage utilisée quand une page n’en a pas.
• En-tête : afficher ou masquer les boutons de recherche et de compte. L’en-tête est toujours une pilule collante.
• Vignettes produit : Ajustement des images, Contenir garde un détouré ou un dessin entier sur la teinte, Couvrir remplit le cadre avec une photographie ; le prix, la ligne de matière et Matières affichées (1 à 3), la source du Badge, et le rond « + » qui ajoute la variante par défaut au panier.
• Panier : Ouvrir le tiroir après un ajout, Afficher la barre de livraison offerte et Livraison offerte dès (0 à 200, dans la devise de la boutique ; 0 masque la barre).
• Réseaux : Instagram, TikTok, Pinterest ; ils deviennent la colonne Suivre du pied de page.
• Animations : Activer les animations. La bande défilante, le frétillement et les inclinaisons s’arrêtent quand c’est désactivé, et toujours pour les visiteurs qui préfèrent moins d’animations.

4. La page d’accueil

Dix sections sont en place à l’installation, dans cet ordre :

• Héro : surtitre ; titre, Mot accent (couleur accent, italique) et Fin du titre ; texte ; deux boutons (le premier mène à tous les produits par défaut, le second demande un libellé et un lien) ; une Ligne de preuve sociale avec cinq étoiles ou non ; la Pièce (un détouré sur fond transparent convient le mieux ; sinon le thème dessine un pendentif) ; Couleur du blob (accent, une teinte ou l’encre) ; deux pastilles, en haut à droite en encre et en bas à gauche sur papier.
• Bande défilante : une bande d’encre inclinée. Durée d’une boucle (10 à 60 s), Inclinaison (−3° à 3°), jusqu’à huit blocs message.
• Grille de produits : titre, collection, produits à afficher (4 à 16), Afficher les puces de filtre. Jusqu’à six blocs Filtre, une puce chacun : une collection et un libellé facultatif. Les puces trient les vignettes déjà sur la page ; sans JavaScript chaque puce mène à sa collection. Ancre #shop.
• Carrousel des chouchous : titre, Afficher le cœur, collection (son ordre donne le rang), produits à afficher (3 à 12). Le rang tient dans un badge accent, le nombre d’avis sous le nom quand reviews.rating_count est renseigné, et le prix est un bouton qui ajoute la variante par défaut.
• Créateur de stack : collection (les pièces éligibles), produits à afficher (3 à 12), Pièces par stack (2 à 4), Remise (5 à 50 %), surtitre, titre, Fin du titre, texte. Ancre #stack. Voir la section 6.
• Avis : cinq étoiles ou non, titre ; jusqu’à six blocs Avis avec une citation, un prénom, un produit, une teinte et une inclinaison.
• Vu sur vous : titre, le compte de la maison et son lien ; jusqu’à douze blocs Image avec une image, un compte, un lien, une teinte et une inclinaison. Des cadres carrés qui grandissent et s’inclinent au survol.
• Quiz : collection (les produits parmi lesquels il choisit), surtitre ; jusqu’à cinq blocs Question. Une section d’encre. Voir la section 6.
• Newsletter : titre, texte, libellé du bouton. Un formulaire client Shopify ; l’abonné est créé comme client avec le tag newsletter.
• FAQ : titre, Ouvrir la première question ; jusqu’à douze blocs Question. Ancre #faq.

Chaque section a un Espace au-dessus et un Espace en dessous (0 à 160 px sur les sections de l’accueil, 0 à 200 px sur les autres, par pas de 4) ; les écrans de moins de 720 px gardent 70 % de la valeur. Dix autres sections attendent sous Ajouter une section : produit à l’honneur, vignettes de collections, adresse (avec le formulaire de contact), héro de page, texte, vidéo, Liquid personnalisé, filet, produits associés et le pied de page. Chacune porte un texte de démo traduit : laissez un champ vide et le texte du thème s’affiche dans la langue du visiteur ; saisissez quoi que ce soit et votre texte l’emporte. Désactivez Afficher le texte de démonstration si vide une fois votre contenu en place.

5. Produits : teintes, badges, matières, pastilles, tailles

Chaque vignette lit vos tags ou vos métachamps :

Paramètres du thème → Vignettes produit → Badge choisit la source du badge : le tag par défaut, le métachamp, ou aucun.

La fiche produit lit le nom de vos options :

Les deux listes se modifient dans les réglages de la section produit, séparées par des virgules.

• Galerie : des cartes cernées et arrondies sur une teinte avec un rail de vignettes rondes, une scène 4:5 ; à gauche ou à droite des détails (Position de la galerie) ; sur petit écran un curseur à points. Une variante avec son propre média fait passer cette vue devant.
• Bouton : le prix dans « Ajouter au panier », qui suit la variante ; il affiche « Ajouté à ton sac ✓ » après l’ajout et ouvre le tiroir quand le réglage du panier le demande. Une Ligne de réassurance sous le bouton est à vous.
• Accordéons : jusqu’à huit lignes, un titre et un texte ou une page ; Utiliser la description du produit affiche la description dans une ligne. Trois lignes sont livrées : Matières & entretien, Livraison & retours, Tailles.
• Plans de vente : quand un produit en a (une application d’abonnements les crée), ils s’affichent en options d’achat au-dessus du bouton.
• Boutons de paiement rapide : désactivés par défaut ; activez Afficher les boutons de paiement rapide dans la section produit une fois les portefeuilles activés sous Paramètres → Paiements.
• Complète ton stack : la rangée sous le produit suit les recommandations de produits de Shopify, donc les paires définies dans Search & Discovery ; 2 à 10 produits.

6. Le stack et le quiz

Le créateur de stack ajoute les pièces choisies (leur variante par défaut, quantité 1) au panier en une seule requête, chaque ligne portant la même propriété _stack_id, puis ouvre le tiroir quand le réglage du panier le demande. Une fois chaque emplacement rempli, la carte affiche le total plein barré et le total indicatif après la Remise de la section. Le thème n’applique aucune remise lui-même. Créez-la dans l’admin : Réductions → Créer une réduction → Montant de réduction sur les produits, en réduction automatique, par exemple un pourcentage sur une quantité minimale de 3 articles de votre collection de pièces empilables, ou une Shopify Function pour des règles plus fines. Gardez son pourcentage égal à celui de la section, pour que le panier corresponde à la carte.

Le quiz : chaque bloc Question a un titre, trois options et, pour chaque option, des tags séparés par des virgules : un tag produit comme minimal, un handle de collection comme bagues, ou un tag de budget comme budget:low. Le quiz lit jusqu’à 24 produits de la collection de la section. Une réponse garde les produits qui portent au moins un de ses tags ; une option sans tag ne filtre pas ; une réponse qui ne laisserait rien est ignorée, il y a donc toujours un résultat. Après la dernière question, le premier produit restant, dans l’ordre de la collection, surgit en carte avec sa teinte, son nom, sa matière, son prix et un bouton d’ajout au panier. La démo porte des textes pour trois questions ; une quatrième et une cinquième affichent des textes d’attente jusqu’à ce que vous saisissiez les vôtres. La section est sur l’accueil et seule sur le gabarit de page quiz.

7. Menus et pages

• Menu de l’en-tête : Boutique en ligne → Navigation. L’en-tête lit votre Menu principal ; sous 900 px il passe dans un tiroir flottant, les liens imbriqués en groupes repliables, avec un Menu secondaire du tiroir mobile facultatif en dessous.
• Pied de page : un filet de 2 px, le logotype, une Signature ; une colonne par bloc Colonne de menu (jusqu’à quatre ; le titre retombe sur Boutique, Aide, Suivre, Plus), une colonne Suivre depuis les réglages de réseaux, puis l’année et le nom de la boutique, le Menu légal ou les politiques de la boutique, les sélecteurs de langue et de pays, et les logos de paiement (Afficher les logos des moyens de paiement). Les deux colonnes sont livrées pointant vers des menus nommés pop-shop et pop-aide ; choisissez les vôtres.
• Quiz : gabarit quiz. Le second bouton du héro et le menu de démo mènent à /pages/quiz, donnez donc ce handle à la page.
• Contact : gabarit contact, le formulaire avec jusqu’à huit blocs adresse.
• À propos : gabarit about : héro de page, votre texte, puis des avis.
• FAQ : gabarit faq.
• Guide des tailles : toute page avec le gabarit par défaut, puis pointez le Lien du guide des tailles de la section produit dessus.

8. Collection, panier, recherche

La page collection affiche un fil d’Ariane, le nombre de produits, un bouton Filtres et un tri en pilule. Les filtres viennent de l’application gratuite Search & Discovery de Shopify : installez-la, activez les filtres voulus, et ils s’ouvrent dans un tiroir à gauche avec le nombre de filtres actifs ; sans l’application, le bouton n’apparaît simplement pas. Filtres et tri sont un formulaire ordinaire, la page fonctionne donc sans JavaScript. Réglages : produits par page (6 à 48), afficher les filtres, afficher le tri, espacements.

Le tiroir panier est un panneau flottant cerné : la barre de livraison offerte sous son titre indique « encore X pour la livraison offerte », puis « livraison offerte débloquée » ; chaque ligne montre une vignette teintée, les options et la matière, une puce de quantité (0 retire la ligne) ; puis le sous-total, le paiement et la Note sous le bouton. Les propriétés de ligne qui commencent par _, comme _stack_id, restent cachées. La page panier ajoute une note de commande ou non, une Valeur de la ligne livraison et une Mention.

Le panneau de recherche affiche les Liens de suggestion (un menu) avant la saisie ; les résultats apparaissent pendant la frappe. La page de résultats a ses Résultats par page (6 à 48).

9. Illustrations

Dix-huit dessins au trait sont livrés avec le thème : bagues solitaire, halo et anneau, une paire d’anneaux, colliers pendentif, perles et saphir, boucles d’oreilles, une bague de héro, un gros plan, deux scènes d’atelier et six looks. Ils occupent chaque emplacement d’image tant que vous n’en posez pas : vignettes, galerie, héro, stack, quiz, panier. Ils sont placés sous CC0, vous pouvez donc les garder, les modifier ou les remplacer ; la démo utilise leurs rendus PNG comme images produit.

10. Langues

L’interface est livrée en anglais par défaut avec une traduction française complète incluse, vitrine et éditeur (locales/fr.json et fr.schema.json). Pour vendre en français : Paramètres → Langues → Ajouter une langue → Français, puis publiez-la. La vitrine suit la langue de l’URL où se trouve le visiteur, textes de démo compris. Les sélecteurs de langue et de pays du pied de page apparaissent dès que votre boutique publie plus d’une langue ou livre plus d’un marché.