Bouton Ajouter un panier au-dessus de l'image du produit

Pourquoi ajouter un bouton panier au dessus de l'image ?

Placer le Ajouter au panier Le bouton directement sur l'image du produit aide les clients à acheter plus rapidement et plus facilement. 

Au lieu de faire défiler la page vers le bas pour trouver le bouton, ils peuvent ajouter des articles au panier immédiatement en un seul clic.

Avantages :

• Réduire les frottements : Les clients n’ont pas besoin de rechercher le bouton du panier sous les détails du produit.
• Encourager les achats impulsifs : Une option d’ajout rapide permet aux clients d’ajouter plus facilement plusieurs produits en une seule fois.
• Améliorez l'expérience mobile : Sur les petits écrans, une superposition de boutons permet d'économiser de l'espace et de garder la mise en page propre.
• Promotions phares : Vous pouvez styliser le bouton pour qu'il corresponde aux campagnes saisonnières ou aux remises, le faisant ainsi ressortir sur l'image.

Comment afficher le bouton Panier au-dessus de l'image du produit ?

Dans GemPages v7, vous pouvez concevoir votre propre section de liste de produits avec un bouton « Ajouter au panier » au-dessus de l'image.

Tout d’abord, depuis votre interface administrateur Shopify, accédez à l’ Tableau de bord GemPages > PagesCliquez sur la page cible pour ouvrir l'éditeur.

Ensuite, procédez comme suit:

Étape 1 : ajoutez un élément de liste de produits à votre page

• Dans la barre latérale gauche, recherchez le Élément de la liste de produits, puis faites glisser et déposez l'élément sur votre page.

• Pour garantir une conception propre, vous pouvez supprimer plusieurs éléments enfants imbriqués dans l'élément Liste de produits. 

Par exemple, supprimez les variantes et les échantillons de produits en cliquant sur l'élément et en appuyant sur le bouton coffre icône.

Étape 2 : ajouter un élément de ligne à l'élément de liste de produits

• Dans la barre latérale gauche, ajoutez un Élément de ligne à la liste de produits que vous avez créée à l’étape 1.

• Faites glisser et déposez les éléments Image du produit et Bouton Ajouter au panier dans cette ligne.

Étape 3 : Configurer la position du bouton Panier

• Cliquez sur l’élément bouton Ajouter au panier pour ouvrir son panneau de paramètres.
• Rendez-vous dans la section Avancé onglet> Poste.

• Dans le menu déroulant, sélectionnez Absolute position.

Ensuite, le bouton du panier sera au-dessus de l’image du produit.

• Mettez le Bas = 0 pour afficher le bouton en bas de l'image.

• Retour à la Paramètres Onglet pour configurer la visibilité du bouton selon vos préférences. Par exemple, vous pouvez supprimer le texte, modifier la couleur d'arrière-plan ou configurer le survol.

Pour plus d'informations sur la configuration de l'élément Bouton Ajouter au panier, veuillez vous référer à cet article.

Étape 4 : Enregistrer et publier

• Vous pouvez avant-première pour vérifier les résultats en appuyant sur le œil icône sur la barre supérieure.
• Si tout va bien, enregistrer les changements et appuyez sur le Publier bouton pour republier votre page.

Résultat: