Widgets de la boutique en ligne

Trois blocs dessinent vos offres à paliers sur la page produit : la Quantity Break Table, le Quantity Break Picker et le tableau Spend More Save More. Vous les placez une fois dans votre thème ; ensuite ils suivent la réduction, montrant ses paliers et se masquant quand l’offre s’arrête.

Configuration

Activez Show on storefront dans la réduction.

Ouvrez la réduction — une réduction par quantité, une dépensez plus, économisez plus ou une liste de prix — et activez Show on storefront. C’est activé par défaut sur une nouvelle réduction par quantité et sur une nouvelle réduction dépensez plus, économisez plus. La ligne de statut de la carte vous dit exactement ce que les clients vont obtenir, ou pourquoi le widget reste masqué.
Cliquez sur Add à côté du bloc voulu.

Le panneau Add to your theme en bas de cette carte nomme chaque bloc exactement comme le nomme l’éditeur de thème, avec une ligne sur ce qu’il est, et un bouton Add qui ouvre votre éditeur de thème avec le bloc prêt à être placé.
Placez le bloc dans l’éditeur de thème et enregistrez.

Déposez le bloc là où il doit être sur la page produit — en général près du prix ou du bouton d’achat — et cliquez sur Save.
Ajustez les paramètres du bloc dans l’éditeur de thème.

Chaque intitulé, couleur et comportement ci-dessous est un paramètre de l’éditeur de thème sur le bloc lui-même.

Quantity Break Table

Liste tous les paliers d’une offre de réduction par quantité sous forme de tableau sur la page produit : la quantité, ce que le client obtient, et le prix.

General

Border color — la bordure du tableau. Par défaut #d9d9d9.
Roundness — rayon des coins, 0–24 px. Par défaut 8.
Borderless — désactivé par défaut. Activé, la bordure disparaît.

Header background — vide utilise la valeur par défaut du design.
Header text — la couleur du texte de l’en-tête.

Body

Cell padding — 4–32 px. Par défaut 14.
Body background
Body text
Highlight unlocked tier — activé par défaut. Met en évidence la ligne qui correspond à la quantité sélectionnée.
Highlight color — par défaut #e8f5e9.

Columns

Display quantities as range — désactivé par défaut. Activé, affiche “2–4” au lieu de “2+”.
Quantity label template — par exemple Buy {quantity}+ ; {quantity} est remplacé automatiquement. Vide garde “2+”. Les plages ne sont pas concernées.
Quantity label — par défaut “Buy”.
Show savings column — activé par défaut. Toujours affichée pour les offres à montant en moins.
Savings label — par défaut “Get”.
Off-each label — par défaut “off each”. Utilisé pour les offres en pourcentage.
Amount-off label — par défaut “off”. Utilisé pour les offres à montant en moins ; le montant est le total pour les articles éligibles, donc la valeur par défaut parle du total, jamais de chaque article.
Fixed-price label — par défaut “each”. Utilisé pour les offres à prix fixe.
Show prices column — activé par défaut. Masquée automatiquement pour les offres à montant en moins et pour les produits de plus de 50 variantes.
Price label — par défaut “Price”.
Show original price — activé par défaut. Barre le prix complet à côté de chaque prix réduit.
Show base row — activé par défaut. Ajoute une ligne à prix complet pour les quantités inférieures au premier palier.

Message

Code hint prefix — par défaut “Use code”. Affiché uniquement pour les réductions par code.
Linked message — texte facultatif affiché au-dessus ou en dessous du tableau.
Message position — Above ou Below. Par défaut Below.

Quantity Break Picker

La même offre sous forme de cartes d’offre tactiles que le client choisit et ajoute au panier en une seule fois.

General

Heading — par défaut “Choose your bundle”.
Card border — par défaut #d9d9d9.
Selected accent — couleur de la bordure et du bouton radio de la carte sélectionnée.
Roundness — 0–24 px. Par défaut 8.
Card padding — 4–32 px. Par défaut 14.
Card background
Card text

Cards

Show single-item card — activé par défaut. Ajoute une carte “Buy 1” au-dessus des paliers.
Single-item label — par défaut “Buy 1”.
Pre-selected tier — 0–10. Par défaut 0, ce qui garde la sélection par défaut. Ne compte que les paliers réellement affichés, donc un palier masqué n’est jamais présélectionné.
Tier label — par défaut Buy {quantity} ; {quantity} est remplacé automatiquement.
Off-each label — par défaut “off each”. Utilisé pour les offres en pourcentage.
Amount-off label — par défaut “off”. Utilisé pour les offres à montant en moins, comme chiffre total.
Fixed-price label — par défaut “each”. Utilisé pour les offres à prix fixe (prix par article).
Per-product suffix — par défaut “of the same product”. Affiché quand l’offre compte par produit.
Per-variant suffix — par défaut “of the same variant”. Affiché quand l’offre compte par variante.
Show unit prices — activé par défaut. Masqués automatiquement pour les offres à montant en moins et pour les produits de plus de 50 variantes.
Show original price — activé par défaut. Barre le prix complet au-dessus de chaque prix réduit.
Each label — par défaut “each”.
Most popular tier — 0–10. Par défaut 0 = pas d’étiquette ; 1 = le premier palier.
Most popular text — par défaut “Most popular”.
Most popular background — par défaut #1a1a1a.
Most popular text color — par défaut #ffffff.

Button

Button text — par défaut “Add to cart”.
Added text — par défaut “Added!”.
Unavailable text — par défaut “Unavailable”.
After adding to cart — Go to the cart page (la valeur par défaut), Refresh the page (pour que le thème affiche le nouveau nombre d’articles du panier) ou Stay on this page (affiche une confirmation avec un lien vers le panier).
In-cart text — par défaut {count} in cart. Affiché après l’ajout quand on reste sur la page ; {count} est le nombre d’articles ajoutés présents dans le panier.
Cart link text — par défaut “View cart”.
Button background — par défaut #1a1a1a.
Button text color — par défaut #ffffff.

Message

Code hint prefix — par défaut “Use code”. Affiché uniquement pour les réductions par code.
Linked message — texte facultatif affiché au-dessus ou en dessous des cartes.

Bundle composer

Let shoppers mix variants per tier — désactivé par défaut. Activé, le palier sélectionné affiche une ligne par article pour que les clients composent l’offre groupée. Pas affiché pour les offres par variante.
Bundle button text — par défaut “Add bundle”.
Items word — par défaut “items”. Utilisé quand un total en argent ne peut pas être affiché : “Add bundle • 3 items”.
Unresolved text — par défaut “Choose options”.
Message position — Above ou Below. Par défaut Below.

Spend More Save More

Liste tous les paliers de dépense d’une offre dépensez plus, économisez plus sur la page produit : dépensez tant, obtenez tant en moins.

General

Border color — par défaut #d9d9d9.
Roundness — 0–24 px. Par défaut 8.
Borderless — désactivé par défaut.

Header

Header background — vide utilise la valeur par défaut du design.
Header text

Body

Cell padding — 4–32 px. Par défaut 14.
Body background
Body text
Highlight unlocked tier — activé par défaut. Met en évidence le palier le plus haut que le panier a atteint.
Highlight color — par défaut #e8f5e9.

Columns

Spend label — par défaut “Spend”.
Savings label — par défaut “Get”.
Off-the-order label — par défaut “off the order”.
Off eligible items label — par défaut “off eligible items”. Utilisé à la place de l’intitulé off-the-order quand la réduction exclut certains articles.

Message

Code hint prefix — par défaut “Use code”. Affiché uniquement pour les réductions par code.
Linked message — texte facultatif affiché au-dessus ou en dessous du tableau.
Message position — Above ou Below. Par défaut Below.

Custom theme selectors

Les Sale Badges et les Price Drops trouvent leur place dans votre thème automatiquement. Sur un thème où cela ne marche pas, Theme selectors sur la page Promotions ouvre une fenêtre avec trois sélecteurs CSS facultatifs qui pointent l’application vers les éléments de votre propre thème :

Badge container in product cards — l’élément à l’intérieur de chaque carte produit où les badges s’accrochent. Une seule entrée couvre toutes les pages qui affichent des cartes produit.
Price element on the product page — l’élément qui porte le prix sur une page produit, là où le prix réduit s’affiche.
Price element in product cards — l’élément qui porte le prix à l’intérieur de chaque carte produit.

Laissez un champ vide pour garder le placement automatique. Chaque sélecteur fait au plus 200 caractères et doit être un sélecteur CSS valide — le champ le dit en ligne si ce n’est pas le cas. Un sélecteur qui ne correspond à rien revient au placement automatique, et un sélecteur qui ne contient aucun prix ne peint rien plutôt que de barrer un chiffre faux.

Comment le client le voit

Chaque bloc s’affiche sur la page produit à l’endroit où vous l’avez placé, avec les vrais paliers de l’offre. Le Quantity Break Picker ajoute en plus au panier. Quand l’offre ne couvre pas le produit que le client a sous les yeux, ou que l’offre est en pause ou terminée, le bloc n’affiche rien plutôt qu’une promesse périmée.

Limites et remarques

Un widget par produit. Quand deux offres dont l’affichage est activé couvrent le même produit, un seul widget s’y affiche. La carte Show on storefront de la réduction les compte et propose Choose which one shows. Chaque réduction continue de s’appliquer selon ses propres conditions.
Les prix se masquent au-delà de 50 variantes. La colonne des prix et les prix unitaires du Quantity Break Picker sont masqués automatiquement pour les offres à montant en moins et pour les produits de plus de 50 variantes.
Mettre l’offre en pause masque le widget — la carte indique alors “Not shown (offer paused)” et ne propose plus l’interrupteur, de sorte qu’une offre en pause ne peut jamais avoir l’air active.
L’interrupteur d’affichage ne touche que l’affichage. Désactiver Show on storefront masque le widget ; la réduction continue de s’appliquer. Pour arrêter la réduction, mettez l’offre en pause.
Les Theme selectors sont au niveau de la boutique, pas par promotion : les enregistrer change le placement de tous les Sale Badges et Price Drops de la boutique.

Pages associées

Barre d’objectif du panier — le quatrième bloc, qui montre la progression vers le palier de dépense suivant.
Réduction par quantité — la réduction derrière le tableau et le sélecteur.
Dépensez plus, économisez plus — la réduction derrière le tableau de dépense.
Liste de prix — l’autre réduction qui alimente le tableau de paliers.
App embed — nécessaire pour les Sale Badges et les Price Drops, pas pour ces blocs.