Section Carrousel de produits

Ce que vous apprendrez

  • Comment afficher les produits dans une mise en page défilante horizontalement

  • Comment personnaliser les étiquettes, les prix et les badges des produits

  • 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éfilante de produits en vedette. Elle est idéale pour promouvoir une collection spécifique ou mettre en avant 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époser la section à l'endroit où vous la souhaitez 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 « Promotion »

    • Afficher le badge « Précommande »

💡 Astuce : Activez les badges pour mettre en avant les remises ou l'état des stocks.

  • Produits par ligne – Ordinateur: Choisissez le nombre 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 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

  • Rupture de stock

  • En promotion

  • Prix comparatif

Chaque badge possède à la fois :

  • Couleur du texte

  • Couleur d'arrière-plan

⚠️ Assurez-vous que les couleurs du texte et du fond contrastent clairement pour la lisibilité.

Paramètres d'espacement

Vous pouvez ajuster l'espacement pour un meilleur équilibre visuel selon les 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 informations

  • Espace entre le titre du produit et le prix

  • Ecart entre les produits (ordinateur et mobile)

Contexte de navigation

Utilisez la Contexte de navigation paramètre pour définir dans quelle collection les clients restent lorsqu'ils cliquent sur un produit.

Par exemple :

  • Si défini sur « Collection d'été », cliquer sur n'importe quel produit permet aux clients de rester dans cette même collection.

Si cela n'est pas défini, cliquer sur un produit amène les utilisateurs à la page standard du produit sans le contexte de la 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 en-tête produit

Mis à jour