Voir le produit Plus d'éléments

Qu'est-ce que l'élément Afficher plus de produits ?

L' Voir plus d'éléments du produit dans GemPages se trouve un bouton dynamique qui redirige les visiteurs vers une page de détails du produit.

Il est généralement utilisé dans un Liste des produits or Collection section où plusieurs produits sont affichés avec uniquement des informations de base telles que des images et des titres.

En ajoutant un bouton « Voir plus de produits », vous offrez aux acheteurs un moyen clair de visualiser tous les détails d'un produit, encourageant une exploration plus approfondie et augmentant la probabilité d'un achat.

Imaginez par exemple une grille de produits présentant des produits. Chaque fiche produit pourrait n'afficher que l'image, le titre et le prix. En ajoutant le bouton « Voir plus » au produit, les clients peuvent cliquer pour accéder directement à la page détaillée complète du produit.

Comment ajouter l'élément Voir plus de produits à votre page ?

Suivez les étapes ci-dessous pour l'ajouter à votre page :

Étape 1 : Utilisez la barre de recherche pour trouver cet élément, puis faites-le glisser et déposez-le à la position souhaitée.

Par exemple, si vous créez une page de collection, vous pouvez déposer le bouton sous chaque fiche produit de votre Liste des produits.

Étape 2 : Une fois ajouté, cliquez sur le bouton Afficher plus de produits pour ouvrir son Panneau des paramètres Dans la barre latérale gauche, vous verrez deux onglets : Paramètres Avancé.

Configurer l'onglet Paramètres

1. Source du produit

Affiche le produit à partir duquel l'élément affiche les informations.

Le bouton extraira automatiquement les données du produit de votre Administrateur ShopifyAssurez-vous que les informations nécessaires sur le produit (titre, description, prix, etc.) sont déjà configurées dans votre boutique Shopify.

2. Taille

Vous pouvez ajuster le largeur, la taille et rembourrage du bouton. Ces valeurs sont définies en pixels et permettent de contrôler la taille ou la compacité du bouton.

3. Contexte

Choisissez entre un couleur et le arrière-plan de l'image pour le bouton. 

4. Forme

Cette section contrôle le style général du bouton :

• Frontière: Définissez l'épaisseur et le style de la bordure.
• CORNER: Ajustez le rayon du coin.
• Shadow:Ajoutez de la profondeur avec une ombre de bouton.

5. Icône

Vous pouvez ajouter une icône au bouton ou le laisser uniquement en texte. 

Si vous choisissez d'en ajouter un :

• Icône: Sélectionnez parmi les icônes intégrées de GemPages ou téléchargez votre propre icône personnalisée.
• Poste:Décidez si l’icône apparaît sur le côté gauche ou droit du texte.
• Gap: Ajustez l'espacement entre le texte et l'icône. Vous pouvez définir une valeur manuellement ou utiliser le curseur.

6. Texte

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). Texte section, activez-la pour développer les configurations du texte complet, y compris :

• Style: Choisissez parmi six styles de titre ou trois styles de paragraphe prédéfinis dans l'éditeur.
• Fonte: Choisissez une police dans la bibliothèque ou téléchargez votre propre police personnalisée.
• Taille: Définissez la taille de la police en pixels.
• Couleur: Sélectionnez une couleur de texte correspondant à votre conception.
• Poids de polices: Ajustez le degré de gras du texte.
• Hauteur de ligne: Définissez l'espacement vertical entre les lignes de texte.
• L'espacement des lettres: Ajustez l'espacement entre les lettres individuelles.
• Transformez: Appliquez des transformations de texte telles que les majuscules, les minuscules ou les majuscules.
• Shadow:Ajoutez une ombre au texte pour le mettre en valeur.

7. Effet

• Flotter: Définissez l'effet de survol du bouton. Vous pouvez ajuster la couleur d'arrière-plan, la couleur du texte, la bordure, les coins et l'ombre.

8. Rediriger vers

• Nouvel onglet: Choisissez si la page de détails du produit s'ouvre dans un nouvel onglet du navigateur (Oui) ou l'onglet actuel (Non).

9. Aligner

Alignez le bouton dans son conteneur. Vous pouvez le placer sur à gauche, centre, ou bien.

Configurer l'onglet Avancé

Pour une personnalisation plus avancée, accédez à l'onglet Avancé et suivez les instructions cet article.