Dans cet article, vous découvrirez un autre élément Shopify appelé Product List.
À propos de l’élément Product List
Product List est conçu pour présenter une liste de produits sur votre page afin d’augmenter votre taux de conversion. Vous pouvez utiliser l’élément Product List pour effectuer des ventes incitatives et croisées de vos produits. Imaginez que vous vendez un produit et que vous souhaitez vendre des produits supplémentaires dans la même collection. Cet élément renforcera vos ventes.
Vous pouvez vérifier plus de détails dans le didacticiel vidéo ci-dessous.
Accès à l’élément Product List
Étape 1 : Cliquez sur la 2ème icône dans le catalogue d’éléments qui est la fonction Ajouter un élément Shopify
Étape 2 : Cliquez sur l’élément Product List dans le menu déroulant
Étape 3 : Faites glisser et déposez l’élément dans l’éditeur de page, puis commencez à l’utiliser.
Notez que vous pouvez rechercher cet élément en utilisant la fonction de recherche au lieu de le trouver dans la barre latérale.
Dans la version 3.4.0, nous avons construit la fonction Loading et apporté une meilleure conception de l’état de chargement.
Configuration des éléments de la Product List
L’élément Product List est fourni avec de nombreux paramètres vous permettant d’affiner l’apparence du contenu pour obtenir le meilleur taux de conversion possible.
Sélectionnez l’élément dans la mise en page pour voir ses paramètres.
Paramétrage général
CONTENU | |
Source du produit : vous pouvez choisir l’une des trois options ci-dessous :
| ![]() |
Articles par chargement : ajustez le nombre d’articles affichés dans un chargement. Notez que vous ne pouvez afficher qu’un maximum de 20 produits. Ceci est limité par Shopify. | ![]() |
Articles par ligne : ajustez le nombre d’éléments dans une ligne. | ![]() |
Espacement des éléments : ajustez l’espace entre les éléments. | ![]() |
Mode de chargement :
| ![]() |
Exclure le produit actuel Cette option permet d’exclure le produit actuellement affiché sur la page du produit. Notez que cette fonctionnalité ne fonctionne que sur la page de produit. | ![]() |
Vous pouvez obtenir plus d’informations sur les paramètres ATTRIBUTS, VISIBILITY, ANIMATION ici
Configuration du style
GLOBALEMENT
Couleur du contenu :
- La couleur que vous choisissez sera appliquée pour d’autres éléments tels que le titre du produit et le prix du produit.
- Pour sélectionner la couleur spécifique de ces éléments, cliquez sur les éléments, puis sur la couleur personnalisée dans l’onglet Style.
Vous pouvez obtenir plus d’informations sur les paramètres ESPACEMENT, TYPOGRAPHIE, ARRIÈRE-PLAN, BORDURE, AFFICHAGE, CSS PERSONNALISÉ ici
Sensibilité de l’appareil
L’élément Product List a été créé pour bien s’afficher sur tous les appareils, y compris les ordinateurs portables, les tablettes et les mobiles. Vous pouvez voir comment il s’affiche en accédant au sélecteur d’appareils dans le menu supérieur > sélectionner les appareils que vous souhaitez voir. Voyons un exemple ci-dessous
Vous pouvez voir que lorsque vous passez aux ordinateurs portables et aux tablettes, les éléments par ligne sont tous 4 par défaut, mais sur l’appareil mobile, les éléments par ligne sont automatiquement définis pour 2 éléments. Et cette automatisation rend la vue mobile plus claire. Vous pouvez modifier le nombre d’éléments par ligne et d’éléments par chargement pour chaque appareil souhaité.
Note importante:
Pour modifier l’ordre des produits dans une liste de produits, vous pouvez voir cette vidéo ci-dessous