Section Carrousel de produits

Ce que vous apprendrez

  • Comment afficher des produits dans une disposition déroulante horizontale

  • Comment personnaliser les étiquettes 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

🧩 Aperçu de la section

La section Carrousel de Produits affiche une rangée déroulante de produits mis en avant. Elle est idéale pour promouvoir une collection spécifique ou mettre en valeur les meilleures ventes. Les produits peuvent inclure le prix, des étiquettes (comme « Promotion » ou « Épuisé ») et des paramètres de mise en page personnalisés.

Comment ajouter la section

  1. Dans le Éditeur de thème Shopify, cliquez Ajouter une section

  2. Choisissez Carrousel de produits

  3. 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 les options suivantes :

    • Afficher les titres des produits

    • Afficher les prix des produits

    • Afficher le prix de comparaison

    • Afficher le badge Épuisé

    • Afficher le badge Promotion

    • Afficher le badge Précommande

💡 Astuce : Activez les badges pour mettre en évidence les réductions 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 l'ordinateur et le mobile :

    • En-tête de section

    • Titre du produit

    • Prix du produit

  • Optionnel : Basculer 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 et du lien de la section

  • 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

  • Rupture de stock

  • En promotion

  • Prix de comparaison

Chaque badge possède à 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 la lisibilité.

Paramètres d'espacement

Vous pouvez ajuster l'espacement pour un meilleur équilibre visuel sur différentes tailles d'écran.

Ordinateur

  • 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 infos

  • 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 :

  • S'il est défini sur « Collection d'été », cliquer sur un produit maintient les clients dans cette même collection.

Si cela n'est pas défini, cliquer sur un produit amène l'utilisateur à la page standard du produit sans contexte de collection.

Une fois les comptes hérités activés, utilisez les pages de documentation de cette section pour styliser chaque partie de l'expérience client.

PrécédentSection préchargeurSuivantSection bloc de texte

Mis à jour