Produit

Liens en vedette

1. Documentation Shopify sur les sections et les blocs
2. Documentation Company XYZ sur les variantes de produit
3. Documentation Company XYZ sur les paramètres des cartes produit
4. Documentation Company XYZ sur les paramètres des cartes
5. Documentation Company XYZ sur les paramètres de visibilité

Vidéos utiles

Vidéo de Shopify Academy : personnaliser votre boutique

Vidéo de Shopify Academy : personnaliser votre boutique

Utilisez ce bloc pour afficher une seule carte de produit partout où vous souhaitez mettre en avant un élément spécifique. Il peut hériter du style de carte produit de votre thème ou le remplacer ici lorsque cette carte a besoin de sa propre mise en page ou d’un traitement visuel particulier. Pour une vue d’ensemble plus large du fonctionnement des blocs dans l’éditeur de thème, consultez la documentation Shopify sur les sections et les blocs

Sélection du produit

Choisissez le produit que ce bloc doit afficher. Le reste des paramètres du bloc définit l’apparence de ce produit. Ce bloc fonctionne donc mieux lorsque le produit sélectionné dispose déjà d’une image principale forte et d’un texte produit clair.

Paramètres standard de bloc

Paramètres de carte

Ces paramètres contrôlent la mise en page de la carte, le recadrage de l’image, la présentation du texte, le traitement du bouton et l’affichage des variantes. Laissez-les sur Utiliser le paramètre du thème lorsque vous souhaitez que ce bloc corresponde à vos autres cartes produit, ou remplacez-les lorsque ce produit a besoin d’une emphase différente.

Le style de carte est le choix visuel principal. Les styles de bannière conviennent aux emplacements promotionnels plus grands, tandis que les styles plus simples sont généralement plus faciles à intégrer dans des mises en page plus compactes ou des lignes de contenu mixtes.

Les ratios d’image pour ordinateur et mobile peuvent être définis séparément. Si la carte paraît équilibrée sur ordinateur mais que l’image est recadrée de manière peu harmonieuse sur les petits écrans, ajustez le ratio mobile au lieu de modifier le style global de la carte.

Le style du bouton change l’importance perçue de l’action d’achat. Sur mobile, un traitement avec icône seule est utilisé, donc l’image et le texte du produit doivent rendre la carte compréhensible sans dépendre d’un long libellé de bouton.

Les paramètres de texte vous permettent de simplifier la carte lorsque l’espace est limité. Les emplacements plus grands peuvent prendre en charge à la fois le titre et l’extrait, tandis que les emplacements plus petits fonctionnent souvent mieux avec un texte limité au titre.

L’alignement vertical du texte au centre fonctionne uniquement avec le style de carte Banner.

Les sélecteurs de variantes peuvent rendre la carte plus utile pour les produits comportant des options significatives, mais uniquement lorsque ces options sont clairement configurées et faciles à comprendre directement depuis la carte.

Note

Les sélecteurs de variantes nécessitent une configuration supplémentaire. Consultez le guide de configuration des variantes de produit.

Pour un comportement partagé plus large, consultez la référence des paramètres de carte produit.

Paramètres de couleur

Ces paramètres remplacent les couleurs de la carte pour ce bloc uniquement. Utilisez-les lorsque vous souhaitez qu’un produit mis en avant se démarque ou lorsque l’arrière-plan de la page environnante nécessite un traitement de carte différent pour un meilleur contraste.

Les paramètres de superposition de bannière s’appliquent uniquement au style de carte Banner. Ils sont utiles lorsque l’image produit est chargée et que vous devez améliorer la lisibilité du texte sans remplacer l’image.

Les couleurs d’arrière-plan, de bordure, de titre et de texte sont à ajuster de préférence ensemble. Cela donne généralement un résultat plus propre que de modifier une seule couleur isolément.

Astuce

Vérifiez les couleurs personnalisées sur ordinateur et sur mobile, surtout si la carte utilise des superpositions d’image ou un espace texte réduit.

Pour le comportement partagé des couleurs de carte, consultez la référence des paramètres de cartes.

Paramètres de visibilité

Utilisez les contrôles de visibilité pour afficher ce bloc partout ou le masquer sur ordinateur ou sur mobile. C’est utile lorsque vous souhaitez une version de carte produit mise en avant pour les grands écrans et une version plus simple ou recadrée différemment pour les petits écrans.

Pour en savoir plus sur le contrôle d’affichage, consultez la référence des paramètres de visibilité.

Paramètres de l’éditeur

Utilisez le titre de l’éditeur pour nommer clairement le bloc dans la barre latérale. C’est particulièrement utile lorsqu’une mise en page comprend plusieurs blocs produit et que vous souhaitez identifier rapidement chacun d’eux pendant la modification.

Notes d’utilisation

1. Choisissez un produit fort. Choisissez un produit avec une image principale claire et un texte d’accompagnement concis afin que la carte soit lisible en un coup d’œil.
   1. Utilisez un produit qui reste pertinent si l’image est recadrée plus serré sur les petits écrans.
   2. Gardez l’image principale du produit lisible si vous prévoyez de remplacer les couleurs de la carte ou d’ajouter une superposition.
2. Adaptez les remplacements à l’objectif. Laissez les paramètres de carte partagés en place lorsque vous souhaitez conserver la cohérence, et remplacez-les uniquement lorsque ce produit mis en avant a besoin d’un rôle visuel plus marqué.
   1. Des valeurs vides ou au style par défaut conservent généralement le style de secours.
   2. Des couleurs ou des choix de média explicites rendent cette carte plus indépendante du reste de la mise en page.
3. Vérifiez séparément sur mobile. Contrôlez le recadrage de l’image, la longueur du texte et la clarté du bouton sur les petits écrans avant de finaliser le bloc.
   1. Les contrôles mobiles peuvent modifier l’alignement, la visibilité et le comportement des médias par rapport à l’ordinateur.
   2. Si les médias desktop et mobile sont différents, vérifiez les deux vues pour confirmer que la carte reste bien lisible.
4. N’utilisez les variantes que si c’est utile. Affichez des pastilles ou des puces uniquement lorsqu’elles améliorent directement la sélection du produit depuis la carte.
5. Testez soigneusement le contraste. Lorsque vous remplacez les couleurs ou les superpositions, assurez-vous que le texte du produit reste facile à lire sur différentes images et différents appareils.