Aller au contenu

Paramètres de carte produit

Ajustez le style, les images, le texte, les boutons et les échantillons des cartes produit pour obtenir des grilles de produits plus épurées.

Utilisez ces paramètres pour peaufiner l’apparence des cartes produit partout où ce modèle de carte partagé est utilisé. Vous pouvez conserver l’alignement des cartes avec les paramètres par défaut plus larges de votre thème ou les remplacer lorsqu’une fiche produit spécifique nécessite une présentation différente. Pour plus de contexte sur la manière dont ces paramètres s’intègrent dans l’éditeur de thème, consultez documentation Shopify sur l’éditeur de thème

Ce groupe contrôle l’apparence générale et la densité d’informations des cartes produit. Il est particulièrement utile lorsque vous souhaitez ajuster l’aspect visuel, la compacité ou l’orientation vers l’action des fiches produit sans modifier globalement chaque paramètre lié aux cartes. Pour plus d’informations sur la relation entre ces contrôles et les composants du thème, consultez documentation Shopify sur les sections et les blocs

La page de référence des paramètres de carte inclut des indications supplémentaires sur la façon dont ces remplacements se rapportent au comportement plus large du thème : cartes produit

Le style de carte modifie la structure et l’espacement de chaque carte produit. Utilisez-le pour rendre les cartes plus éditoriales, plus compactes ou davantage orientées utilité, selon la collection et la qualité de vos images produit.

Les styles plus structurés ou avec plus d’espacement conviennent généralement mieux lorsque les photos produit varient dans leur cadrage ou leur arrière-plan. Les styles plus serrés peuvent faire tenir davantage de produits sur une ligne, mais ils rendent aussi les incohérences plus visibles.

Si vos images produit sont rognées de manière incohérente, choisissez un style avec davantage de structure visuelle ou d’espacement pour conserver des grilles de produits intentionnelles.

Vous pouvez choisir des rapports d’image distincts pour ordinateur et mobile, ce qui est utile lorsqu’un seul recadrage ne fonctionne pas bien sur les deux tailles d’écran. Les rapports fixes créent généralement une grille plus nette et plus cohérente, en particulier lorsque votre catalogue mélange des formats d’image différents.

Les rapports plus larges peuvent donner une impression plus éditoriale, tandis que les rapports carrés ou portrait facilitent souvent la lecture rapide des fiches produit. Si vos photos sont déjà préparées avec soin, utiliser le rapport par défaut ou au niveau du thème peut mieux préserver le cadrage prévu.

Ce paramètre contrôle la visibilité de l’action sur la carte produit. Masquez-la pour une expérience de navigation plus épurée, ou utilisez un style textuel lorsque les clients ont besoin d’un repère d’action plus clair.

Les styles de bouton compacts aident à garder les grilles denses bien ordonnées. Sur mobile, l’action utilise un style uniquement sous forme d’icône ; veillez donc à ce que la carte reste claire et utilisable lorsque le libellé n’est plus affiché.

Le texte de carte contrôle la quantité d’informations écrites sur le produit affichées sur chaque carte. Davantage de texte peut aider à expliquer rapidement un produit, tandis que moins de texte crée une mise en page plus épurée et davantage axée sur l’image.

L’affichage du titre et de l’extrait fonctionne mieux lorsque le texte d’accompagnement est court et cohérent. Si les extraits varient en ton ou en longueur, les cartes avec le titre seul sont généralement plus faciles à parcourir.

L’alignement du texte influe à la fois sur la lisibilité et sur l’ambiance visuelle. L’alignement à gauche est généralement le choix le plus clair pour les grilles de produits, tandis qu’un texte centré peut donner une impression plus promotionnelle ou plus orientée design.

L’alignement vertical est surtout important dans les mises en page où le texte se trouve dans une carte plus stylisée. La position centrale s’applique uniquement au style de carte bannière ; elle est donc surtout utile pour les présentations de cartes produit basées sur une bannière.

Le sélecteur de variantes permet aux clients de prévisualiser ou de choisir des options directement depuis la carte produit à l’aide d’échantillons ou de pastilles. C’est particulièrement utile lorsque la couleur, le motif ou une variation basée sur l’image fait partie importante de la décision d’achat.

Si votre catalogue comporte des produits simples ou une présentation des variantes incohérente, masquer le sélecteur peut garder les cartes plus épurées. Lorsque vous activez des échantillons ou des pastilles, veillez à ce que les données de variantes soient configurées de manière cohérente afin d’offrir aux clients une expérience fiable.

Pour des indications de configuration, consultez variantes de produit

  1. Utilisez les remplacements avec parcimonie. Conservez les paramètres au niveau du thème, sauf si un contexte précis de carte produit nécessite un aspect ou un comportement différent.
  2. Choisissez des rapports pour assurer la cohérence. Les rapports d’image fixes aident à unifier des photos variées, tandis que les rapports par défaut préservent un cadrage plus naturel.
  3. Concevez d’abord pour mobile. Comme les actions des cartes produit deviennent des icônes uniquement sur mobile, appuyez-vous sur des images fortes et un texte clair pour garder les cartes compréhensibles.
  4. Gardez un texte pertinent. Affichez les extraits uniquement lorsqu’ils apportent un contexte utile sur le produit ; sinon, des cartes plus simples centrées sur le titre sont généralement plus faciles à parcourir.
  5. Activez les sélecteurs là où ils comptent. Utilisez des échantillons ou des pastilles pour les produits comportant des choix visuels significatifs, et vérifiez que votre configuration de variantes est cohérente avant un déploiement à grande échelle.
  6. Vérifiez attentivement les cartes de type carrousel sur les deux vues. Si vous choisissez une présentation de type curseur, contrôlez la navigation, la pagination et l’espacement sur ordinateur et mobile, car la disposition peut se comporter différemment d’une grille statique.
  7. Vérifiez soigneusement les choix de médias séparés. Lorsque l’ordinateur et le mobile utilisent des recadrages d’image différents, examinez les deux versions pour la lisibilité, le cadrage de secours et tout recadrage indésirable.