Élément de bouton d'ajout de produit au panier

À propos du bouton Panier de produits

Le bouton « Ajouter au panier » est essentiel pour toute boutique, car il permet aux clients d'ajouter des produits à leur panier d'un simple clic. Dans GemPages, ce bouton est appelé « Bouton Panier » et offre de nombreuses fonctionnalités allant au-delà du simple ajout de produits au panier.

Pour ajouter le bouton Panier de produits à votre page, veuillez suivre les étapes ci-dessous. 

Étape 1 : Dans l' Tableau de bord GemPages, sélectionnez votre page sur laquelle travailler et entrez dans l'éditeur.

Étape 2 : Étant donné que le bouton du panier de produits est un élément enfant du Élément de produitPour fonctionner correctement, il doit être imbriqué dans un module Produit. Si vous n'en avez pas, glissez-déposez-en un sur votre page.

Étape 3 : Faites glisser et déposez l'élément Bouton du panier de produits à l'intérieur du module Produit, à l'emplacement de votre choix.

Une fois ajouté, cliquez sur l'élément pour accéder aux paramètres sur le Barre latérale de gauche. La configuration est divisée en deux onglets principaux : Paramètres et Avancé.

Configurer l'onglet Paramètres

Mise En Page

Choisissez les paramètres de mise en page du bouton en fonction de la conception de votre page.

Origine du produit

Spécifiez le produit auquel le bouton doit être lié. Cela garantit le bon fonctionnement du bouton grâce à la synchronisation avec les données produit appropriées.

Taille

• Largeur:Définissez la largeur du bouton.
• Hauteur:Réglez la hauteur du bouton.
• Rembourrage: Définissez le remplissage à l'intérieur du bouton.

Présentation

Personnalisez la couleur d'arrière-plan du bouton grâce au sélecteur de couleurs. Cela permet d'harmoniser le bouton avec le style de votre marque.

Forme

• Frontière: Choisissez le style de bordure, tel que Ligne ou Solide, pour donner au bouton un contour visuel.
• CORNER: Sélectionnez le degré d'arrondi des coins (pointu, arrondi ou pilule).
• Shadow: Appliquez et personnalisez une ombre portée pour donner au bouton une apparence surélevée ou superposée.

Icône

• Choisissez l'icône: Sélectionnez une icône à afficher sur le bouton ou vous pouvez télécharger un nouveau fichier SVG.
• Position de l'icône: Positionnez l'icône sur le côté gauche ou droit du texte.
• espacement: Ajustez l'espacement entre l'icône et le texte.

Texte

• MenuVous pouvez entièrement personnaliser le texte affiché sur le bouton Panier. Le texte par défaut est « AJOUTER AU PANIER », mais vous pouvez le modifier pour qu'il corresponde à votre design et à vos objectifs.
• Styles: Sélectionnez un style pour l'étiquette du bouton du panier parmi les styles prédéterminés disponibles.
• Fonte: Choisissez la police de votre étiquette de texte dans le menu déroulant. Si vous souhaitez utiliser d'autres polices, consultez la section « Utiliser une police ». police personnalisée ici.
• Formats:Déterminez votre taille de police préférée.

Cliquez sur le Bouton « Afficher plus » pour révéler plus d'options de personnalisation. 

• Poids de polices: Choisissez le poids de police souhaité dans le menu déroulant fourni.
• Hauteur de ligne: Ajustez la hauteur du texte en spécifiant une valeur de pourcentage.
• L'espacement des lettres:Modifiez l'espacement entre les lettres en saisissant une valeur en pixels.
• Transformez: Transformez le texte en majuscules, minuscules ou en majuscules selon vos besoins.

Séparateur

Activez cette option pour ajouter un séparateur visuel entre le texte et le prix à l'intérieur du bouton. Vous pouvez choisir entre des lignes, des points ou des barres.

Tarif

Activez cette option pour afficher le prix du produit sur le bouton.

• Mise En Page: Sélectionnez la disposition préférée pour l'affichage des prix.
• Prix ​​du produit: Personnalisez la façon dont le prix actuel apparaît.
• Comparer les prix: Affichez éventuellement le prix d'origine (barré) pour les promotions.

Effet de survol

Personnalisez le comportement de survol du bouton.

• Présentation: Définissez une nouvelle couleur d'arrière-plan lors du survol.
• Couleur du texte: Modifiez la couleur du texte au survol pour une meilleure interactivité.

État de rupture de stock

Cette option vous permet de personnaliser l'affichage du bouton panier lorsque le stock du produit atteint 0. En activant l'option Custom Style commutateur, des options de style supplémentaires pour le bouton seront révélées, vous permettant de personnaliser davantage son apparence.

Redirection vers

Cette option définit ce qui va se passer après qu'un client clique Cliquez sur le bouton « Ajouter au panier ». Vous pouvez choisir parmi les actions suivantes :

• Continuer vos achats: Aucune redirection. Le client reste sur la page actuelle après avoir ajouté le produit au panier.
• Aller à la caisse: Dirige le client vers la page de paiement par défaut de Shopify avec les articles présents dans le panier (le cas échéant).
• Ouvrir le panier: Ouvre le tiroir du panier ou la page du panier, selon les paramètres de votre thème.
• Ouvrir le lien: Redirige l'utilisateur vers une URL spécifique. Un nouveau champ de saisie apparaît pour vous permettre de coller le lien de destination.

Utilisez ce paramètre de manière stratégique pour guider vos clients tout au long de votre tunnel de conversion. Par exemple, dirigez-les vers le panier pour des opportunités de ventes croisées ou directement vers le paiement pour des achats impulsifs.

Aligner

Choisissez l'alignement du bouton dans sa section : gauche, centre ou droite.

Note: L'alignement horizontal est désactivé lorsque la largeur est définie sur 100 % ou plus.

Configurer l'onglet Avancé

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

Utiliser avec les abonnements (Abonnement Ajouter au panier)

Avant de commencer

• Installer et configurer un application d'abonnement (par exemple, Appât, Rechargement, Soumettre, Sceller, etc.) et définir Options d'achat (plans de vente) pour le produit dans Shopify Admin.
• Assurez-vous que l'application widget d'abonnement (basculement unique ou abonnement, intervalle de livraison, etc.) est activé pour ce produit.

Configuration dans GemPages

Étape 1 : Placez le Produit élément, sélecteurs de variantes, le widget d'abonnementainsi que, Bouton du panier de produits à l'intérieur du même module Produit (ordre : sélecteurs → widget → Ajouter au panier).

Étape 2 : In Bouton du panier de produits > Paramètres > Origine du produit, confirmez qu'il pointe vers le même produit comme le widget.

Étape 3 : In Redirection vers, préférer Ouvrir le panier or Continuer vos achats afin que le plan de vente soit correctement fixé avant le paiement.

Étape 4 : Enregistrer et pPubliez votre page. Sur la page en direct, sélectionnez un abonnement dans le widget et cliquez sur Ajouter au panier pour vérifier que la ligne du panier s'affiche comme un abonnement.

Remarques importantes:

• Comportement des contrôles de sélection de widgets : si Souscrivez est sélectionné, la ligne du panier inclut un selling_plan_id ; si Un temps, ce n'est pas le cas.
• Placez le widget d'abonnement et le bouton Panier de produits dans le même module Produit (widget au-dessus du bouton).
• Le bouton affiche le prix de la variante ; les remises/étiquettes d'abonnement s'affichent dans le widget ou dans le tiroir du panier/à la caisse.
• Préférer "Ouvrir le paniernous »Continuer vos achats » pour Redirection vers section afin que le plan de vente soit joint avant le paiement.
• La variante sélectionnée doit appartenir au plan de vente du produit.
• Utilisez le bouton Panier de produits pour les actions du panier, et non l'élément Bouton générique.

Dépannage des problèmes d'ajout au panier dans GemPages

Si votre bouton « Ajouter au panier » dans GemPages ne fonctionne pas comme prévu, voici quelques problèmes courants et leurs solutions :

1. Assurez-vous que le bouton est imbriqué dans un module de produit

L'espace Bouton du panier de produits doit être placé dans un Module produit Pour fonctionner correctement. Si le module est en dehors de ce module, il ne fonctionnera pas.

Solution:

• Dans l'éditeur GemPages, faites glisser et déposez un Module produit sur votre page.
• Ensuite, placez le Bouton du panier de produits à l'intérieur de ce module.​

Cette configuration garantit que le bouton est correctement lié aux données du produit.

 2. Configurez correctement l'action du bouton

Assurez-vous que l'action du bouton est définie sur « Ajouter au panier ». Si elle est définie sur une autre action, comme « Lien vers la page », les produits ne seront pas ajoutés au panier.

Solution:

• Sélectionnez le Ajouter au panier bouton dans l'éditeur GemPages.
• Dans le panneau des paramètres à droite, assurez-vous que l'action est définie sur "Ajouter au panier."

Cette configuration garantit que le bouton exécute l'action souhaitée.

 3. Évitez d'utiliser l'élément générique « Bouton » pour les actions du panier

GemPages propose un générique Bouton Élément, mais il n'est pas conçu pour les fonctionnalités du panier. Son utilisation pour ajouter des produits au panier peut entraîner des problèmes.

Solution: Utilisez le bouton Bouton du panier de produits au lieu de l'élément Button générique.​

Ces boutons spécialisés sont adaptés aux actions du panier et garantissent un bon fonctionnement.

4. Vérifier la visibilité et la disponibilité du produit

Si le produit n'est pas actif ou disponible sur le canal de vente de la boutique en ligne, le bouton « Ajouter au panier » ne fonctionnera pas.

Solution:

• Dans votre interface d'administration Shopify, accédez à Produits et sélectionnez le produit concerné.
• Assurez-vous que le statut du produit est Actif.
• Sous Canaux de vente et applications, confirme que Boutique en ligne est sélectionné.​

Cela garantit que le produit est disponible à l'achat dans votre magasin.

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

1. Pourquoi ne puis-je pas ajouter un bouton « Ajouter au panier » à une section de thème enregistrée ?

Les sections de thème enregistrées dans GemPages ne peuvent pas être modifiées et vous ne pouvez pas y ajouter de nouveaux éléments, y compris le bouton « Ajouter au panier ». Pour utiliser un bouton « Ajouter au panier », créez une section de thème enregistrée. nouvelle sectionInsérez tous les éléments nécessaires (Produit → Ajouter au panier), puis enregistrer la section entière comme nouvelle section de thème réutilisable.

En savoir plus sur la section thématique : Rubrique thématique et FAQ sur GemPages.

2. Pourquoi le prix ne s'affiche-t-il pas sur mon bouton Ajouter au panier ?

Assurez-vous que le Tarif L'option est activée dans l'onglet Paramètres. Si votre produit n'a pas de prix ou n'est pas disponible, le prix peut ne pas s'afficher.

3. Pourquoi le bouton Ajouter au panier a-t-il un aspect différent au survol de la souris ?

Vérifiez la Effet de survol Paramètres. Vous pouvez configurer différentes couleurs d'arrière-plan ou de texte pour l'état de survol.

4. Pourquoi l'option d'alignement est-elle désactivée ?

L'alignement est désactivé lorsque la largeur du bouton est définie sur 100 % ou plus, car l'élément occupe déjà toute la largeur disponible.

5. Puis-je placer le bouton Ajouter au panier dans une fenêtre contextuelle ?

• Utiliser un Standard Élément bouton pour ouvrir la fenêtre contextuelle.
• Conservez le bouton « Ajouter au panier » sur la page principale du produit.

6. Comment faire pour que le bouton Ajouter au panier ouvre un panier coulissant ?

Vous n'avez pas besoin de code personnalisé — définir Bouton Panier → Rediriger vers → Ouvrir le panierConfigurez ensuite le tiroir-panier ou le panier coulissant de votre thème en suivant les instructions. .