Section carrousel de produits
Ce que vous apprendrez
Comment afficher les produits dans une mise en page défilable horizontalement
Comment personnaliser les étiquettes de produit, les prix et les badges
Comment ajuster l'espacement des produits, la typographie et les couleurs
Comment définir les préférences de mise en page pour ordinateur et mobile
🧩 Présentation de la section
La section Carrousel de Produits affiche une rangée défilable de produits mis en avant. Elle est idéale pour promouvoir une collection spécifique ou mettre en avant les meilleures ventes. Les produits peuvent inclure les prix, des étiquettes (comme « En promotion » ou « Épuisé ») et des paramètres de mise en page personnalisés.
Comment ajouter la section
Dans le éditeur de thème Shopify, cliquez Ajouter une section
Choisissez Carrousel de produits
Faites glisser et déposez la section à l'endroit souhaité sur la page
Paramètres de contenu et de données
Titre de la section: Ajoutez un titre pour le carrousel (par ex., « Produits en vedette »)
Texte du lien Boutique: Ajoutez un bouton d'appel à l'action (par ex., « Voir tout »)
URL du lien Boutique: Collez un lien de collection ou de page
Options de mise en page et d’affichage
Alignement du texte du produit: Alignez les titres à gauche, au centre ou à droite
Activez/Désactivez les options suivantes :
Afficher les titres des produits
Afficher les prix des produits
Afficher le prix comparatif
Afficher le badge « Épuisé »
Afficher le badge « En promotion »
Afficher le badge « Précommande »
💡 Astuce : Activez les badges pour mettre en évidence les remises ou l'état des stocks.
Produits par ligne – Ordinateur: Choisissez combien de produits afficher (1–6)
Produits par ligne – Mobile: Choisissez entre 1–3 produits
Contrôles de typographie
Ajustez les tailles de police indépendamment pour le bureau et le mobile :
En-tête de section
Titre du produit
Prix produit
Optionnel : Activer/Désactiver Gras styles pour :
Titre de la section
Lien Voir
Titre du produit
Personnalisation des couleurs
Couleur d'arrière-plan: Transparent, uni ou couleur de la marque
Couleur du titre de section et du lien
Couleur des flèches (flèches de navigation)
Couleur du titre du produit
Couleur du prix du produit
Couleurs des étiquettes pour chaque badge :
Précommande
En rupture
En promotion
Prix comparatif
Chaque badge comporte à la fois :
Couleur du texte
Couleur d'arrière-plan
⚠️ Assurez-vous que les couleurs du texte et de l'arrière-plan contrastent clairement pour garantir la lisibilité.
Paramètres d'espacement
Vous pouvez ajuster l'espacement pour un meilleur équilibre visuel selon les tailles d'écran.
Bureau
Espacement supérieur : 20px
Espacement inférieur : 20px
Mobile
Espacement supérieur : 16px
Espacement inférieur : 16px
Contrôles supplémentaires :
Espace entre l'en-tête de section et les produits
Espace entre l'image du produit et les informations
Espace entre le titre du produit et le prix
Écart entre les produits (ordinateur et mobile)
Contexte de navigation
Utilisez la Contexte de navigation paramètre définissant dans quelle collection les clients restent lorsqu'ils cliquent sur un produit.
Par exemple :
Si défini sur « Collection d'été », cliquer sur un produit permet aux clients de continuer à naviguer au sein de cette même collection.
Si cela n'est pas défini, cliquer sur un produit conduit l'utilisateur vers la page standard du produit sans contexte de collection.
Besoin d’aide ?
💬 Rejoignez notre communauté sur Discord : https://discord.gg/hcc2GvgZc6
📧 Envoyez-nous un e-mail à : [email protected]
💻 Discutez en direct avec nous : Disponible du lundi au vendredi, de 10h à 18h EST, directement sur notre site web
Mis à jour