Ajouter le widget à votre thème

La remise à la caisse et le widget vitrine sont deux choses distinctes. La remise est appliquée par une Shopify Function dès qu’une campagne est publiée — elle s’applique à la caisse, que le widget soit sur votre thème ou non. Le widget rend l’offre visible pour les clients avant qu’ils n’y arrivent : un tableau des paliers de remise sur la page produit, et un court message dans le panier.

Note

Si la remise d’une campagne ne s’affiche pas sur vos pages produit alors que vous avez confirmé qu’elle s’applique à la caisse, le widget n’est presque certainement pas encore activé — les étapes ci-dessous corrigent cela.

Activer l’intégration d’application (recommandé)

C’est le moyen le plus rapide d’ajouter le widget, et il ne demande aucun placement manuel :

1. Dans l’admin Shopify, allez dans Boutique en ligne → Thèmes, puis Personnaliser votre thème actif.
2. Ouvrez Intégrations d’applications.
3. Activez Nock Quantity Breaks & BOGO.
4. Enregistrez le thème.

Accueil marque cette étape comme terminée automatiquement dès que le navigateur d’un client charge une page produit avec l’intégration activée — généralement dans la minute qui suit l’enregistrement.

Une fois activé, le widget se place lui-même : il repère votre zone de prix et d’ajout au panier sur la page produit et s’affiche juste à côté, et ajoute une courte ligne au panier et au tiroir du panier.

Ajouter le widget comme bloc (pour un placement précis)

Si le placement automatique tombe au mauvais endroit, ajoutez plutôt le bloc — il prend le pas sur le placement automatique de l’intégration :

1. Dans l’éditeur de thème, ouvrez votre modèle de page produit.
2. Ajoutez un bloc, et choisissez Nock Quantity Breaks & BOGO widget.
3. Positionnez-le où vous le souhaitez.

Position du widget et sélecteur personnalisé

L’intégration d’application et le bloc exposent tous deux les deux mêmes paramètres :

Paramètre	Ce qu’il fait
Position du widget	Auto (par défaut), Before add to cart (avant l’ajout au panier), After price (après le prix), ou Custom selector (sélecteur personnalisé).
Sélecteur CSS personnalisé	Utilisé uniquement quand la position est Custom selector — le widget s’affiche immédiatement après l’élément correspondant à ce sélecteur CSS.

Astuce

Vous pouvez aussi corriger le placement depuis l’app elle-même, sans toucher au code du thème : ouvrez ParamètresDans l’app : Settings → Widget vitrineOù le widget de remise par palier apparaît sur vos pages produit, et comment il s’y place.Dans l’app : Storefront widget, ou l’onglet EmplacementAutomatique par défaut — le widget trouve tout seul l’endroit sous votre prix et votre sélecteur de quantité. S’il se place au mauvais endroit, choisissez-le vous-même.Dans l’app : Placement d’une campagne, et utilisez le sélecteur de placement pour cliquer sur l’emplacement exact sur un aperçu en direct de votre boutique. Utilisez Revenir à l’automatiqueDans l’app : Reset to automatic pour revenir au comportement par défaut.

Ce qui s’affiche où

• La page produit reçoit le widget complet : le tableau des paliers, ou la barre de progression pour un objectif de panier, avec le style défini dans l’onglet Widget d’une campagne.
• La page et le tiroir du panier reçoivent un message plus léger — une ligne sous l’article de panier concerné indiquant ce qui a été débloqué ou ce qu’il reste pour débloquer le palier suivant.

Ensuite : créez votre première campagne pour que le widget ait quelque chose à montrer.