La section En-tête contrôle la navigation de premier niveau, le branding et les contrôles utilitaires à accès rapide sur votre vitrine. Les paramètres principaux vous permettent d'ajuster la couleur de fond, la hauteur de l'en-tête, l'affichage fixe, la disposition du logo et les contrôles spécifiques pour les fonctionnalités clés :

Barre de recherche :

Activez ou désactivez la visibilité de la barre de recherche centrale et personnalisez son texte d'espace réservé.

Tiroir de menu :

Sélectionnez les menus de navigation, personnalisez le texte des liens et choisissez d'afficher la navigation dans un tiroir latéral (même sur ordinateur) positionné à droite.

Tiroir Compte & Panier :

Définissez des étiquettes personnalisées pour les déclencheurs du compte client et du panier, et définissez le titre de l'état vide pour le tiroir du panier.

La section Accordéon vous permet de créer des listes de texte repliables, parfaites pour les questions fréquemment posées ou les politiques du magasin. Les visiteurs peuvent cliquer sur n'importe quelle question pour la dérouler et lire la réponse, gardant ainsi votre page propre et organisée. Vous pouvez facilement définir le titre principal de votre section, changer sa couleur de texte et ajuster l'espacement au-dessus et en dessous du bloc à l'aide de curseurs simples dans l'Éditeur de Thème.

La section Division d'Action associe un message texte détaillé à gauche avec une boîte de fonctionnalités dédiée ou un menu de contact direct à droite. Elle est idéale pour présenter des services comme les évaluations en gros, la consignation ou des canaux de support client spéciaux. Vous pouvez personnaliser le titre principal, le sous-titre, la description, les boutons d'étiquette et le titre de la barre latérale, ainsi qu'ajuster les tailles de police, la largeur de la barre latérale et les couleurs de fond et d'accent individuelles directement dans les paramètres.

La section Curseur de Blog présente les derniers articles et histoires de votre boutique dans un carrousel propre et défilant. Dans les paramètres principaux de la section, vous pouvez définir une couleur de fond ou un dégradé, personnaliser les marges supérieures et inférieures, ajuster les poids de police et définir des étiquettes standard comme le titre de la section, le texte du lien et les boutons "lire la suite". En ajoutant des blocs Article individuels, vous pouvez afficher soit des articles de blog standard, soit des histoires personnalisées avec des options pour des mises en page en image pleine ou en carte divisée, des images personnalisées, des arrière-plans vidéo (YouTube, Vimeo ou MP4) et des liens de redirection personnalisés.

La Bannière d'Appel à l'Action crée une section promotionnelle large et accrocheuse conçue pour stimuler l'engagement des clients. Vous pouvez personnaliser le sous-titre, le titre principal, la description et le bouton d'appel à l'action avec un lien direct. Vous pouvez également ajouter des blocs d'Info individuels, qui s'affichent automatiquement sous le texte avec des icônes de coche propres pour mettre en avant des points clés de confiance ou des garanties. Les paramètres de la section vous permettent également d'ajuster les marges supérieures et inférieures et de choisir une couleur de fond ou un dégradé personnalisé.

La section Centre de Campagne affiche une grille structurée de cartes promotionnelles pour mettre en avant les offres clés du magasin, les campagnes et le contenu exclusif. Les paramètres de la section contrôlent les titres principaux, le nombre de colonnes par ligne, le style de fond et les effets globaux au survol des cartes, tandis que les blocs Carte individuels vous permettent de personnaliser les titres, descriptions, liens des boutons et icônes.

Comment obtenir les codes d'icônes SVG

Pour ajouter des icônes vectorielles personnalisées à vos cartes :

1. Trouvez une icône : Visitez une bibliothèque d'icônes open-source gratuite (comme Lucide Icons ou Tabler Icons).
2. Copiez le code SVG : Recherchez l'icône souhaitée (par exemple, un cœur, une étoile ou un diamant), cliquez dessus et sélectionnez Copier SVG ou Copier le code.
3. Collez dans les paramètres : Collez le bloc de code brut directement dans le champ Icône de votre bloc Carte.

Le Tiroir du Panier permet aux clients de prévisualiser et gérer les articles via un menu déroulant au survol de l'en-tête ou un tiroir coulissant avec contrôles de quantité, entrées promo et liens de paiement (nécessite l'ajout du bloc Tiroir du Panier sous l'En-tête). Dans Paramètres du Thème > Récompenses du Panier, vous pouvez configurer jusqu'à trois seuils de dépenses par paliers (par exemple, paliers de dépenses pour 30 %, 50 % ou 70 % de réduction) pour afficher une barre de progression dynamique des récompenses directement dans le tiroir.

La Grille de Galerie de Contenu associe des éléments médias en vedette (vidéo et images statiques) à un carrousel propre d'avis clients.

• Paramètres généraux de la section : Personnalisez les marges supérieures et inférieures, le sous-titre de la section (par exemple, "AVIS CLIENTS"), l'image principale, les médias vidéo et les couleurs des bordures du conteneur. Pour le contenu vidéo, vous pouvez télécharger un fichier MP4 direct via Shopify Video ou saisir une URL YouTube (utilisée automatiquement si aucune vidéo Shopify n'est sélectionnée), avec une option pour activer la lecture automatique de la vidéo.

• Blocs d'avis : Ajoutez plusieurs blocs d'avis pour créer un curseur de témoignages à côté de votre grille média. Pour chaque bloc d'avis individuel, vous pouvez ajuster : la note par étoiles, le texte de l'avis, l'auteur et l'étiquette.

La section Carrousel de Collection présente les produits d'une collection sélectionnée dans un curseur propre et défilable horizontalement avec des flèches de navigation.

• Collection & Titre : Choisissez la collection du magasin à mettre en avant et définissez un titre personnalisé pour la section (par exemple, "Cartes Mythos Fantasy").
• Paramètres du Badge : Ajoutez un badge promotionnel (par exemple, "NOUVEAU") à côté du titre, sélectionnez sa couleur d'accent et activez Position badge en haut pour l'aligner.
• Boutons & Navigation : Personnalisez les étiquettes par défaut des boutons des cartes produits individuelles (par exemple, "Ajouter au panier") et configurez un bouton de section autonome avec une étiquette personnalisée (par exemple, "Acheter la Collection") et un lien direct.
• Style & Mise en page : Définissez des couleurs personnalisées pour le fond de la section, le fond du bouton et le texte du bouton, ainsi que des contrôles de marges supérieures et inférieures de la section.

La section Liste de Collections crée une grille de cartes interactives avec des dégradés personnalisés, des icônes vectorielles et des liens directs vers les collections. Vous pouvez personnaliser la couleur de fond de la section, le titre, le nombre de colonnes par ligne et les couleurs d'accentuation au survol, puis ajouter des blocs de Carte de Collection individuels pour représenter chaque collection.

Paramètres du Bloc Carte de Collection

Pour chaque bloc de carte, vous pouvez configurer :

• Collection : Sélectionnez la collection cible pour le lien de redirection.
• Titre de la Collection : Entrez le label personnalisé de la carte (par exemple, "Nouveautés").
• Icône : Collez le code brut
• Dégradé de Fond de la Carte : Ajoutez un code de dégradé linéaire CSS pour donner à chaque carte une transition de couleur de fond distincte. Format : linear-gradient(direction, couleur1, couleur2)

La section grille de Collections affiche une mise en page réactive de cartes de collections en vedette avec des images mises en avant et des titres de collections directs. Les contrôles de la section vous permettent d'activer la taille des éléments de la grille (Petit/Grand) et d'ajuster l'espacement de la grille, tandis que les blocs de collections individuels vous permettent de sélectionner et de présenter des collections spécifiques du magasin.

La section Formulaire de contact affiche un formulaire de demande client simplifié placé dans un conteneur de carte sombre. Les paramètres permettent une personnalisation complète des titres, sous-titres, descriptions, libellés des boutons de soumission, ainsi que des étiquettes de champs personnalisés ou du texte d'espace réservé pour les champs Sujet, Email et Message.

La section Héros présente une bannière d'arrière-plan pleine largeur avec des superpositions de texte centrées et un bouton d'appel à l'action. Les contrôles de section vous permettent de sélectionner l'image d'arrière-plan et d'ajuster la hauteur globale de la bannière, tandis que les blocs de contenu vous permettent d'ajouter des éléments personnalisables de titre, paragraphe et bouton.

La section Points chauds du héros combine une bannière héro interactive avec des icônes de points chauds (+ indicateurs) qui révèlent des carrousels de collections liés au survol. Les paramètres de la section contrôlent la typographie du héros, le style des boutons, les images d'arrière-plan pour bureau/mobile et l'opacité de la superposition, tandis que les blocs individuels de points chauds vous permettent d'assigner des titres, descriptions, collections cibles et coordonnées précises en pourcentage X/Y pour positionner chaque épingle sur l'image.

La section Vitrine avec info-bulles associe une bannière d'arrière-plan en vedette avec des titres alignés à gauche, des descriptions et des blocs d'éléments à puces personnalisables. Les paramètres de la section vous permettent d'ajuster les médias d'arrière-plan, l'opacité de la superposition et le style des cartes (couleurs et rayon des bordures), tandis que les blocs de points chauds vous permettent de placer des épingles interactives sur l'image avec des coordonnées X/Y indépendantes pour bureau et mobile afin d'afficher les détails et liens des cartes contextuelles.

La section Bannière de texte défilant crée une bannière de texte animée et en défilement continu pour les annonces et alertes du site. Les paramètres de la section vous permettent de personnaliser la couleur d'arrière-plan, la couleur du texte, la taille de la police et l'espacement entre les éléments, tandis que les blocs de texte individuels vous permettent d'ajouter des messages promotionnels uniques, des emojis ou des notes de mise à jour dans la boucle de la bannière.

La section Texte avec icônes affiche des cartes de fonctionnalités avec des icônes personnalisées, des titres et des descriptions disposés en grille multi-colonnes. Les paramètres globaux de la section vous permettent de personnaliser les titres, le nombre de colonnes par ligne, l'espacement de la grille, les dimensions des icônes et un badge optionnel de nombre d'étapes, tandis que les blocs individuels de boîte vous permettent de télécharger des images ou d'entrer des icônes vectorielles SVG brutes, de définir des arrière-plans dégradés personnalisés et de configurer les couleurs spécifiques des cartes et les boutons d'appel à l'action.

Pour obtenir le code SVG, visitez une bibliothèque d'icônes open source comme Lucide Icons ou Tabler Icons, recherchez l'icône souhaitée et cliquez sur Copier SVG ou Copier le code. Ensuite, collez directement le bloc de code brut dans le champ SVG de votre bloc de boîte.

La section Fil d'Ariane fournit une navigation simple sur la page avec un bouton retour à gauche et un indicateur de page actuelle à droite. Les paramètres de la section vous permettent de personnaliser la couleur d'arrière-plan, le libellé du bouton retour (par exemple, "Retour") et le texte préfixe de l'indicateur de visualisation (par exemple, "Vous regardez :").

La section Multicolonne vous permet d'afficher du contenu côte à côte pour mettre en avant les avantages clés, les étapes ou les fonctionnalités du magasin dans une mise en page épurée. Vous pouvez définir un titre principal et un sous-titre pour toute la section, ainsi qu'ajouter ou supprimer des blocs de colonnes individuels pour présenter des images, des titres et de brèves descriptions.

La section Liste de souhaits crée un espace dédié pour afficher tous les articles qu'un client a sauvegardés lors de sa navigation.

Lorsqu'un acheteur clique sur le bouton utilitaire Liste de souhaits sur n'importe quelle page produit, cet article est enregistré et s'affiche automatiquement sous forme de grille de cartes dans cette section — offrant aux clients un endroit facile et centralisé pour revoir et acheter leurs articles favoris plus tard.

La section Pied de page ancre le bas de votre vitrine avec des liens de navigation, l'image de marque, les détails de conformité et les outils d'engagement client. Ici, vous pouvez définir la couleur d'arrière-plan, activer l'affichage des icônes de paiement pour montrer les méthodes de paiement acceptées, et activer les politiques du magasin dans la barre inférieure.

Blocs du pied de page

• Bloc Logo : Téléchargez votre logo, ajustez sa taille et ajoutez un slogan rapide. Vous pouvez aussi activer les icônes sociales ou le nom de votre magasin.

• Bloc Liens : Affichez un menu de navigation depuis votre administration Shopify sous un titre personnalisé.

• Bloc Newsletter : Ajoutez une boîte d'inscription par email avec votre choix de titre, sous-titre et texte d'espace réservé.

La section Produit présente une mise en page à deux colonnes affichant les médias du produit à côté des détails clés et des options d'achat. Les paramètres principaux vous permettent d'ajuster la couleur d'arrière-plan, la largeur de la section, l'image fixe, le rayon des bordures et le zoom sur l'image, tandis que des blocs comme le Titre, le Prix, l'Inventaire, le Sélecteur de variante et les Boutons d'achat complètent la mise en page principale du produit.

Le bloc Onglet Détails organise les informations sur le produit dans une interface propre à onglets pour garder la page ordonnée et facile à parcourir. Vous pouvez définir des titres d'onglets personnalisés (par exemple, "Description de la carte" et "Aperçu de la carte") et saisir du texte enrichi pour chaque zone de contenu correspondante.

Astuce : Pour récupérer automatiquement la description réelle de votre produit depuis Shopify, cliquez sur l'icône Connecter la source dynamique (le symbole de base de données empilé à côté du label du champ) au-dessus de la zone de contenu et sélectionnez Description.

Le bloc Caractéristiques du produit affiche les attributs clés — comme la Rareté de la carte ou l'État — dans une liste propre d'étiquettes et de valeurs (supportant jusqu'à 6 paires de caractéristiques personnalisées).

Comment lier des détails personnalisés du produit

1. Créer le champ Détail (configuration unique)
   •Allez dans Paramètres > Données personnalisées > Produits dans Shopify.
   • Cliquez sur Ajouter une définition, nommez votre détail (comme "Rareté de la carte"), puis cliquez sur Enregistrer.
2. Ajouter des détails à un produit
   • Ouvrez la page de votre produit dans Shopify.
   • Faites défiler jusqu'à la section Metafields en bas, saisissez la valeur (comme "Rare"), puis enregistrez.
3. L'afficher sur votre boutique
   • Dans l'éditeur de thème, ouvrez votre bloc Caractéristiques du produit.
   • Tapez l'étiquette (par exemple, "Rareté de la carte") dans la zone Titre.
   • Dans la zone Texte, cliquez sur l'icône de base de données empilée dans le coin et sélectionnez le nom de votre détail pour le lier automatiquement !

Le bloc Texte avec icône affiche jusqu'à 3 pastilles de caractéristiques compactes côte à côte dans la section produit pour mettre en avant les points clés de vente (comme la livraison rapide, les garanties produit ou l'authenticité). Chaque bloc de texte vous permet de saisir un texte personnalisé accompagné de code SVG brut pour afficher votre choix d'icônes vectorielles.

Le bloc Bouton utilitaire ajoute des actions secondaires à votre page produit, permettant aux clients de sauvegarder des articles ou de partager des produits avec d'autres. Les paramètres vous permettent d'activer ou désactiver indépendamment les boutons Liste de souhaits et Partager et de personnaliser le texte du label du bouton pour chacun.

Typographie

Les paramètres de Typographie contrôlent les styles de police globaux sur l'ensemble de votre boutique. La sélection d'une police principale (comme Work Sans) établit une identité visuelle cohérente, appliquant automatiquement la police choisie aux titres, au texte principal, aux boutons et aux éléments de navigation sur tout le site.

Disposition

Les paramètres de Disposition définissent les dimensions structurelles et l'espacement de votre vitrine en contrôlant la Largeur de la page (largeur maximale du conteneur pour le contenu principal) et la Marge de la page (espacement latéral extérieur pour éviter que le contenu touche les bords de l'écran sur les petits écrans).

Couleurs

Les paramètres de Couleurs établissent la palette de couleurs globale de votre boutique pour une cohérence complète de la marque sur chaque page :

• Arrière-plan & Premier plan : Définit la couleur principale de fond de la page et le style d'accentuation par défaut.
• Primaire & Secondaire : Définit les couleurs de police des titres principaux (Primaire) et du texte principal (Secondaire).
• Bordure & Accent : Contrôle les séparateurs de ligne, les bordures des conteneurs et les accents structurels.
• Contrôles des boutons : Personnalise les couleurs de fond, de texte et de bordure des boutons.
• Lien & Survol : Définit les couleurs par défaut des hyperliens et leurs états interactifs au survol.

Réseaux sociaux

Les paramètres de Réseaux sociaux vous permettent d'ajouter des liens vers les comptes de médias sociaux de votre marque. Il suffit de coller les URL de vos profils dans les champs correspondants, et les icônes sociales correspondantes apparaîtront automatiquement dans votre pied de page.

Les paramètres du logo vous permettent de télécharger le logo principal de votre boutique, de contrôler sa taille d'affichage en pixels et de définir une icône favicon pour représenter votre site dans les onglets du navigateur.

Les paramètres des Récompenses du panier vous permettent d'inciter à des commandes plus importantes en configurant jusqu'à trois objectifs de dépenses par paliers. Définissez des montants spécifiques de panier et des étiquettes personnalisées pour chaque palier afin d'afficher une barre de progression dynamique directement dans le tiroir du panier, encourageant les clients à ajouter plus d'articles pour débloquer des réductions ou des avantages.