Pour afficher une table de remises progressives ou progressives sur une page produit Shopify, vous ajoutez soit un bloc app theme d'une application de remise dans l'éditeur de thème, soit vous codez manuellement la table en Liquid dans votre template produit. La route du bloc app est le chemin sans code: vous déposez le bloc sous le bouton ajouter au panier et il affiche une table de niveau 'acheter plus, économiser plus' sans toucher aux fichiers de thème. La partie qui compte vraiment est ce qui se passe après l'avoir placée. La table affichée doit rester synchronisée avec la remise qui se déclenche au checkout, et elle doit être rendue de manière sécurisée pour le SEO, sans envelopper les prix dans les balises de titre qui créent des H1 supplémentaires et endommagent silencieusement vos classements. Faites ces deux choses correctement et une table de niveau est l'une des additions les plus efficaces que vous puissiez faire à une page produit. Faites-les mal et vous montrez aux clients des prix que le checkout n'honorera pas, sur une page dont vous venez de casser la structure de titre.
Ce guide couvre pourquoi une table de niveau visible augmente la valeur moyenne des commandes, l'approche Liquid DIY et les pièges de maintenance qui la cassent, les blocs app theme par rapport au codage en dur, le vrai danger SEO de rendre les prix en tant que balises de titre, les considérations Core Web Vitals, et un exemple complet travaillé avec une table 'quantité, prix chacun, vous économisez' que vous pouvez copier.
Pourquoi afficher une table de remises progressives sur la page produit du tout?
Une remise progressive est une remise échelonnée: achetez 3 et économisez 10%, achetez 6 et économisez 15%, achetez 12 et économisez 20%. La remise peut exister parfaitement bien sans aucun affichage en vitrine. Shopify l'appliquera au checkout que le client la voie venir ou non. C'est exactement le problème. Une remise que l'acheteur ne peut pas voir est une remise qui ne peut pas changer son comportement.
La table de niveau est la moitié marchandisage de l'offre. Elle transforme une règle de prix silencieuse en une invitation visible. Un client qui est venu acheter une unité voit, en chiffres simples, qu'acheter trois réduit le prix unitaire, et acheter six le réduit davantage. C'est une incitation vers un panier plus grand, placée au moment exact de la décision, juste sous le bouton ajouter au panier.
Il y a une raison comportementale bien comprise pour laquelle cela fonctionne. Une table de niveau définit une ancre puis montre le delta 'vous économisez' par rapport à celle-ci. L'acheteur n'évalue plus un prix en isolation; il compare son choix actuel à un visiblement meilleur qui est à un ou deux unités de distance. Pour les produits consommables, stockables ou conviviaux pour les cadeaux, cette comparaison déplace de manière fiable les unités. Les acheteurs de gros et B2B s'attendent à une grille de réduction de prix comme allant de soi, et son absence se lit comme une fonctionnalité manquante.
Le hic, c'est que la table n'aide que si les acheteurs lui font confiance. La première fois qu'un client voit '6 pour 34 dollars chacun' sur la page produit et se voit ensuite facturer 40 dollars chacun au checkout, vous avez non seulement perdu cette commande. Vous leur avez appris que vos prix ne sont pas réels. C'est pourquoi l'affichage et le moteur de remise ne peuvent pas être deux systèmes séparés qui arrivent à s'accorder aujourd'hui.
IMAGE PLACEHOLDER (Image 1): Une table de niveau de remises progressives sur une page produit
Visuel suggéré: Une maquette de vitrine propre 16:9 d'une page produit Shopify. La colonne de droite affiche le titre du produit, le prix et un bouton ajouter au panier. Directement sous le bouton se trouve une table de niveau de 4 lignes avec les colonnes 'Quantité', 'Prix chacun' et 'Vous économisez'. La ligne trois (6 à 11) est surlignée en violet comme niveau actif, avec une petite note 'Vous économisez 15%'. Placeholder photo produit neutre sur la gauche. Couleurs de marque violet et or, accents UI moderne plat, pas de vrais logos.
Quelles sont les façons d'afficher une table de niveau sur une page produit Shopify?
Il y a trois routes pratiques, à peu près dans l'ordre du plus manuel au plus maintenable.
Option 1: coder manuellement la table en Liquid
Vous éditez votre template produit (ou une section ou snippet qu'il affiche) et écrivez vous-même le balisage de la table. Vous codez en dur les valeurs de niveau en HTML statique, ou vous les lisez à partir d'un metafield produit et les bouchez en Liquid. Cela vous donne un contrôle total sur le balisage et le style, et c'est véritablement la bonne réponse pour un magasin avec un ou deux produits et un développeur disponible.
Le coût est la maintenance, et c'est plus élevé qu'il ne le paraît. Une table codée en dur est une deuxième copie de votre tarification qui vit dans votre thème, déconnectée de la remise qui s'exécute réellement. Chaque fois que vous changez un niveau, vous le changez à deux endroits: la remise et le thème. Manquez-en un et la table ment. Les commerçants sur les forums Shopify décrivent exactement ce modèle, construisant une table HTML construite à la main pour l'affichage du niveau puis se battant pour la maintenir alignée avec une règle de remise qui vit ailleurs. Cela fonctionne jusqu'au jour où cela ne le fait pas silencieusement.
Option 2: une table Liquid pilotée par metafield
Une version DIY plus robuste stocke les données de niveau dans un metafield produit et les affiche avec une boucle Liquid, donc la table est basée sur les données plutôt que codée en dur par produit. C'est mieux; vous éditez les niveaux dans un seul endroit structuré. Mais vous possédez toujours le rendu, le style réactif, le JavaScript de mise à jour en direct, et surtout le travail de maintenir les valeurs de metafield égales aux valeurs que votre remise utilise. Rien ne vous impose cette égalité.
Option 3: un bloc app theme d'une application de remise
La route sans code utilise le cadre d'extension d'app de thème Shopify. Selon la documentation des extensions d'app de thème Shopify, ces extensions 'permettent aux commerçants d'ajouter facilement des éléments dynamiques à leurs thèmes sans avoir à interagir avec les templates ou le code Liquid', et la documentation liste 'prix, évaluations' parmi les éléments dynamiques pour lesquels elles sont construites. Une table de niveau est précisément ce genre d'élément.
L'app livre un bloc app. Dans l'éditeur de thème, vous ouvrez votre template produit, cliquez sur Ajouter un bloc dans une section, choisissez le bloc table de niveau de l'app, et positionnez-le où vous voulez, généralement juste sous le bouton ajouter au panier. Vous ne modifiez jamais le code du thème. La documentation Shopify confirme que les commerçants peuvent 'ajouter, supprimer et réorganiser les blocs app au niveau de la section' directement dans l'éditeur, et que les blocs app 'héritent des propriétés de style du thème, telles que la typographie et les couleurs', de sorte que la table correspond à vos polices et conception sans CSS personnalisé.
L'avantage structural important est qu'un bloc app bien construit lit ses valeurs de niveau à partir de la même source de vérité que la remise, de sorte que l'affichage et les mathématiques du checkout ne peuvent pas dévier. C'est tout le jeu, et c'est la raison pour laquelle cette route gagne pour la plupart des magasins.
Blocs app vs blocs app embed: lequel est la table de niveau?
Le cadre d'extension d'app de thème Shopify a deux types de blocs, et cela vaut la peine de savoir lesquels, car la table de niveau en est un et pas l'autre.
Un bloc app utilise target: section dans son schéma. C'est un élément visible et positionné qu'un commerçant dépose à un endroit spécifique dans une section, et il peut pointer vers des sources dynamiques comme le produit actuel. Selon la documentation de configuration, les blocs app sont ajoutés, supprimés et réorganisés dans l'éditeur de thème et peuvent 'pointer vers une source dynamique pour afficher les données de différents produits lors de leur affichage sur la page.' Cette dernière partie est exactement ce qu'une table de niveau a besoin: elle doit afficher les niveaux pour le produit que la page affiche. Donc la table de niveau est un bloc app.
Un bloc app embed utilise target: head, compliance_head, ou body. Shopify 'affiche et injecte les blocs app embed avant les balises de fermeture head et body', et ils sont destinés aux éléments flottants ou superposés comme les bulles de chat, les badges et les balises d'analyse ou SEO, pas pour le contenu placé à un point précis de la mise en page. Les blocs app embed sont désactivés par défaut et les commerçants les activent sous Paramètres du thème, Incorporations d'app. Une table de niveau n'est pas un bloc embed, car elle doit vivre à une position spécifique dans la mise en page du produit, pas flotter sur la page.
Une mise en garde qui appartient à chaque guide honnête: les blocs app ne sont pris en charge que dans les thèmes Online Store 2.0, ceux qui utilisent les templates JSON. Le documentation d'intégration indique que 'les blocs app ne sont pris en charge que dans les thèmes contenant des templates JSON, également connus sous le nom de thèmes Online Store 2.0.' Si vous êtes sur un thème vintage beaucoup plus ancien, la sélection de bloc glisser-déposer ne sera pas disponible et vous retournerez à une approche Liquid ou une mise à niveau de thème. La plupart des magasins sur un thème Shopify moderne sont déjà sur Online Store 2.0.
IMAGE PLACEHOLDER (Image 2): Ajouter le bloc app table de niveau dans l'éditeur de thème
Visuel suggéré: Une maquette de style capture d'écran 16:9 de l'éditeur de thème Shopify. Le panneau de gauche affiche l'arborescence des sections pour un template produit avec une affordance 'Ajouter un bloc' développée, révélant une option de bloc 'Table de remises progressives' d'une app sous un titre Apps. Le centre affiche l'aperçu de produit en direct avec la table de niveau apparaissant sous le bouton ajouter au panier. Chrome administrateur de style Polaris, accent violet sur le bloc sélectionné. Référez la documentation/screenshot-manifest.md emplacement volume-discounts-step-3 pour capturer le vrai écran plus tard.
Pourquoi les tables de niveau codées manuellement se cassent silencieusement (le piège de la collection)
Voici le mode de défaillance qui génère les messages du forum les plus frustrés, et ce n'est pas un bug dans votre balisage de table. C'est une discordance entre la façon dont vous pensez que la remise est limitée et la façon dont Shopify compte réellement.
Disons que vous construisez une table codée à la main sur une page produit de chaise de salle à manger: 3 à 5 chaises économisez 15%, 6 à 9 économisez 18%, 10 ou plus économisez 20%. Vous la sauvegardez avec une remise Shopify native limitée à votre collection 'Chaises'. La table semble correcte. Ensuite, deux choses se passent silencieusement mal.
D'abord, les remises de collection native comptent les unités totales à travers chaque produit de la collection, pas les unités de la seule chaise sur la page. Donc un acheteur peut déclencher votre niveau 'acheter 3' en ajoutant un de chacune de trois chaises différentes, ce qui n'est pas ce que la table sur une seule page de chaise implique. La table affichée est écrite du point de vue d'un produit; la remise fait des mathématiques de collection. Ils décrivent des offres différentes.
Deuxièmement, l'adhésion de la remise change sous vous. Le moment où vous ajoutez un nouveau produit à cette collection, ou le moment où un produit sort, l'ensemble des articles qui comptent vers le seuil change. Les commerçants ont signalé exactement cela sur les forums: ajouter un produit à une collection change silencieusement la logique de remise, et rien ne vous avertit. Votre table codée à la main montre toujours les anciens niveaux. Il décrit maintenant une remise qui n'existe plus sous la forme que le client voit.
C'est la raison fondamentale pour laquelle une table de niveau ne devrait pas être un artefact statique que vous maintenez à la main. La table est une vue d'une remise. Si la remise peut changer de portée ou d'adhésion sans toucher à la table, les deux vont dévier, et la dérive est invisible jusqu'à ce qu'un client ou votre propre commande de test la fasse remonter. La correction est structurelle: afficher les niveaux par produit à partir de la même définition que la remise utilise, et compter la manière que la table prétend compter, par produit et ses variantes, pas regroupées dans une collection entière. C'est le modèle de comptage couvert dans les remises de volume par produit, et c'est la différence entre une table qui est toujours vraie et une qui est vraie jusqu'à mardi.
Le piège SEO: ne jamais afficher les prix en tant que balises de titre
Celle-ci est une véritable mine terrestre documentée, et elle vient directement des avis des apps. Un commerçant a signalé qu'une application de remise populaire affichait ses prix sur la page à l'intérieur de balises de titre, ce qui créait plusieurs éléments H1 concurrents sur chaque page produit, et le support a refusé de le réparer. Ce n'est pas une plainte cosmétique. C'est une régression SEO incorporée dans le widget.
Voici pourquoi cela compte. Les moteurs de recherche utilisent votre hiérarchie de titres pour comprendre une page. Le H1 est censé être le seul titre primaire de la page, presque toujours le nom du produit. Le reste des titres, H2 et H3, décrivent la structure qui la sous-tend. Lorsqu'un widget de remise enveloppe '6 pour 34 dollars' dans un ou parce que c'était un moyen paresseux de rendre le nombre grand et gras, il injecte des titres qui ne signifient rien sémantiquement et diluent les titres qui le font. Plusieurs H1 sur une page brouillent le signal sur le sujet de la page. Les prix et les chiffres 'vous économisez' sont des données, pas une structure de document. Ils appartiennent à des cellules de tableau, des spans ou des paragraphes stylisés avec CSS, jamais dans des éléments de titre.
La bonne façon d'afficher une table de niveau est du HTML ennuyeusement correct: un vrai Si vous évaluez une application de remise, c'est une chose concrète à vérifier avant d'installer. Affichez la source sur une page produit de démonstration, ou exécutez-la via l'inspecteur d'accessibilité ou de SEO de votre navigateur, et confirmez que le widget n'ajoute pas d'éléments de titre. C'est un test de cinq minutes qui vous sauve d'un déclin de classement lent et difficile à diagnostiquer. Commercialiser l'absence de ce problème est jeu équitable, car tellement de widgets se trompent. Une table de niveau de page produit est petite, mais elle s'affiche sur vos pages à plus haute intention et plus de trafic, donc son coût de performance s'ajoute. Deux métriques Core Web Vitals sont celles à surveiller. Cumulative Layout Shift (CLS) est le premier. Une table qui apparaît un moment après que le reste de la page ait peint pousse le bouton ajouter au panier vers le bas et accumule le changement de mise en page. La correction consiste à afficher la table côté serveur dans le HTML initial, dans la mesure du possible, afin que l'espace soit réservé dès la première peinture, plutôt que de l'injecter tard avec JavaScript après que la page se soit établie. Les valeurs d'une table de niveau sont connues au moment du rendu; il n'y a aucune raison qu'elle arrive en dernier. Largest Contentful Paint (LCP) et le budget général de poids sont le second. Un widget qui charge un lourd bundle JavaScript, sa propre police Web, ou un morceau de code de framework pour dessiner ce qui est fondamentalement une petite table dépense votre budget de vitesse sans prudence. Le cadre d'extension d'app de thème Shopify aide ici: lorsqu'un bloc app est présent sur une page, sa feuille de style et son script sont chargés une fois via les propres balises du cadre, et si un commerçant ajoute plusieurs blocs qui référencent le même fichier, Shopify inclut ce fichier une seule fois par page. Une bonne table de niveau s'appuie sur cela, expédie un CSS et JS minimes, et fait le levage lourd côté serveur. Le comportement de mise à jour en direct mérite aussi une note. Une bonne table de niveau met en évidence le niveau actif à mesure que l'acheteur change la quantité, sans rechargement de page. Cette interaction est peu coûteuse quand c'est quelques lignes de JavaScript vanilla basculant une classe, et chère quand c'est un re-render de framework. Gardez-le léger. Le point de la table est de vendre plus d'unités, et une page qui est lente à interagir vend moins. Construisons un concret. Une marque de suppléments vend un bac de protéine à 40 dollars. Ils veulent récompenser l'accumulation du même bac, comptée par produit à travers ses saveurs, avec ces niveaux: La table sur la page produit, placée directement sous le bouton ajouter au panier, se lit comme ceci. La colonne 'vous économisez' est ce qui fait la persuasion. Un acheteur qui ajoute 6 bacs voit la ligne '6 à 11' saillir comme son niveau actif, à 34 dollars chacun, économisant 48 dollars contre l'achat de six au prix plein. La ligne ci-dessus et ci-dessous restent visibles, de sorte que le niveau suivant ('juste six de plus et il tombe à 32 chacun') est toujours en vue. Cette étape suivante visible est le mécanisme. C'est la même raison pour laquelle les grilles de prix de gros ont toujours été imprimées comme des grilles. Les deux règles du reste de ce guide s'appliquent à cette table exacte. D'abord, les valeurs de la colonne 'prix chacun' doivent être les valeurs que la remise facture réellement, comptées par produit à travers les variantes de saveur du bac, pas regroupées avec des produits non liés. Deuxièmement, aucune de ces cellules ne peut être une balise de titre. Le 34 dollars est une cellule de tableau stylisée pour sembler importante, pas un Voici la séquence fiable pour la route du bloc app, qui est celle que la plupart des magasins devraient utiliser. Les blocs app nécessitent un thème de template JSON. Si vous êtes sur un thème Shopify actuel, vous êtes presque certainement admissible. Si vous êtes sur un thème vintage, planifiez d'abord une mise à jour de thème, ou utilisez une approche Liquid en attendant. Définissez vos remises progressives dans la remise elle-même: les points de rupture, les prix ou pourcentages unitaires, et le mode de comptage (comptez les variantes de ce produit ensemble, pas la collection entière). C'est la seule source de vérité. Tout ce que le client voit doit en découler. Ouvrez votre template produit dans l'éditeur de thème, choisissez Ajouter un bloc à l'intérieur de la section informations produit, et sélectionnez le bloc table de niveau de l'app. Faites-le glisser directement sous le bouton ajouter au panier. Parce que les blocs app héritent de la typographie et des couleurs du thème, il devrait correspondre à votre conception immédiatement; ajustez seulement l'espacement ou l'alignement si le bloc expose ces paramètres. Ajoutez le produit à un vrai panier de test à une quantité qui franchit une limite de niveau, par exemple 6 unités, et confirmez que le prix que la table a montré est le prix au checkout, y compris via un checkout accéléré comme Shop Pay. C'est l'étape qui capture la dérive avant les clients. Affichez la source de la page produit et confirmez que le widget n'a ajouté aucune balise de titre et n'a pas déplacé le bouton ajouter au panier lors de son chargement. Un passage rapide dans un inspecteur de SEO ou d'accessibilité confirme un H1, le titre du produit, avec la table de niveau vivant dans une table ou une liste, pas dans des titres. Si votre remise est limitée, ajoutez et supprimez un produit de la collection ou du groupe pertinent et vérifiez à nouveau que la table de niveau sur votre produit cible montre toujours les niveaux que vous avez l'intention. C'est où les tables maintenues à la main échouent; une offre correctement limitée par produit ne le fait pas. Si vous préférez ne pas maintenir une table codée à la main qui s'éloigne de votre remise, ou auditer le HTML d'un widget pour les balises de titre égarées, c'est le problème spécifique Stackable a été construit pour gérer, honnêtement et dans les vraies règles de Shopify. Installez Stackable gratuitement et voyez la table de page produit et le total du checkout conviennent au cent à usestackable.com/pricing. Trouvez les réponses aux questions courantes Ajoutez un bloc app theme d'une application de remise dans l'éditeur de thème, en le positionnant sous le bouton ajouter au panier, ou codez la table en Liquid dans votre template produit. La route du bloc app ne nécessite pas de code et, dans une app bien construite, lit les mêmes valeurs de niveau que le checkout utilise. L'exigence essentielle est que les prix affichés correspondent à ce que le checkout facture et que la table n'utilise pas de balises de titre. Oui, si votre thème est Online Store 2.0 et que vous utilisez une application de remise qui propose un bloc app theme. L'éditeur de thème Shopify vous permet d'ajouter, de supprimer et de réorganiser les blocs app visuellement, sans code de thème. Le codage manuel d'une table en Liquid nécessite une aisance de développeur, et cela ajoute une maintenance continue car la table est alors séparée de la remise et doit être maintenue en synchronisation manuellement. Seulement si elle est mal construite. Le vrai danger est un widget qui affiche les prix à l'intérieur de balises de titre, ce qui crée des éléments H1 ou H2 supplémentaires et dilue la structure de titre de votre page. Une table correctement construite place les prix dans des cellules de tableau ou des spans stylisés avec CSS, en conservant un seul H1 (votre titre de produit). Vérifiez toute app en visualisant la source sur une page de démonstration et en confirmant qu'elle n'ajoute pas d'éléments de titre. The team building Stackable, the reliability-first bulk and volume discount app for Shopify. We write about discount stacking, Shopify Functions, and how to run promotions that hold up at checkout. 13 min read 12 min read 9 min read Nous utilisons des cookies essentiels pour faire fonctionner ce site et, uniquement avec votre autorisation, des cookies d'analyse pour comprendre le trafic. Consultez notre Politique de cookies. (ou une liste stylisée) dont les cellules contiennent les quantités et les prix, avec le poids visuel appliqué par CSS, pas par les balises de titre. Les chiffres peuvent être aussi grands et gras que votre designer le souhaite. Ils ne doivent tout simplement pas prétendre être des titres de page. Les propres conseils de Shopify pour les widgets en vitrine dans le cadre d'extension d'app de thème pointent dans la même direction, et en interne la règle que nous nous imposons est simple: les widgets en vitrine doivent être sécurisés pour le SEO, sans balises de titre injectées et pas de changement de mise en page.
Core Web Vitals: une table de niveau ne devrait pas vous coûter de la vitesse
Exemple complet: une table 'quantité, prix chacun, vous économisez'
. Suivez ces deux règles et cette table est sûre à expédier sur chaque page produit du catalogue.Comment le configurer, étape par étape
1. Confirmez que votre thème est Online Store 2.0
2. Définissez les niveaux une fois, dans la remise
3. Ajoutez le bloc app table de niveau dans l'éditeur de thème
4. Vérifiez que l'affichage égale les mathématiques du checkout
5. Vérifiez la structure de titre et la stabilité de la mise en page
6. Testez le cas limite de la collection
IMAGE PLACEHOLDER (Image 3): L'affichage et le checkout s'accordent
Visuel suggéré: Une illustration partagée 16:9. Le panneau de gauche étiqueté 'Page produit' affiche la table de niveau avec la ligne 6 unités surlignée à 34,00 $ chacune. Le panneau de droite étiqueté 'Checkout' affiche les mêmes 6 unités facturées à 34,00 $ chacune avec un badge de coche verte lisant 'Même prix.' Une seule icône de chaîne ininterrompue lie les deux panneaux. Ci-dessous, une bande de caption se lit 'Une source de vérité: l'affichage égale le checkout.' Couleurs de marque violet et or, vecteur plat, pas de photographie.
Exécutez ceci de manière fiable avec Stackable
L'essentiel
Articles connexes
Questions fréquentes
Stackable Team
Related Posts
Acheter 1, Obtenir le 2e à 50% de réduction sur Shopify: L'astuce « Ne pas appliquer la réduction aux N premières quantités » et ses limites
Limite de 100 produits de Shopify pour Buy X Get Y : comment faire un 3 pour 2 dans toute votre gamme
Shopify vous permet maintenant de combiner plusieurs remises produit sur le même article (2026) : ce qui a changé et comment configurer