Comment ajouter une barre d'achat fixe

La barre du bouton d'achat fixe garde vos offres à portée de main pendant que les acheteurs parcourent la page produit. Son bouton peut faire défiler la page jusqu'aux offres ou ajouter directement l'offre sélectionnée au panier. Vous pouvez l'afficher après que les acheteurs ont fait défiler la page au-delà du widget ou dès le chargement de la page.

Activer la barre du bouton d'achat fixe

La barre fixe est configurée pour chaque bundle dans l'éditeur de bundles.

1. Ouvrez le bundle que vous souhaitez modifier.
2. Ouvrez l'onglet Modules complémentaires, puis développez Bouton d'achat fixe.
3. Activez l'interrupteur à côté du titre Bouton d'achat fixe.

La barre s'affiche sur les pages produit où ce bundle apparaît. Vérifiez donc que le bundle est publié et que votre widget est configuré pour s'afficher sur les bons produits.

Choisir l'action du bouton

L'action du bouton propose deux choix :

• Faire défiler la page jusqu'aux offres ramène l'acheteur au widget pour choisir une offre.
• Ajouter l'offre sélectionnée au panier affiche l'offre sélectionnée et l'ajoute avec les produits, cadeaux et options supplémentaires choisis.

En mode d'ajout au panier, la barre suit les modifications apportées à l'offre sélectionnée, aux variantes, aux quantités, aux abonnements et aux modules complémentaires. Son total correspond au pied de page du widget. Vous pouvez activer Afficher le prix, Afficher le prix d'origine, Afficher le badge d'économies et Afficher le prix dans le bouton.

Si l'acheteur doit encore choisir une variante ou remplir un emplacement du bundle, le bouton le ramène au widget pour terminer. Si aucune offre n'est sélectionnée, il l'invite à choisir des options. Sur les thèmes qui empêchent l'ajout direct, le bouton revient à l'action de défilement vers le widget. Les remises comportant uniquement des modules complémentaires facultatifs utilisent l'action de défilement vers les offres afin que les acheteurs puissent faire leurs choix dans le widget. Ce bouton utilise le parcours normal du panier, et non l'achat immédiat.

Choisir quand la barre apparaît

Sous Afficher la barre, choisissez Après la disparition du widget de l'écran ou Toujours, dès le chargement de la page. Les deux options fonctionnent avec l'une ou l'autre action du bouton. Les barres existantes conservent leur comportement après défilement, sauf si vous le modifiez.

Lorsque l'option Toujours est sélectionnée, le mode d'ajout au panier démarre avec votre offre présélectionnée et suit les sélections effectuées ensuite. Si vous autorisez le chargement de la page sans offre sélectionnée, les acheteurs doivent choisir une offre avant que la barre puisse l'ajouter.

Choisir une mise en page : Flottante ou Fixe

Utilisez l'option Mise en page de la barre fixe pour choisir la position de la barre sur la page :

• Flottante - une carte centrée, légèrement en retrait par rapport aux bords, avec un petit espace et des coins arrondis.
• Fixe - une barre pleine largeur fixée au bord inférieur, d'un bord à l'autre.

Les deux mises en page gèrent différemment l'arrondi des coins. Le passage à Fixe force le rayon des coins à 0 afin que la barre soit alignée sur les bords de l'écran. Le passage à Flottante rétablit les coins arrondis si le rayon était défini sur 0. Vous pouvez ensuite ajuster précisément le rayon des coins dans les contrôles de style ci-dessous, mais la mise en page Fixe est conçue pour rester carrée.

Afficher sur ordinateur et mobile

Deux cases à cocher contrôlent l'emplacement d'affichage de la barre :

• Afficher sur ordinateur
• Afficher sur mobile

Les deux options sont activées par défaut. Vous pouvez désactiver l'une ou l'autre, par exemple pour afficher la barre fixe uniquement sur mobile, où le bouton d'achat d'origine risque le plus de sortir de l'écran lors du défilement.

Consultez la page mobile réelle avec le titre et le prix de votre offre les plus longs. Sur les écrans étroits, la barre simplifie certains détails du prix d'origine, des économies et du prix du bouton afin de garder l'action lisible. Ne vous attendez pas à retrouver tous les détails de la version ordinateur sur un petit téléphone.

Définir le titre et le texte du bouton

En mode de défilement vers les offres, la barre fixe comporte deux champs de texte :

• Titre - le texte affiché à côté du bouton. Il prend en charge les variables de modèle, ce qui vous permet d'insérer des valeurs dynamiques comme {{product_title}} (par défaut), {{saved_percentage}} ou {{price_total}}. Utilisez l'outil d'insertion de variables dans le champ pour les ajouter.
• Texte du bouton - le libellé du bouton fixe. La valeur par défaut est « Choisir un bundle ».

Le mode d'ajout au panier affiche le titre de l'offre sélectionnée et utilise son propre champ Texte du bouton Ajouter au panier. Les deux textes de bouton ont des traductions distinctes. Modifier le texte d'un mode ne remplace donc pas celui de l'autre.

Sous Texte de la barre fixe, vous pouvez également modifier le badge de cadeau gratuit, les badges des modules complémentaires simples et multiples, ainsi que le texte du bouton Choisir des options. Conservez {{count}} dans le message des modules complémentaires multiples afin qu'il puisse afficher le nombre réel.

Ajouter le compte à rebours intégré, facultatif

Vous pouvez afficher un compte à rebours dans la barre fixe à l'aide de la case à cocher Afficher le compte à rebours dans la barre fixe.

Cette option nécessite que la minuterie de compte à rebours soit activée sur le même bundle. Si la minuterie de compte à rebours est désactivée, la case est inactive et ne peut pas être sélectionnée. Une fois la minuterie activée, vous pouvez activer cette option.

Le compte à rebours intégré réutilise le titre compact de vos paramètres de minuterie de compte à rebours, et son style suit le thème de la barre fixe.

Si vous désactivez ensuite la minuterie de compte à rebours, le compte à rebours de la barre fixe est automatiquement désactivé.

Styliser la barre fixe

Ouvrez le groupe Style de la barre d'ajout au panier fixe pour ajuster son apparence. Les contrôles sont regroupés dans des accordéons :

• Arrière-plan - couleur unie ou dégradé de la barre.
• Conteneur - couleur et largeur de la bordure, rayon des coins, marge intérieure et ombre.
• Titre - couleur du texte, taille de police et graisse.
• Prix - style du texte du prix en mode d'ajout au panier.
• Bouton - couleur d'arrière-plan, couleur du texte, taille de police, graisse, marge intérieure et rayon des coins.
• Image du produit - taille de l'image, rayon des coins, largeur et couleur de la bordure.
• Compte à rebours - couleur d'arrière-plan, couleur du texte, taille de police, graisse et marge intérieure. Ce groupe apparaît uniquement lorsque le compte à rebours intégré est activé.

Pour obtenir rapidement une apparence harmonisée, utilisez le sélecteur de couleurs prédéfini en haut de la section. Il propose également Harmoniser les coins du bouton d'achat fixe avec ceux du widget principal, ce qui définit le rayon des coins de la barre sur celui de votre widget de bundle principal afin d'assurer une apparence cohérente.

À propos du rayon des coins

N'oubliez pas que la mise en page Fixe force un rayon des coins de 0. Si vous définissez un rayon arrondi dans le style du conteneur et que les coins restent carrés, vérifiez que la mise en page est définie sur Flottante.

Enregistrer et tester les deux actions

Enregistrez, puis testez une page produit ciblée avec la remise active. En mode défilement, faites défiler la page au-delà des offres et utilisez le bouton fixe pour revenir aux offres. En mode d'ajout au panier, sélectionnez une offre et des variantes, puis ajoutez-les à l'aide du bouton fixe. Vérifiez les quantités, les variantes et le total dans le panier et lors du paiement. Recommencez sur mobile et testez un choix indisponible ou incomplet : la barre doit ramener l'acheteur au widget pour terminer sa sélection.

Dans notre exemple, Achetez-en 2 ajoute deux sacs Ivory Small, pour un sous-total de marchandises de 43,20 $ après une remise de 10 %. Le choix de la combinaison indisponible Blush Small remplace l'action fixe par Choisir des options ; le choix d'une taille disponible rétablit Ajouter au panier. Le compte à rebours reste visuel et n'arrête pas la remise lorsqu'il atteint zéro. Consultez Minuterie de compte à rebours pour connaître le comportement à l'expiration.