Réussi
Paramètres des cartes produit
Définissez les valeurs par défaut globales pour la disposition des cartes produit, les médias, les actions et les nuances de couleur dans l’ensemble de votre thème.
Ces paramètres définissent l’apparence et le comportement par défaut des cartes produit dans l’ensemble de votre thème. Utilisez-les pour créer une expérience de navigation cohérente pour les grilles de produits, les listes et les autres affichages de produits basés sur des cartes, puis remplacez-les uniquement lorsqu’un modèle spécifique nécessite une approche différente. Pour un aperçu plus large de la configuration au niveau du thème, consultez documentation Shopify sur la personnalisation des thèmes
Mise en page globale de la carte
Section intitulée « Mise en page globale de la carte »Commencez ici pour définir la structure générale de vos cartes produit. Le style de carte, le ratio de l’image, l’affichage du texte, l’alignement et le traitement du bouton agissent ensemble pour déterminer à quel point vos listes de produits paraissent visuelles, compactes ou riches en informations.
Utilisez des ratios d’image distincts pour ordinateur et mobile afin de garder des cartes équilibrées sur différentes tailles d’écran. Un ratio cohérent est particulièrement utile lorsque la photographie des produits varie, car il rend les grilles plus nettes et plus faciles à parcourir.
Les paramètres de texte contrôlent la quantité de contexte affichée avant qu’un client ouvre le produit. Afficher à la fois le titre et l’extrait peut favoriser la découverte, tandis que les mises en page avec le titre uniquement fonctionnent généralement mieux pour les grilles plus denses ou les catalogues très visuels.
Les cartes de style bannière affichent toujours une seule image, donc les paramètres du diaporama ne s’appliquent pas. L’alignement vertical du texte au milieu ne fonctionne aussi qu’avec le style bannière.
Détails du produit et actions
Section intitulée « Détails du produit et actions »Ces contrôles déterminent quels détails clés du produit apparaissent sur les cartes, y compris le prix, le vendeur, les badges, les actions de ajout rapide et les sélecteurs de variantes. Utilisez-les pour décider quelle partie de l’achat peut se faire directement depuis la carte plutôt que sur la page produit.
L’ajout rapide est particulièrement utile lorsque les clients peuvent acheter en toute confiance depuis la grille. Si la sélection de variante est activée et que le produit est disponible, la carte peut prendre en charge un flux d’ajout au panier plus direct ; sinon, l’action peut plutôt conduire les clients vers la page produit complète.
Les badges de collection peuvent mettre en avant des produits sélectionnés à l’aide d’étiquettes de merchandising légères. Cela fonctionne bien pour les promotions, les sélections curatées ou les groupes de produits que vous souhaitez faire remarquer rapidement aux clients.
Paramètres de survol
Section intitulée « Paramètres de survol »Les médias au survol permettent aux cartes produit d’afficher un élément alternatif lorsque les clients passent dessus sur ordinateur. C’est utile pour montrer un deuxième angle, une vue détaillée ou un autre visuel d’appui sans ajouter plus de texte à la carte.
Vous pouvez choisir automatiquement une position de galerie ou indiquer un metafield lorsque vous souhaitez un contrôle plus précis sur le média de survol de chaque produit. Une configuration basée sur un metafield est particulièrement utile lorsque l’image de survol idéale ne se trouve pas systématiquement à la même position dans votre catalogue.
Les médias au survol ne fonctionnent pas lorsque le style d’image de la carte produit est défini sur diaporama.
Paramètres du diaporama
Section intitulée « Paramètres du diaporama »Si vous utilisez des cartes produit de style diaporama, ce sous-groupe contrôle le comportement de ces galeries sur ordinateur et sur mobile. Vous pouvez ajuster le nombre de diapositives visibles, le style d’animation, la vitesse, la lecture automatique, la boucle, ainsi que la navigation ou la pagination sur la carte.
Les diaporamas fonctionnent mieux lorsque plusieurs images de produit aident les clients à comparer ou à évaluer les articles depuis la grille. Pour les catalogues plus simples, une configuration avec une seule image est généralement plus facile à parcourir et concentre davantage l’attention sur la liste de produits dans son ensemble.
L’animation en fondu crée une présentation plus simple, mais elle impose aussi une mise en page à une seule diapositive et n’affiche pas la pagination. Si le nombre de diapositives et les retours de navigation sont importants, choisissez un style d’animation autre que le fondu.
Paramètres des nuances de couleur
Section intitulée « Paramètres des nuances de couleur »Les nuances de couleur permettent aux clients de prévisualiser les choix de variantes directement sur la carte produit. Elles sont plus efficaces lorsque la couleur est un critère de navigation principal et que le nommage de vos options est cohérent d’un produit à l’autre.
Saisissez les noms d’options, et non les valeurs d’options, pour les options de variante qui doivent afficher des nuances. Si le nommage est incohérent, les nuances peuvent n’apparaître que sur certains produits ou pas du tout.
Les définitions de couleurs personnalisées sont utiles lorsque vos noms de couleurs vont au-delà des couleurs nommées standard ou lorsque vous souhaitez un contrôle plus précis sur l’apparence des nuances.
Paramètres des nuances d’image
Section intitulée « Paramètres des nuances d’image »Les nuances d’image remplacent les pastilles de couleur unies par des miniatures liées aux variantes. C’est un excellent choix lorsque la différence entre les variantes est mieux montrée par le motif, la texture, la finition ou une petite image du produit.
Chaque option de variante concernée a besoin d’une image associée pour s’afficher correctement. Si certaines variantes n’ont pas d’image, ces nuances peuvent sembler incomplètes.
Lorsque des nuances d’image et de couleur sont toutes deux configurées pour le même schéma de nommage d’options, les nuances d’image sont prioritaires. Dans la plupart des cas, il est préférable de choisir une seule méthode principale de nuances pour chaque type de variante.
Paramètres de bordure des nuances
Section intitulée « Paramètres de bordure des nuances »Les contrôles de bordure des nuances permettent aux nuances de couleur et d’image de rester visibles sur différents arrière-plans et visuels. Ils sont particulièrement utiles pour les nuances claires, les conceptions de cartes à faible contraste ou les thèmes au style d’interface subtil.
Si vous laissez les couleurs de bordure vides, le thème utilise à la place les couleurs de bordure du bouton principal. La variante active conserve toujours un état de sélection visible, afin que les clients puissent encore voir quelle option est actuellement choisie.
Notes d’utilisation
Section intitulée « Notes d’utilisation »- Définissez les valeurs par défaut avant de faire des exceptions. Construisez d’abord ici un style global solide pour les cartes produit, puis utilisez les remplacements au niveau du modèle uniquement lorsqu’une mise en page spécifique a réellement besoin d’un comportement différent. Pour des indications sur l’organisation des zones du thème, consultez documentation Shopify sur les sections et les blocs
- Choisissez un seul modèle média. Utilisez des images uniques pour une consultation rapide, des médias au survol pour un second aperçu rapide, ou des diaporamas lorsque plusieurs images au niveau de la carte améliorent clairement la navigation.
- Vérifiez les deux points de rupture. Les cartes sur ordinateur et sur mobile peuvent se comporter différemment, alors vérifiez les ratios d’image, l’alignement, la navigation et la visibilité des médias sur les deux tailles d’écran avant de publier.
- Gardez un style de repli clair. Les valeurs vides ou de style par défaut conservent généralement l’apparence intégrée du thème, tandis que des couleurs explicites, des dégradés ou des remplacements de média rendent une zone de carte produit plus autonome.
- Surveillez les interactions entre fonctionnalités. Les cartes bannière n’utilisent pas de diaporamas, les cartes de diaporama ne prennent pas en charge les médias au survol, et les nuances d’image remplacent les nuances de couleur lorsque les deux ciblent la même option.