Élément de la liste de produits

À propos de l'élément de liste de produits

L' Liste des produits joue un rôle crucial en présentant une gamme de produits. Son objectif est d'augmenter efficacement la valeur des ventes en permettant la vente incitative et la vente croisée à vos clients. Contrairement à sa version précédente, l'élément Liste de produits V7 offre la possibilité de choisir de manière sélective des produits spécifiques à afficher, améliorant ainsi la flexibilité de la conception des pages Web.

Comment ajouter un élément de liste de produits à votre page ?

Pour commencer à utiliser l’élément Liste de produits dans GemPages, suivez ces étapes :

Étape 1 : Connectez-vous à votre Administrateur Shopify et accès Tableau de bord GemPages > Pages.

Étape 2 : Localisez la page cible pour ouvrir l'éditeur.

Étape 3 : Depuis la barre latérale gauche, faites glisser et déposez le Liste des produits élément sous le Produit section dans votre section préférée sur la page.

Étape 4 : Cliquez sur l'élément pour accéder à ses options de configuration, qui incluent Paramètres Avancé onglets.

Configurer l'onglet Paramètres

Mise En Page

Vous avez le choix entre deux options pour présenter votre liste de produits :

• La grille: La liste des produits sera présentée dans le style par défaut.
• Slider: Les images du produit seront affichées dans un carrousel.

Origine du produit

Vous pouvez choisir la manière dont les produits seront affichés en sélectionnant l'une des options suivantes :

• Produits Sélectionnez manuellement les produits spécifiques à présenter.
• Collection: Si vous souhaitez présenter les produits d'une collection particulière, sélectionnez cette option. Assurez-vous d'avoir préalablement configuré les collections dans votre interface administrateur Shopify, car l'élément y récupérera les informations.

• Articles connexes: Affichez automatiquement les produits associés au produit actuel, en fonction de la même collection, du même fournisseur ou de la même balise.

Écran

Utilisez le curseur ou entrez un nombre exact pour choisir le nombre de produits qui doivent apparaître sur une seule ligne.

Espacement des éléments

Ajuste le espacement entre vos éléments dans la liste des produits.

Navigation

Dans cette section, vous pouvez configurer le Navigation paramètres de la liste de produits du curseur, notamment :

• Poste: Choisissez d'afficher la flèche à l'intérieur ou à l'extérieur de la liste.
• Icône: Sélectionnez votre icône préférée dans la liste disponible ou vous pouvez télécharger un nouveau fichier SVG.
• Taille de l'icône: Ajustez la taille de l'icône.
• Taille du bouton : Modifier la taille du bouton de l'icône.
• Mise en contexte: Définissez la couleur d'arrière-plan du bouton icône.
• Frontière: Ajoutez une bordure autour du bouton et personnalisez sa largeur et sa couleur.
• Coin: Définissez le rayon du coin pour contrôler l'arrondi des bords du bouton.
• Ombre: Activer et personnaliser l'ombre portée du bouton.
• Écart par rapport au bord : Espace entre la flèche et le bord du curseur
• Afficher au survol : Afficher les flèches uniquement lorsque vous survolez la liste des produits.

Cercles

Basculez la visibilité des points sous le curseur pour configurer le Cercles paramètres pour afficher les indicateurs de pagination sous votre curseur, notamment :

• Poste: Choisissez l'emplacement des points.
• Couleur active: Définissez la couleur du point actuellement actif (en surbrillance).
• Couleur inactive: Définissez la couleur des points inactifs (non sélectionnés).
• Taille du point: Ajustez la taille de chaque point (en pixels).
• Écart au bord:Contrôlez la distance entre les points et le bord du conteneur.

Effet de diapositive

En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Effet de diapositive section, vous pouvez configurer :

• Autoplay:Faites défiler automatiquement les produits sans interaction de l'utilisateur.
• Sens de glissement: Choisissez la direction dans laquelle le curseur se déplace : gauche ou droite.
• Boucle infinie: Activez la boucle continue afin que le curseur revienne au début après avoir atteint le dernier produit.
  
• Glisser/balayer : Autoriser les utilisateurs à faire glisser manuellement (bureau) ou à faire glisser (mobile) le curseur.
• Vitesse de glissement: Définissez la durée de la transition des diapositives (par exemple, 500 ms).
• Animation: Sélectionnez le type d'accélération de l'animation pour des transitions de diapositives plus fluides (par exemple, accélération en entrée, accélération en sortie, linéaire).

Taille

Dans cette section, vous pouvez définir la taille du conteneur de la liste de produits, notamment :

Largeur: Saisissez une valeur de largeur fixe (en pixels) ou activez Pleine largeur pour que l'élément s'étende sur toute la largeur de la page.

Hauteur: Choisir entre

• Voiture:La hauteur s'ajustera en fonction du contenu.
• Encadrement Sur Mesure: Saisissez une valeur de hauteur spécifique pour définir une hauteur fixe.

Rembourrage: Définissez l'espacement à l'intérieur des bordures de l'élément pour créer un espace de respiration pour le contenu.

Présentation

Cette section vous permet de personnaliser le style d'arrière-plan de l'élément Liste de produits :

• Couleur: Utilisez le sélecteur de couleurs pour appliquer une couleur d'arrière-plan. Vous pouvez choisir parmi les préréglages, saisir un code hexadécimal ou sélectionner une couleur récente.
• Image(s)Téléchargez une image à utiliser comme arrière-plan. Il peut s'agir d'un motif, d'une texture ou d'un visuel promotionnel, selon votre design.

Forme

Dans cette section, vous pouvez façonner les coins du conteneur Liste de produits :

Rayon d'angle: Ajustez la rondeur de chaque coin (en haut à gauche, en haut à droite, en bas à gauche et en bas à droite) individuellement.

• 0px = angle aigu
• 50px+ = coin entièrement arrondi

Utilisez les boutons de disposition prédéfinis pour appliquer rapidement des valeurs cohérentes dans tous les coins ou réinitialiser les valeurs par défaut.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, veuillez accéder au Avancé onglet et suivez les instructions dans cet article.

Questions fréquentes

1. Puis-je afficher différents produits sur différentes pages ?

Oui. Vous pouvez sélectionner manuellement des produits ou des collections spécifiques par page grâce aux options « Plusieurs produits » ou « Une collection » dans les paramètres de la liste de produits.

2. Comment afficher la liste des produits en 2 colonnes sur mobile ?

Cliquez sur l’icône de l’appareil à côté du curseur « Produits par ligne » > passez à la vue Mobile, puis définissez le nombre sur 2.

3. Pourquoi ma liste de produits est-elle vide ou sans produits ?

Cela peut arriver si :

• La collection Shopify liée est vide ou non publiée.
• Les produits sélectionnés sont en rupture de stock et masqués de la vitrine.
• Vous prévisualisez une page spécifique à un produit en utilisant le mauvais identifiant de produit.
• Vérifiez vos paramètres Shopify et prévisualisez le contexte.

4. Puis-je filtrer les produits à l'intérieur de l'élément Liste de produits ?

Non. L'élément Liste de produits ne prend pas en charge le filtrage en direct ni les filtres intelligents. Si vous utilisez la fonction Filtre et recherche de produits intelligents, la liste de produits sera remplacée par son propre résultat.

5. Est-il possible de styliser les fiches produits à l'intérieur de la liste ?

Oui. Vous pouvez personnaliser les titres, les prix, les boutons, l'espacement et la mise en page des produits à l'aide de l'outil Avancé onglet et paramètres de bloc individuels dans la liste des produits.

6. Puis-je utiliser le même élément de liste de produits sur plusieurs pages ?

Chaque élément de la liste de produits est unique à sa page. Cependant, vous pouvez dupliquer une page ou l'enregistrer comme modèle pour réutiliser la configuration sur d'autres pages.

7. Puis-je utiliser la liste de produits GemPages avec le filtre et la recherche de produits intelligents ?

Non. L'application Smart Product Filter & Search génère sa propre liste de produits et sa propre structure de filtre. Elle n'est donc pas compatible avec l'élément Liste de produits de GemPages.

8. Pourquoi ma liste de produits n'apparaît-elle pas sur la page d'accueil ?

• Assurez-vous que La page d'accueil de GemPages est définie comme page par défaut.Sinon, Shopify continuera d'afficher la page d'accueil du thème.
• Assurez-vous que la page d'accueil est publié, pas seulement sauvé.
• Si vous utilisez Collection en tant que source du produit :
  • La collection est publiée sur Shopify.
  • La collection contient des produits visibles sur la boutique en ligne.
• Si vous utilisez Produits en tant que source du produit :
  • Au moins un produit est sélectionné dans les paramètres de la liste des produits.

9. Puis-je modifier l'ordre des produits dans l'élément Liste des produits ?

Oui, si vous sélectionnez Produits (Préparation manuelle), vous pouvez organiser l'ordre des produits comme vous le souhaitez ; cependant, si vous utilisez Collection En tant que source, l'ordre suit le tri par défaut de la collection.