Personnaliser les cartes produit de votre boutique E-Commerce

Bordures, ombres, format d'image, effets au survol, marges et affichage du prix : réglez l'apparence de vos cartes produit.

Écrit par Baptiste Lorreyte

Dernière mise à jour Il y a environ 3 heures

La carte produit est souvent la première chose que vos visiteurs voient en parcourant votre boutique. Vous pouvez en régler l'apparence pour qu'elle corresponde à votre marque : bordures, ombres, format des images, effets au survol, marges intérieures, alignement des informations et affichage du prix.

Si vous n'avez pas encore de boutique, commencez par le guide [GUIDE] Créer une boutique E-Commerce avec CrocoClick.

Ouvrir les réglages des cartes produit

Ouvrez votre boutique dans le constructeur de boutique.
Sélectionnez un composant compatible : Product List, Produits phares ou Collection. Le nom Product List est encore en anglais à l'écran.
Dans l'onglet Général du composant, faites défiler jusqu'à Personnalisation de la carte de produit.

Réglages d'un composant Product List, onglet Général, avec la section Personnalisation de la carte de produit encadrée

🟢 Important : Vos cartes existantes conservent leur style actuel ou par défaut tant que vous ne modifiez pas ces réglages.

Les options disponibles

Option	Ce que vous réglez	Disponible sur
Bordure d'image	Épaisseur, arrondi, couleur et style de la bordure autour des images produit	Product List, Produits phares, Collection
Ombre d'image	Ombre intérieure ou extérieure, décalage, flou, étendue et couleur. Jusqu'à 5 ombres cumulées avec l'icône +	Product List, Produits phares, Collection
Rapport d'aspect de l'image	Square, Original ou Portrait (valeurs encore en anglais à l'écran)	Product List, Produits phares, Collection
Actions au survol	Afficher la deuxième image au survol, ou Agrandir l'image au survol	Product List et Produits phares, sur ordinateur uniquement
Marge interne	Espace intérieur de chaque carte, réglé séparément pour ordinateur, tablette et mobile	Product List uniquement
Informations sur le produit	Alignement à gauche, au centre ou à droite du nom, du prix et des autres informations, et réglages d'affichage du prix	Product List, Produits phares, Collection

Section Rapport d'aspect de l'image et actions au survol ouverte dans Personnalisation de la carte de produit

💡 ASTUCE : L'option Afficher la deuxième image au survol n'a d'intérêt que si le produit possède au moins deux images. Pour une boutique de vêtements, montrez par exemple le produit porté en deuxième image.

Cela a-t-il été utile ?

Besoin d'aide supplémentaire ? Demander à l'équipe