Comment ajouter un bouton d'achat flottant sur un produit ou une landing page
Ajoutez le bloc Panier flottant depuis Ajouter des blocs dans le corps de votre page produit ou landing page. Il flotte pendant que le visiteur fait défiler la page, et vous décidez de son texte, s'il ajoute au panier ou fait défiler jusqu'au formulaire de commande, et du moment où il apparaît.
Étapes
- Ouvrez la page: Boutique en ligne → Paramètres du thème → sélecteur de page → Produit, ou ouvrez une landing page depuis Landing Pages.
- Cliquez sur l'icône + (Ajouter des blocs), recherchez Panier flottant et déposez-le dans le corps de la page — pas à l'intérieur d'une section. Survolez le bloc dans la liste pour choisir l'un des 2 designs sous Variantes disponibles.
- Sélectionnez le bloc et ouvrez Paramètres:
- Texte de l'action — le libellé (par défaut Ajouter au panier).
- Rôle du bouton — Ajouter au panier ajoute directement le produit, Défiler fait descendre le visiteur sur la page à la place.
- Afficher seulement après avoir dépassé le formulaire — masque le bouton jusqu'à ce que le visiteur ait dépassé le formulaire de commande Paiement express; Seuil de paiement express (par défaut 0) affine ce point.
- Icône du bouton, Position de l'icône, couleurs et Animation du bouton.
- Cliquez sur Enregistrer, puis vérifiez que la page est Publié. Utilisez Aperçu pour faire défiler la page en ligne et observer le comportement du bouton.
Problèmes courants
- Le bouton n'apparaît jamais → Afficher seulement après avoir dépassé le formulaire est activé mais la page n'a pas de bloc Paiement express. Désactivez l'option ou ajoutez le formulaire de commande.
- Il fait défiler au lieu d'ajouter au panier → réglez Rôle du bouton sur Ajouter au panier.
- Je n'arrive pas à le déposer dans ma section produit → c'est un bloc au niveau de la page; déposez-le sur une zone vide de la page ou déplacez-le au niveau supérieur dans Couches de conception.
- Il apparaît sur ma landing page mais pas sur la page produit de la boutique (ou l'inverse) → les deux sont construites séparément; ajoutez le bloc dans chaque constructeur.
Voir aussi
- Comment créer un bouton flottant qui va au paiement express ?
- Comment ajouter un formulaire de paiement express à ma landing page ou fiche produit ?
- Personnaliser les champs du formulaire de commande (nom, téléphone, ville, adresse, note)
- Ajouter, déplacer, copier et supprimer des blocs sur une page