Éléments Shopify – Liste de produits

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 ListClick to copy

É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.

product list element

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.

product list element

Paramétrage général

CONTENU
Source du produit : vous pouvez choisir l’une des trois options ci-dessous :
  • Tout : affichez tous les produits des magasins.
  • Collection personnalisée : choisissez une collection que vous souhaitez afficher.
  • Produit(s) associé(s) : choisissez un produit personnalisé que vous souhaitez, puis les produits associés qui sont dans la même collection comme le produit personnalisé que vous avez choisi auparavant seront affichés.
product list element product list element
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.

product list element
Articles par ligne : ajustez le nombre d’éléments dans une ligne.product list element
Espacement des éléments : ajustez l’espace entre les éléments.product list element
Mode de chargement :
  • Aucun : cette option est choisie par défaut.
  • Pagination : cette option sera affichée sous forme de numéros de page. Cette fonctionnalité ne fonctionne que sur la page en direct.
  • Charger plus : cette option sera affichée sous la forme d’un bouton “Charger plus”. Cette fonctionnalité ne fonctionne que sur la page en direct.
product list element
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.

product list element

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.

product list element

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

product list element

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

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Discover the Shopify Invoice Generator by PageFly, a seamless solution for invoicing in your online store. Try it now!