För att visa en volym- eller rabatttabell på en Shopify-produktsida lägger du antingen till ett tema-appblock från en rabattapp i temaredigeraren, eller koder tabellen direkt i Liquid inuti din produktmall. Appblock-vägen är den kodlösa vägen: du släpper blocket under knappen för att lägga till i varukorg och det renderar en "köp mer, spara mer"-nivåtabell utan att redigera temafiler. Den del som faktiskt spelar roll är vad som händer efter att du placerar den. Den visade tabellen måste hålla sig synkroniserad med rabatten som utlöses vid checkouten, och den måste renderas SEO-säkert, utan att omsluta priser i rubriktaggar som skapar extra H1:or och tyst skadar dina rankingar. Få dessa två saker rätt och en nivåtabell är en av de högsta-användbara tillägg du kan göra på en produktsida. Få dem fel och du visar kunderna priser som checkouten inte kommer att acceptera, på en sida vars rubrikstruktur du just bröt.
Den här guiden täcker varför en synlig nivåtabell lyfter genomsnittligt ordervärde, DIY Liquid-metoden och underhållsfällorna som bryter den, tema-appblock kontra hårdkodning, den verkliga SEO-faran med att rendera priser som rubriktaggar, Core Web Vitals-överväganden och ett komplett arbetande exempel med en "kvantitet, pris varje, du sparar"-tabell som du kan kopiera.
Varför visa en volymrabatttabell på produktsidan överhuvudtaget?
En volymrabatt är en nivårabatt: köp 3 och spara 10 procent, köp 6 och spara 15 procent, köp 12 och spara 20 procent. Rabatten kan existera perfekt väl utan någon storefront-display. Shopify kommer att tillämpa den vid checkouten oavsett om kunden någonsin ser den komma. Det är exakt problemet. En rabatt som köparen inte kan se är en rabatt som inte kan ändra deras beteende.
Nivåtabellen är försäljningsdelen av erbjudandet. Den förvandlar en tyst pris regel till en synlig inbjudan. En kund som kom för att köpa en enhet ser, i tydliga siffror, att köp tre minskar per-enhetspriset, och köp sex minskar det ytterligare. Det är en knuff mot en större varukorg, placerad vid den exakta beslutsmomenten, strax under knappen för att lägga till i varukorg.
Det finns en väl förstådd beteendemässig anledning till att det här fungerar. En nivåtabell sätter ett ankare och visar sedan "du sparar"-delta mot det. Köparen utvärderar inte längre ett pris isolerat; de jämför sitt nuvarande val med ett synligt bättre som är en eller två enheter bort. För förbrukningsbar, lagringsbar eller gåvvänlig produkter flyttar denna jämförelse tillförlitligt enheter. Grossist- och B2B-köpare förväntar sig ett pris bryta nätnätgrid som en självklarhet, och dess frånvaro läses som en funktion som saknas.
Fångsten är att tabellen bara hjälper om köpare litar på den. Första gången en kund ser "6 för 34 dollar varje" på produktsidan och får sedan debiterat 40 dollar varje vid checkouten har du inte bara förlorat den ordern. Du har lärt dem att dina priser inte är verkliga. Vilket är varför visningen och rabattmotorn inte kan vara två separata system som råkar överenskomma idag.
BILDPLATSHÅLLARE (Bild 1): En volymrabatttabell på en produktsida
Föreslagen visuell: En ren 16:9 storefront-mockup av en Shopify-produktsida. Högra kolumnen visar produkttitel, pris och en knapp för att lägga till i varukorg. Direkt under knappen sitter en 4-rad nivåtabell med kolumner "Kvantitet," "Pris varje" och "Du sparar." Rad tre (6 till 11) är markerad i violett som den aktiva nivån, med en liten anteckning "Du sparar 15%". Neutral produktfoto platshållare på vänster. Varumärkesfärger violett och guldaccenter, platt modern gränssnitt, inga riktiga logotyper.
Vilka är sätten att visa en nivåtabell på en Shopify-produktsida?
Det finns tre praktiska vägar, i ungefärlig ordning från mest manuell till mest underhållsbar.
Alternativ 1: koda tabellen direkt i Liquid
Du redigerar din produktmall (eller en sektion eller snippet den renderar) och skriver tabellmarkeringen själv. Du kan antingen hårdkoda nivåvärdena som statisk HTML, eller läsa dem från en produktmetafält och slinga över dem i Liquid så den är datadrivet. Detta ger dig total kontroll över markeringen och stil, och det är genuint det rätta svaret för en butik med en eller två produkter och en utvecklare tillgänglig.
Kostnaden är underhåll, och det är högre än det ser ut. En hårdkodad tabell är en andra kopia av din prissättning som lever i ditt tema, frånkopplad från rabatten som faktiskt körs. Varje gång du ändrar en nivå ändrar du den på två ställen: rabatten och temat. Missa ett och tabellen ljuger. Handlare på Shopify-forumen beskriver exakt detta mönster, bygger en handbyggd HTML-tabell för nivåvisningen och kämpar sedan för att hålla den anpassad till en rabattregel som finns någon annanstans helt. Det fungerar tills dagen det tyst inte gör det.
Alternativ 2: en metafält-driven Liquid-tabell
En mer robust DIY-version lagrar nivådata i en produktmetafält och renderar den med en Liquid-slinga, så tabellen är datadrivet snarare än hårdkodad per produkt. Det är bättre; du redigerar nivåer på en strukturerad plats. Men du äger fortfarande renderingen, responsiv stil, live-uppdaterings JavaScript och avgörande jobbet att hålla metafältsvärdena lika med de värden din rabatt använder. Ingenting tvingar denna jämlikhet på dig.
Alternativ 3: ett tema-appblock från en rabattapp
Den kodlösa vägen använder Shopify:s tema-appextensions ramverk. Enligt Shopify:s tema-appextensions dokumentation tillåter dessa tillägg "handlare att enkelt lägga till dynamiska element i sina teman utan att behöva interagera med Liquid-mallar eller kod," och dokumenten listar "priser, betyg" bland de dynamiska element de är byggda för. En nivåtabell är exakt denna typ av element.
Appen levereras med ett appblock. I temaredigeraren öppnar du din produktmall, klickar på Lägg till block i en sektion, väljer appens nivåtabel-block och placerar det var du vill, vanligtvis direkt under knappen för att lägga till i varukorg. Du redigerar aldrig temakod. Shopify:s dokument bekräftar att handlare kan "lägga till, ta bort och sortera om appblock på sekcionsnivå" direkt i redigeraren, och att appblock "ärver stilegenskaper från temat, såsom typografi och färger," så tabellen matchas dina teckensnitt och design utan anpassad CSS.
Den viktiga strukturella fördelen är att ett väl byggt appblock läser sina nivävärden från samma sanningskälla som rabatten, så visningen och checoutmatematiken kan inte avvika. Det är hela spelet, och det är anledningen till att denna väg vinner för de flesta butiker.
Appblock kontra appembedblock: vilket är nivåtabellen?
Shopify:s tema-appextensions ramverk har två typer av block, och det är värt att veta vilket är vilket, eftersom nivåtabellen är en av dem och inte den andra.
Ett appblock använder target: section i sitt schema. Det är ett synligt, positionerat element som en handlare släpper in på en specifik plats inuti en sektion, och det kan peka på dynamiska källor såsom den aktuella produkten. Per Shopify:s konfigurationsdokumentation läggs appblock till, tas bort och sorteras om i temaredigeraren och kan "peka på en dynamisk källa för att visa data för olika produkter när de visas på sidan." Den sista delen är exakt vad en nivåtabell behöver: den måste visa nivåerna för vilken produktsida som än renderas. Så nivåtabellen är ett appblock.
Ett appembedblock använder target: head, compliance_head, eller body. Shopify "renderar och injicerar appembedblock innan de stängda head- och body-taggarna," och de är avsedda för flytande eller överlagda element såsom chattbubblor, märken och analys- eller SEO-taggar, inte för innehål placerat på en exakt punkt i layouten. Appembedblock är inaktiverade som standard och handlare slår på dem under Temainställningar, Appembeds. En nivåtabell är inte ett embedblock, eftersom det måste leva på en specifik position i produktlayouten, inte flyta över sidan.
En varning som hör hemma i varje ärlig guide: appblock stöds endast i Online Store 2.0-teman, de som använder JSON-mallar. Shopify:s onboarding-dokumentation säger att "appblock stöds endast i teman som innehåller JSON-mallar, även känt som Online Store 2.0-teman." Om du är på ett mycket äldre vintage-tema kommer drag-och-drop-blockeringen placering inte att vara tillgänglig och du är tillbaka till en Liquid-metod eller en temuppgradering. De flesta butiker på ett modernt Shopify-tema är redan på Online Store 2.0.
BILDPLATSHÅLLARE (Bild 2): Lägger till nivåtabel-appblock i temaredigeraren
Föreslagen visuell: En 16:9 skärmdump-liknande mockup av Shopify temaredigeraren. Vänster panel visar sektionstabellen för en produktmall med en "Lägg till block" affordans utökad, vilket avslöjar ett appblock-alternativ för "Volymrabatttabell" under en Apps-rubrik. Center visar live-produktförhandsgranskningen med nivåtabellen som visas under knappen för att lägga till i varukorg. Polaris-stil admin chrome, violett accent på det valda blocket. Referera till docs/screenshot-manifest.md slot volume-discounts-step-3 för att fånga den verkliga skärmen senare.
Varför handkodade nivåtabeller tyst bryter (insamlingsfällan)
Här är felläget som genererar de mest frustrerade foruminläggen, och det är inte ett fel i din tabellmarkering. Det är en oöverensstämmelse mellan hur du tror att rabatten är omfattad och hur Shopify faktiskt räknar.
Säg att du bygger en handkodad tabell på en matbordsstolprodukt sida: 3 till 5 stolar sparar 15 procent, 6 till 9 sparar 18 procent, 10 eller fler sparar 20 procent. Du stöder det med en inbyggd Shopify-rabatt omfattad till din "Stolar"-insamling. Tabellen ser korrekt ut. Sedan går två saker tyst fel.
Först räknar insamlingsomfattade inbyggda rabatter totala enheter över varje produkt i insamlingen, inte enheter på den ena stolen på sidan. Så en köpare kan utlösa din "köp 3"-nivå genom att lägga till en varje av tre olika stolar, vilket inte är vad tabellen på någon enskild stolsida antyder. Den visade tabellen är skriven från perspektivet för en produkt; rabatten gör insamlingsmatematik. De beskriver olika erbjudanden.
För det andra ändras rabattens medlemskap under dig. I det ögonblick du lägger till en ny produkt i den insamlingen, eller i det ögonblick en produkt faller ur den, skiftar uppsättningen av poster som räknas mot tröskeln. Handlare har flaggat exakt detta på forumen: att lägga till en produkt i en insamling tyst ändrar rabattlogiken, och ingenting varnar dig. Din handkodade tabell visar fortfarande de gamla nivåerna. Den beskriver nu en rabatt som inte längre existerar i den form kunden ser.
Det här är kärnsskälet till att en nivåtabell inte bör vara en statisk artefakt du underhåller för hand. Tabellen är en vy över en rabatt. Om rabatten kan ändra omfattning eller medlemskap utan att röra tabellen kommer de två att avvika, och avvikelsen är osynlig tills en kund eller din egen testorder övergår den. Fixningen är strukturell: visa per-produktnivåer från samma definition rabatten använder, och räkna på det sätt tabellen hävdar att räkna, per produkt och dess varianter, inte slagna över en hel insamling. Det är räknningsmodellen som täcks i per-produktvolymrabatter, och det är skillnaden mellan en tabell som alltid är sann och en som är sann tills tisdag.
SEO-fällan: rendera aldrig priser som rubriktaggar
Den här är en äkta, dokumenterad mina, och den kommer direkt från appöversikterna. En handlare flaggade att en populär rabattapp renderade sina på-sida-priser inuti rubriktaggar, vilket skapade flera konkurrerande H1-element på varje produktsida, och supporten vägrade att fixa det. Det är inte ett kosmetiskt klagomål. Det är en SEO-regression inbyggd i widgeten.
Här är varför det spelar roll. Sökmotorer använder din rubrikarkitektur för att förstå en sida. H1 är avsedd att vara den enda, primära titeln på sidan, nästan alltid produktnamnet. Resten av rubrikerna, H2 och H3, beskriver strukturen under den. När en rabattwidget omsluter "6 för 34 dollar" i en eller eftersom det var ett lata sätt att göra talet stort och fetstilt, injicerar det rubriker som meningslöst diluerar de som gör det. Flera H1:or på en sida gör signalen om vad sidan faktiskt handlar om grumlig. Priser och "du sparar"-figurer är data, inte dokumentstruktur. De hör hemma i tablåceller, omfång eller stycken stils med CSS, aldrig i rubrikelement.
Det rätta sättet att rendera en nivåtabell är tråkigt rätt HTML: en riktig Om du utvärderar en rabattapp är det här en konkret sak att kontrollera innan du installerar. Visa källa på en demo produktsida, eller kör den genom din webbläsares tillgänglighets- eller SEO-inspektör, och bekräfta att widgeten inte lägger till rubrikelement. Det är ett fem-minuters test som sparar dig från en långsam, svår-till-diagnos rankingminskning. Marknadsföring av frånvaron av detta problem är rättvist spel, eftersom så många widgets får det fel. En produktsida nivåtabell är liten, men den renderas på dina högsta-intent, högsta-trafik-sidor, så dess prestandakostnad förenar. Två Core Web Vitals-mätningar är de man ska se på. Kumulativ layoutförskjutning (CLS) är den första. En tabell som poppar upp ett ögonblick efter att resten av sidan har målats skjuter knappen för att lägga till i varukorg ner och samlar layoutförskjutning. Fixningen är att rendera tabellen på serversidan i den initiala HTML: en var möjligt, så att utrymmet är reserverat från första målningen, snarare än att injicera det sent med JavaScript efter att sidan sätter sig. En nivåtabells värden är kända vid renderingstid; det finns ingen anledning att det måste komma sist. Största innehållsfulla målarning (LCP) och den allmänna vikt budgeten är den andra. En widget som laddar ett tungt JavaScript-paket, sitt eget webbteckensnitt eller en bit ramverkskod för att rita vad som är fundamentalt en liten tabell spenderar din hastighetsbudget sorglöst. Shopify:s tema-appextensions ramverk hjälper här: när ett appblock är närvarande på en sida laddar dess formatmall och skript en gång via ramverkets egna taggar, och om en handlare lägger till flera block som refererar samma fil inkluderar Shopify den filen endast en gång per sida. En bra nivåtabell lutar på det, levereras minimal CSS och JavaScript och gör det tunga lyftet på serversidan. Live-uppdateringsbeteendet förtjänar en notering också. En fin nivåtabell markerar den aktiva nivån när köparen ändrar kvantiteten, utan sidomladdning. Den interaktionen är billig när den är några rader vanlig JavaScript som växlar en klass, och dyr när det är en ramverksomrendering. Håll den lätt. Poängen med tabellen är att sälja fler enheter, och en sida som är långsam att interagera med säljer färre. Låt oss bygga en konkret. Ett proteinvarumärke säljer ett protein-kärl för 40 dollar. De vill belöna lagring på samma kärl, räknat per produkt över dess smaker, med dessa nivåer: Tabellen på produktsidan, placerad direkt under knappen för att lägga till i varukorg, läser så här. "Du sparar"-kolumnen är det som gör övertygelsen. En köpare som lägger till 6 kärl ser raden "6 till 11" markerad som sin aktiva nivå, på 34 dollar varje, sparar 48 dollar mot att köpa sex till fullt pris. Raden ovan och nedan förblir synlig, så nästa nivå ("bara sex till och det faller till 32 varje") är alltid i vy. Det synliga nästa steg är mekanismen. Det är samma anledning till att grossistprisnät alltid har skrivits ut som nätnät. De två reglerna från resten av den här guiden gäller denna exakta tabell. För det första måste värdena i "pris varje"-kolumnen vara de värden rabatten faktiskt debiterar, räknat per produkt över kärlens smakvärianter, inte slagna över orelaterade produkter. För det andra kan ingen av dessa celler vara en rubriktagg. 34 dollar är en tablacell stils för att se framträdande, inte en Här är den tillförlitliga sekvensen för appblock-vägen, som är den som de flesta butiker bör använda. Appblock kräver ett JSON-mall tema. Om du är på ett nuvarande Shopify-tema kvalificerar du dig nästan säkert. Om du är på ett vintage-tema, planera en temuppgradering först, eller använd en Liquid-metod på mellanstadiet. Ställ in dina volymbrytpunkter i rabatten själv: brytpunkterna, per-enhetspreiser eller procentsatser och räknningsläget (räkna denna produkts varianter tillsammans, inte hela insamlingen). Det här är den enda sanningen källan. Allt kunden ser bör härleda härifrån. Öppna din produktmall i temaredigeraren, välj Lägg till block inuti produktinformationssektionen och välj appens nivåtabel-block. Dra den direkt under knappen för att lägga till i varukorg. Eftersom appblock ärver temats typografi och färger bör det matcha din design omedelbar; justera endast avstånd eller justering om blocket exponerar dessa inställningar. Lägg till produkten i en riktig testvarukorg på en kvantitet som korsar en nivågräns, till exempel 6 enheter, och bekräfta att priset tabellen visade är priset vid checkout, inklusive genom en accelererad checkout som Shop Pay. Det här är steget som fångar avvikelse innan kunderna gör det. Visa produktsidans källa och bekräfta att widgeten inte lade till rubriktaggar och inte skjöt knappen för att lägga till i varukorg runt när den laddade. En snabb passning i en SEO- eller tillgänglighetsgranskare bekräftar en H1, produkttiteln, med nivåtabellen som lever i en tabell eller lista, inte i rubriker. Om din rabatt är omfattad lägger du till och tar bort en produkt från den relevanta insamlingen eller gruppen och återkontrollerar att nivåtabellen på din målprodukt fortfarande visar de nivåer du avser. Det här är där handmåttade tabeller misslyckas; ett korrekt per-produkt-omfattat erbjudande gör det inte. Om du hellre inte vill underhålla en handkodad tabell som avviker från din rabatt, eller granska en widgets HTML för vilsekomna rubriktaggar, är det här den specifika problemet Stackable byggdes för att hantera, ärligt och inom Shopify:s verkliga regler. Installera Stackable gratis och se produktsidans tabell och checkoutsumman överenskomma till cent på usestackable.com/pricing. Hitta svar på vanliga frågor Lägg till ett tema-appblock från en rabattapp i temaredigeraren och placera det under knappen för att lägga till i varukorg, eller koda tabellen direkt i Liquid inuti din produktmall. Appblock-vägen kräver ingen kod och läser, i en väl byggd app, samma nivävärden som checkouten använder. Det väsentliga kravet på båda sätten är att de visade priserna motsvarar vad checkouten debiterar och att tabellen inte använder rubriktaggar. Ja, om ditt tema är Online Store 2.0 och du använder en rabattapp som levereras med ett tema-appblock. Shopify:s temaredigerare låter dig lägga till, ta bort och sortera om appblock visuellt, utan någon temakod. Att koda en tabell direkt i Liquid kräver utvecklarvana, och det lägger till löpande underhåll eftersom tabellen då är skild från rabatten och måste hållas synkroniserad manuellt. Bara om den är byggd dåligt. Den verkliga faran är en widget som renderar priser inuti rubriktaggar, vilket skapar extra H1- eller H2-element och försvagar din sidas rubrikstruktur. En korrekt byggd tabell placerar priser i tablåceller eller omfång med CSS-stil, vilket håller en enda H1 (din produkttitel). Kontrollera vilken app som helst genom att visa källa på en demosida och bekräfta att den inte lägger till rubrikelement. 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 Vi använder nödvändiga cookies för att driva den här webbplatsen, och, bara med ditt tillstånd, analyscookies för att förstå trafiken. Läs vår Cookiepolicy. (eller en stiliserad lista) vars celler håller kvantiteter och priser, med visuell vikt applicerad genom CSS, inte genom rubriktaggar. Siffrorna kan se så stora och feta ut som din designer vill. De måste bara inte låtsas vara sida rubriker. Shopify:s egen vägledning för storefront-widgets i tema-appextensions ramverket pekar i samma riktning, och internt är regeln vi håller oss till enkel: storefront-widgets måste vara SEO-säkra, utan injicerade rubriktaggar och ingen layoutförskjutning.
Core Web Vitals: en nivåtabell bör inte kosta dig hastighet
Arbetande exempel: en "kvantitet, pris varje, du sparar"-tabell
. Följ dessa två regler och denna tabell är säker att leverera på varje produktsida i katalogen.Hur du ställer in den, steg för steg
1. Bekräfta att ditt tema är Online Store 2.0
2. Definiera nivåerna en gång, i rabatten
3. Lägg till nivåtabel-appblock i temaredigeraren
4. Verifiera att visningen motsvarar checkoutmatematiken
5. Kontrollera rubrikstrukturen och layoutstabiliteten
6. Testa insamlingskantfallet
BILDPLATSHÅLLARE (Bild 3): Visningen och checkouten överensstämmer
Föreslagen visuell: En 16:9 delad illustration. Vänster panel märkt "Produktsida" visar nivåtabellen med raden 6-enhet markerad på $34.00 varje. Höger panel märkt "Checkout" visar samma 6 enheter debiterade på $34.00 varje med en grön bockemblem läsande "Samma pris." En enda obruten kedjaikonen länkar de två panelerna. Nedan läses en bildtextremsa "En sanningskälla: visningen motsvarar checkouten." Varumärkesfärger violett och guld, flatt vektor, ingen fotografi.
Kör detta tillförlitligt med Stackable
Slutsatsen
Relaterade artiklar
Vanliga frågor
Stackable Team
Related Posts
Köp en, få den andra 50% rabatt i Shopify: Tricket 'Rabattera inte första N-produkter' och dess gränser
Shopifys 100-produktsgräns för Köp X Få Y: Hur du kör 3-för-2 över hela din katalog
Shopify låter dig nu stapla flera produktrabatter på samma artikel (2026): Vad som ändrades och hur du konfigurerar det