Les boutons d'ajout au panier fixes offrent aux clients une action d'achat après avoir fait défiler une longue page produit. Ces boutiques répètent l'action d'ajout, intègrent des sélecteurs dans la barre ou renvoient le client vers les options principales. La bonne approche dépend des choix qui restent à faire.
Ritual affiche sa barre d'achat une fois que la zone d'achat principale n'est plus visible. Sur desktop, elle est ancrée en haut ; sur mobile, elle est placée en bas. Le prix et un bouton d'achat restent disponibles pendant que les clients lisent. Observez la barre avec l'en-tête du site pour comprendre l'espace fixe qu'ils occupent.
Pour votre boutique
Pensez la barre d'achat en même temps que le reste de l'interface fixe.
La barre desktop de Smith Teamaker affiche le titre du produit, le prix de départ et Choose Options. L'action ramène au formulaire principal au lieu d'ajouter un article non spécifié. Les preuves capturées sur mobile n'ont pas permis de tirer de conclusion fiable, cet exemple se concentre donc uniquement sur le desktop. Il convient aux produits dont le format ou le choix de livraison nécessitent plus d'attention.
Pour votre boutique
Renvoyez vers les options principales lorsque la commande n'est pas encore définie.
Momentous synchronise les changements de variante, de quantité et de mode d'achat entre sa zone d'achat principale et sa barre du bas. La barre apparaît une fois que la section principale du produit n'est plus visible. Un client poursuivant sa lecture peut l'utiliser avec le même produit et les mêmes conditions d'achat déjà choisis dans le formulaire principal.
Pour votre boutique
Gardez chaque contrôle d'achat lié à la même sélection.
maxbone inclut des menus déroulants de couleur et de taille avec le titre et le prix du produit dans sa barre du bas. La version mobile comporte également ces contrôles, bien que leur interaction n'ait pas été testée dans l'étude. Les sélecteurs ont besoin de suffisamment d'espace pour rester lisibles et utilisables dans cette zone compacte.
Pour votre boutique
N'incluez que les sélecteurs essentiels et testez leurs contrôles sur mobile.
Horizn Studios affiche un bouton bleu sur mobile une fois que la zone d'achat principale disparaît au défilement. Cette action très contrastée reste disponible sur le reste de la page produit. Cette version compacte nécessite que la sélection du produit soit déjà claire ; les options requises manquantes doivent avoir une réponse définie.
Pour votre boutique
Vérifiez l'état de sélection incomplète ainsi que l'état prêt à l'achat.
Our Place utilise une barre supérieure sur desktop avec le titre du produit, le prix et l'action, puis un bouton en bas sur mobile. Elle apparaît lorsque la section d'achat principale n'est plus visible. L'emplacement mobile nécessite de l'espace au-dessus des marges de l'appareil et doit coexister avec d'autres contrôles fixes.
Pour votre boutique
Maintenez l'accès à l'achat sans masquer les explications sur le produit.
Ten Thousand modifie son libellé mobile entre Select Size et Add to Bag en fonction de l'état de l'achat. Le desktop affiche également une miniature et un résumé de la variante. Le libellé indique aux clients si un clic ajoutera l'article ou les ramènera vers un choix manquant.
Pour votre boutique
Faites en sorte que le bouton décrive l'action disponible dans l'état actuel.
REP Fitness répète le nom du produit, le prix et l'action d'ajout dans une barre en bas une fois que la zone d'achat initiale n'est plus visible. Les clients conservent ce contexte pendant qu'ils lisent les spécifications de l'équipement. Toute configuration requise nécessite toujours un endroit clair pour être complétée avant que l'article ne soit ajouté.
Pour votre boutique
Conservez l'identité et le prix du produit lors de longues spécifications.
La barre desktop de Slowdown Studio inclut une miniature, le titre, le prix et le bouton d'achat. La petite image permet d'identifier le textile pendant que les clients continuent leur lecture plus bas sur la page. Comme la barre se superpose au contenu, les dernières sections de la page doivent avoir suffisamment d'espace pour rester visibles au-dessus.
Pour votre boutique
Utilisez un rappel visuel compact et laissez de la place pour le contenu sous la barre.
House of Spoils utilise une carte flottante sur mobile qui renvoie les clients vers les options du produit. Sa miniature reflète le traitement de l'encadrement, tandis que sur desktop, la barre est placée sur le bord inférieur. Les choix de taille et d'encadrement de l'œuvre restent dans la zone de configuration principale, la carte offrant un moyen d'y revenir.
Pour votre boutique
Regroupez les configurations détaillées et rendez-les faciles à retrouver.
La barre d'outils mobile de DedCool contient un bouton d'achat pleine largeur et un contrôle de liste de souhaits tout au long de la lecture. Le desktop utilise une action supérieure compacte. La barre d'outils mobile partage un espace d'écran limité avec le chat, le consentement et les contrôles promotionnels, ces combinaisons doivent donc être vérifiées ensemble.
Pour votre boutique
Vérifiez l'ensemble des contrôles fixes sur le plus petit écran.
Allies of Skin inclut des menus déroulants pour le type d'achat et le format dans sa barre du bas. Les contrôles exposent des choix qui affectent à la fois l'article et les conditions de commande récurrente. L'étude n'a pas permis de déterminer si les modifications se synchronisent avec le formulaire principal, ce comportement reste donc essentiel à vérifier.
Pour votre boutique
Gardez la sélection (achat unique ou abonnement) cohérente dans les deux formulaires d'achat.
Proud Mary Coffee inclut le prix, un bouton d'achat et des contrôles de paiement express dans sa barre mobile. Les informations de la commande restent visibles pendant que les clients lisent des détails sur le café. La présence de plusieurs actions de paiement augmente également la hauteur de la barre, rendant l'espacement et la clarté de l'action principale très importants sur téléphone.
Pour votre boutique
Gardez le prix lisible et donnez la priorité visuelle à une seule action.
Dinosaur Designs place l'identité du produit, le prix et Select Option dans sa barre sticky. L'action renvoie à la grille principale des variantes, où les choix visuels ont plus d'espace. Les clients peuvent continuer à lire sans perdre le moyen de revenir au sélecteur complet.
Pour votre boutique
Redirigez vers un sélecteur visuel lorsqu'il nécessite plus d'espace que ce que la barre ne permet.
Versed affiche un bouton d'achat sticky sur mobile une fois que la zone d'achat initiale n'est plus visible, avec le prix intégré dans son libellé. La mise en page capturée sur desktop n'utilise pas la même barre. Cette fonctionnalité répond aux besoins des petits écrans indépendamment de la disposition desktop.
Pour votre boutique
Ajoutez des contrôles sticky là où la mise en page en a réellement besoin.
Ten Thousand modifie son étiquette sur mobile de Select Size à Add to Bag lorsque l’état de l’achat le permet. L’option Choose Options de Smith Teamaker renvoie au formulaire principal, et Dinosaur Designs redirige les clients vers la grille des variantes. L’action doit décrire ce qui se produira lorsqu’un article n’est pas encore entièrement spécifié.
Un petit sélecteur peut convenir pour un choix simple. maxbone intègre la couleur et la taille dans sa barre, tandis qu’Allies of Skin inclut le type d’achat. Si la barre reproduit les commandes du formulaire principal, les deux doivent comporter le même article, le même prix et le même mode d’achat sélectionnés. Momentous a démontré cette synchronisation ; la capture d’Allies of Skin ne l’a pas établie, ce comportement doit donc encore être testé.
Ritual et Our Place déplacent leurs barres supérieures sur ordinateur vers le bas sur mobile. Versed utilise un bouton mobile sans la même barre sur ordinateur. Ces exemples répondent à différentes quantités d’espace disponible et à différentes distances par rapport au formulaire d’achat principal. Évaluez chaque taille d’écran individuellement.
Vérifiez la barre avec le clavier mobile, le chat, les paramètres de cookies et les offres promotionnelles affichés. Proud Mary Coffee inclut plusieurs actions de paiement, tandis que la superposition de Slowdown Studio nécessite suffisamment d’espace pour que le contenu final de la page reste visible. Maintenez la lisibilité du prix et de l’action sans masquer de détails importants. Testez le zoom, le focus du clavier et la zone utilisable autour des bords de l’écran de l’appareil, ainsi que le défilement habituel.
Ces exemples ne comportent aucune augmentation des conversions mesurée. Un contrôle fixe peut rendre la zone d'achat plus facile d'accès, mais il peut aussi masquer du contenu ou introduire des sélections contradictoires. Testez-le par rapport au flux de produit réel.
Utilisez une étiquette comme Select size ou Choose options et redirigez le client vers ce choix. Évitez d'ajouter silencieusement une variante arbitraire.
Utilisez-la là où les commandes d'achat deviennent autrement difficiles d'accès. Une longue page sur mobile et une mise en page sur ordinateur avec une colonne d'achat visible peuvent nécessiter un comportement différent.
C'est une commande d'achat qui reste disponible lorsque le client fait défiler la page loin de la zone d'achat principale. Elle peut ajouter l'article sélectionné, offrir des sélecteurs compacts ou renvoyer le client aux options requises. Son étiquette doit différencier ces actions.
Maintenez la cohérence de la variante sélectionnée, de la quantité, du prix et de l'achat unique ou de l'abonnement. Les modifications apportées dans l'un ou l'autre des formulaires doivent être répercutées dans l'autre. La capture de Momentous démontre ce comportement ; les captures d'écran ne le vérifient pas pour chaque boutique.
Donnez à Fudge un objectif et une référence. Il suggère des modifications pour votre boutique, prépare un brouillon dans votre thème Shopify et vous fait un retour. Vous examinez chaque changement avant sa mise en ligne.
Découvrez comment fonctionne l'éditeur de boutique