Élément collant d'ajout au panier

À propos de l'élément Sticky Add-to-Cart

A Bouton collant Ajouter au panier sur une page Web se trouve un bouton qui reste visible et « bâtons » à l'écran lors du défilement. Il s'agit d'un élément précieux de l'interface utilisateur des sites e-commerce, qui améliore l'expérience d'achat en facilitant l'accès au panier et en simplifiant le processus de paiement. 

Il contribue à un meilleur engagement des utilisateurs, à des taux de conversion améliorés et à la satisfaction globale des utilisateurs en réduisant les frictions dans le parcours d'achat en ligne.

Comment ajouter un élément collant d'ajout au panier à votre page ?

Pour intégrer un ajout au panier collant dans GemPages Editor v7, veuillez suivre ces étapes :

Étape 1 : Consultez la Tableau de bord GemPages > Pages > Collection, puis cliquez sur la page de votre collection cible pour localiser l'éditeur.

Étape 2 : Dans la barre latérale gauche, recherchez le "collant ajouter au panier » et faites-le glisser et déposez-le sur votre page.

Par défaut, l'élément Sticky Add-to-Cart est préchargé avec les composants essentiels :

• Module produit (Image du produit, titre du produit et prix du produit)
• Variantes et échantillons de produits
• La quantité de produit
• Ajouter au panier du produit

Cette configuration prête à l'emploi garantit que votre barre collante est immédiatement fonctionnelle. Vous pouvez simplement "Sauvegarder" et "Publier" la page et l'ajout au panier collant seront prêts sur votre page en direct. 

Cependant, pour une intégration transparente avec la conception globale de votre page, vous disposez d'une flexibilité totale pour personnaliser à la fois le Sticky Add-to-Cart lui-même et ses éléments enfants.

Configurer l'onglet Paramètres

Lorsque vous sélectionnez le Élément collant Ajouter au panier, vous découvrirez toutes les options de configuration idéalement situées dans la barre latérale gauche, notamment :

Mise En Page

Extrait du Mise En Page section, vous pouvez choisir la position de l'ajout au panier collant sur votre page :

• Position inférieure
• Haut de la page (fonctionne comme un en-tête personnalisé collant avec un bouton de panier)

Certains marchands souhaitent intégrer un bouton « Ajouter au panier » dans leur en-tête afin qu'il reste visible lorsque les clients font défiler la page. Comme l'ajout d'un produit au panier nécessite un module « Produit » (non pris en charge dans l'en-tête d'un thème), la meilleure solution consiste à utiliser le Élément collant Ajouter au panier.

En définissant sa position de mise en page sur Top, il se comporte comme un bouton de panier d'en-tête, toujours accessible sans perturber la conception de la page.

Taille

L'espace Taille La section vous permet de contrôler les dimensions globales de votre bouton Sticky Ajouter au panier, garantissant ainsi qu'il s'intègre parfaitement dans la mise en page de votre page.

Largeur: Personnalisez la largeur de l'élément. Vous pouvez saisir une valeur spécifique (en pixels) dans le champ ou choisir parmi les options disponibles :

• Ajuster le contenu (Auto) : Le bouton s'ajustera automatiquement pour correspondre à la taille de son contenu (texte + icône).
• Complet (100%) : Le bouton s'étendra pour remplir toute la largeur de son conteneur, le rendant plus visible sur la page.

Rembourrage: Le remplissage définit l'espacement interne entre le contenu du bouton (texte, icône, prix) et ses bordures.

Présentation

Définir un solide or arrière-plan de couleur dégradée Pour votre ajout au panier. Vous pouvez ajuster la couleur :

• Entrez le code couleur
• Faites glisser ou sélectionnez parmi les échantillons de couleurs
• Utilisez le sélecteur de couleurs pour sélectionner n'importe quelle couleur sur votre page actuelle
• Choisissez-en un parmi les Couleurs récentes  or Suggéré pour vous listes

Si vous préférez un arrière-plan de l'image, téléchargez une nouvelle image ou choisissez-la dans votre galerie pour la définir comme arrière-plan de l'élément.

Forme

• Frontière:Vous pouvez modifier la couleur, l'épaisseur et le contour de la bordure.
• CORNER: L'angle de la section peut être carré, rond ou en forme de pilule. Vous pouvez également saisir un rayon précis pour personnaliser l'angle de l'élément à votre guise.
• Shadow:Ajoutez une ombre et ajustez son affichage (taille, couleur, flou et distance).

Option d'affichage

Définissez la condition pour définir quand votre ajout au panier permanent s'affichera sur votre page. Vous avez le choix entre deux options :

• Toujours afficher : Le bouton « Ajouter au panier » restera visible en permanence pendant que le client fait défiler la page. Cela garantit un accès rapide au panier et réduit les frictions pendant le parcours d'achat.
• Après le premier bouton du panier : Cet élément n'apparaîtra qu'après l'apparition du premier bouton standard « Ajouter au panier ». Cette option permet d'éviter les redondances en haut de la page et de donner au bouton persistant une impression plus contextuelle.

Configurer l'onglet Avancé

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

FAQ concernant l'élément « Ajouter au panier » fixe

1. Le Sticky Add-to-Cart est-il réactif sur mobile ?

Oui. L'option Ajouter au panier par défaut est entièrement responsive. Sur mobile, elle s'affiche dans un format simplifié (généralement le bouton) pour gagner de la place et garantir une mise en page claire.

2. Pourquoi mon ajout au panier collant n'apparaît-il pas sur la page en direct ?

Une cause fréquente est que le Option d'affichage est fixé à « Après le premier bouton panier » pendant que votre page ne contient aucun bouton Ajouter au panier au-dessus de la ligne de flottaison. Dans ce cas, la barre collante n'apparaîtra jamais.

Comment réparer:

• Changez le Option d'affichage à "Toujours afficher" or
• Ajouter un Bouton Ajouter au panier sur votre page si vous préférez l'option d'affichage « Après le premier bouton panier ».

3. Puis-je utiliser un arrière-plan d'image pour l'ajout au panier collant ?

Oui. Dans la section Arrière-plan, vous pouvez choisir une couleur unie/dégradée ou télécharger une image à utiliser comme arrière-plan du bouton.

4. Comment puis-je modifier la forme de l'ajout au panier collant ?

Dans l' Forme paramètres, vous pouvez personnaliser le frontière, rayon de coin (carré, rond ou en forme de pilule), et ombre.

5. L'ajout au panier ne s'affiche pas sur mobile. Que faire ?

Cela peut se produire pour plusieurs raisons:

• Paramètres de visibilité: Vérifiez les paramètres de l'élément dans l'onglet Avancé et assurez-vous qu'il n'est pas masqué sur mobile.
• Option d'affichage: Si défini sur Après le premier bouton du panier, mais votre mise en page mobile n'inclut pas de bouton Ajouter au panier standard au-dessus de la ligne de flottaison, la barre collante n'apparaîtra pas. Toujours afficher.
• Différences de mise en page sur mobileSur les téléphones, l'option « Ajouter au panier » peut s'afficher en version simplifiée (bouton uniquement). Faites défiler vers le bas pour vérifier qu'elle n'est pas minimisée.

6. Le bouton Ajouter au panier collant peut-il remplacer le bouton de panier de mon en-tête de thème ?

Oui, en pratique. Si l'en-tête de votre thème ne comporte pas de bouton « panier », activez simplement l'option « Ajouter au panier » en haut de la page. Elle offre la même fonctionnalité, toujours visible lorsque les utilisateurs font défiler la page.

7. Puis-je utiliser l'élément Sticky Add-to-Cart comme un bouton fixe classique (et non comme bouton Ajouter au panier) ?

L'élément « Ajouter au panier » fixe est conçu spécifiquement pour les actions d'ajout au panier. Il nécessite un contexte produit et ne doit pas être utilisé comme un bouton d'appel à l'action générique.

Toutefois, si vous avez besoin d'un bouton d'appel à l'action fixe qui renvoie vers une autre page (par exemple, une collection, une page de destination, etc.), nous vous recommandons de supprimer tous les éléments inclus dans l'élément « Ajouter au panier fixe », puis d'insérer le bouton standard. Élément de bouton à la place.

Vérifiez ce guide vidéo pour plus d'instructions.