Para exibir uma tabela de desconto por quantidade ou volume no Shopify, voce adiciona um bloco de app de tema de um app de desconto no editor de tema, ou codifica manualmente a tabela em Liquid dentro do seu template de produto. A rota de bloco de app e o caminho sem codigo: voce coloca o bloco sob o botao de adicionar ao carrinho e ele renderiza uma tabela de faixa de "compre mais, economize mais" sem tocar nos arquivos de tema. A parte que realmente importa e o que acontece depois que voce a coloca. A tabela exibida tem que permanecer sincronizada com o desconto que e acionado no checkout, e tem que renderizar com seguranca para SEO, sem envolver precos em tags de heading que criam H1s adicionais e prejudicam silenciosamente seus rankings. Acerte essas duas coisas e uma tabela de faixa e uma das adicoes de maior alavancagem que voce pode fazer a uma pagina de produto. Erre e voce estara mostrando aos clientes precos que o checkout nao vai honrar, em uma pagina cuja estrutura de heading voce acabou de quebrar.
Este guia aborda por que uma tabela de faixa visıvel aumenta o valor medio do pedido, a abordagem faça-voce-mesmo em Liquid e as armadilhas de manutencao que a quebram, blocos de app de tema versus codificacao manual, o verdadeiro perigo de SEO de renderizar precos como tags de heading, consideracoes de Core Web Vitals, e um exemplo completo trabalhado com uma tabela "quantidade, preco cada, voce economiza" que voce pode copiar.
Por que exibir uma tabela de desconto por quantidade na pagina de produto?
Um desconto por quantidade e um desconto escalonado: compre 3 e economize 10%, compre 6 e economize 15%, compre 12 e economize 20%. O desconto pode existir perfeitamente bem sem nenhuma exibicao de vitrine. O Shopify vai aplicar no checkout independentemente de o cliente ver vindo ou nao. Esse e exatamente o problema. Um desconto que o comprador nao pode ver e um desconto que nao pode mudar seu comportamento.
A tabela de faixa e a metade de merchandising da oferta. Transforma uma regra de preco silenciosa em um convite visıvel. Um cliente que veio para comprar uma unidade ve, em numeros claros, que comprar tres reduz o preco por unidade, e comprar seis o reduz ainda mais. Esse e um empurrao para um carrinho maior, colocado no momento exato de decisao, direto sob o botao de adicionar ao carrinho.
Ha uma razao comportamental bem compreendida para isso funcionar. Uma tabela de faixa define um ancorador e entao mostra o delta de "voce economiza" contra ele. O comprador nao esta mais avaliando um preco isoladamente; esta comparando sua escolha atual com uma visıvelmente melhor que esta a uma ou duas unidades de distancia. Para produtos consumıveis, estocaveis ou amigaveis a presentes, essa comparacao move unidades de forma confiavel. Compradores de atacado e B2B esperam uma grade de desconto como questao de princıpio, e sua ausencia parece um recurso ausente.
A pegadinha e que a tabela so ajuda se os compradores confiarem nela. A primeira vez que um cliente ve "6 por 34 dolares cada" na pagina do produto e depois e cobrado 40 dolares cada no checkout, voce nao apenas perdeu esse pedido. Ensinou-os que seus precos nao sao reais. Por isso a exibicao e o motor de desconto nao podem ser dois sistemas separados que acaso concordam hoje.
PLACEHOLDER DE IMAGEM (Imagem 1): Uma tabela de faixa de desconto por quantidade em uma pagina de produto
Visualizacao sugerida: Um mockup de loja limpo em formato 16:9 de uma pagina de produto Shopify. A coluna direita mostra tıtulo do produto, preco e um botao de adicionar ao carrinho. Diretamente abaixo do botao fica uma tabela de faixa de 4 linhas com colunas "Quantidade", "Preco cada" e "Voce economiza". A linha tres (6 a 11) e destacada em violeta como a faixa ativa, com uma pequena nota "Voce esta economizando 15%". Placeholder de foto de produto neutro a esquerda. Cores de marca violeta e acentos dourados, UI moderna e plana, sem logos reais.
Quais sao as formas de exibir uma tabela de faixa em uma pagina de produto Shopify?
Existem tres rotas praticas, em ordem aproximada da mais manual para a mais mantıvel.
Opcao 1: codifique manualmente a tabela em Liquid
Voce edita seu template de produto (ou uma secao ou snippet que renderiza) e escreve o markup da tabela. Voce codifica rigidamente os valores de faixa como HTML estatico, ou os le de um metafield de produto e faz um loop sobre eles em Liquid. Isso le total controle sobre o markup e estilizacao, e e genuinamente a resposta certa para uma loja com um ou dois produtos e um desenvolvedor na chamada.
O custo e manutencao, e e maior do que parece. Uma tabela codificada manualmente e uma segunda copia de seu preco que vive em seu tema, desconectada do desconto que realmente e executado. Toda vez que voce muda uma faixa, voce muda em dois lugares: o desconto e o tema. Perca um e a tabela mente. Comerciantes nos foruns do Shopify descrevem exatamente esse padrao, construindo uma tabela HTML construıda manualmente para a exibicao de faixa e depois lutando para mante-la alinhada com uma regra de desconto que vive em outro lugar completamente. Funciona ate o dia em que silenciosamente nao funciona.
Opcao 2: uma tabela Liquid orientada por metafield
Uma versao faça-voce-mesmo mais robusta armazena os dados de faixa em um metafield de produto e os renderiza com um loop Liquid, para que a tabela seja orientada por dados em vez de codificada rigidamente por produto. Isso e melhor; voce edita faixas em um lugar estruturado. Mas ainda possui a renderizacao, a estilizacao responsiva, o JavaScript de atualizacao em tempo real, e crucialmente o trabalho de manter os valores do metafield iguais aos valores que seu desconto usa. Nada força essa igualdade para voce.
Opcao 3: um bloco de app de tema de um app de desconto
A rota sem codigo usa a estrutura de extensao de app de tema do Shopify. De acordo com a documentacao de extensoes de app de tema do Shopify, essas extensoes "permitem que comerciantes adicionem facilmente elementos dinamicos aos seus temas sem ter que interagir com templates Liquid ou codigo," e os documentos listam "precos, avaliacoes" entre os elementos dinamicos para os quais foram construıdas. Uma tabela de faixa e precisamente esse tipo de elemento.
O app fornece um bloco de app. No editor de tema voce abre seu template de produto, clica Adicionar bloco em uma secao, escolhe o bloco de tabela de faixa do app, e o posiciona onde quiser, tipicamente direto sob o botao de adicionar ao carrinho. Voce nunca edita codigo de tema. Os documentos do Shopify confirmam que comerciantes podem "adicionar, remover e reordenar blocos de app no nıvel da secao" diretamente no editor, e que blocos de app "herdam propriedades de estilo do tema, como tipografia e cores," para que a tabela corresponda as suas fontes e design sem CSS customizado.
A vantagem estrutural importante e que um bloco de app bem construıdo le seus valores de faixa da mesma fonte de verdade que o desconto, para que a exibicao e a matematica de checkout nao possam derivar. Esse e todo o jogo, e e a razao pela qual essa rota ganha para a maioria das lojas.
Blocos de app versus blocos de embed de app: qual e a tabela de faixa?
A estrutura de extensao de app de tema do Shopify tem dois tipos de blocos, e vale a pena saber qual e qual, porque a tabela de faixa e um deles e nao o outro.
Um bloco de app usa target: section em seu schema. E um elemento visıvel e posicionado que um comerciante coloca em um local especıfico dentro de uma secao, e pode apontar para fontes dinamicas como o produto atual. De acordo com a documentacao de configuracao do Shopify, blocos de app sao adicionados, removidos e reordenados no editor de tema e podem "apontar para uma fonte dinamica para mostrar dados para diferentes produtos conforme eles sao exibidos na pagina." Essa ultima parte e exatamente o que uma tabela de faixa precisa: ela tem que mostrar as faixas para qualquer produto que a pagina esta renderizando. Entao a tabela de faixa e um bloco de app.
Um bloco de embed de app usa target: head, compliance_head, ou body. O Shopify "renderiza e injeta blocos de embed de app antes das tags de fechamento head e body," e eles sao destinados a elementos flutuantes ou sobrepostos como bolhas de chat, badges, e tags de analıtica ou SEO, nao para conteudo colocado em um ponto preciso do layout. Blocos de embed de app sao desativados por padrao e comerciantes os ativam em Configuracoes de Tema, App embeds. Uma tabela de faixa nao e um bloco de embed, porque precisa viver em uma posicao especıfica no layout do produto, nao flutuar sobre a pagina.
Uma ressalva que pertence em todo guia honesto: blocos de app sao suportados apenas em temas Online Store 2.0, os que usam templates JSON. Os documentos de integracao do Shopify afirmam que "blocos de app sao suportados apenas em temas que contem templates JSON, tambem conhecidos como temas Online Store 2.0." Se voce esta em um tema muito antigo, a colocacao de blocos por arrastar e soltar nao estara disponıvel e voce volta a uma abordagem Liquid ou uma atualizacao de tema. A maioria das lojas em um tema Shopify moderno ja esta no Online Store 2.0.
PLACEHOLDER DE IMAGEM (Imagem 2): Adicionando o bloco de app de tabela de faixa no editor de tema
Visualizacao sugerida: Um mockup estilo captura de tela 16:9 do editor de tema Shopify. O painel esquerdo mostra a arvore de secao para um template de produto com uma afordancia "Adicionar bloco" expandida, revelando uma opcao de bloco "Tabela de desconto por quantidade" de um app sob um heading Aplicativos. O centro mostra a visualizacao de produto em tempo real com a tabela de faixa aparecendo sob o botao de adicionar ao carrinho. Chrome de admin estilo Polaris, destaque violeta no bloco selecionado. Referencie a pasta docs/screenshot-manifest.md para capturar a tela real mais tarde.
Por que tabelas de faixa codificadas manualmente falham silenciosamente (a armadilha de colecao)
Aqui esta o modo de falha que gera as postagens mais frustradas no forum, e nao e um bug na sua marcacao de tabela. E uma falta de correspondencia entre como voce pensa que o desconto e escopo e como o Shopify realmente conta.
Digamos que voce construa uma tabela codificada manualmente em uma pagina de produto de cadeira de jantar: 3 a 5 cadeiras economizam 15%, 6 a 9 economizam 18%, 10 ou mais economizam 20%. Voce volta isso com um desconto nativo do Shopify escopo para sua colecao "Cadeiras". A tabela parece correta. Entao duas coisas silenciosamente da errado.
Primeiro, descontos nativos com escopo de colecao contam unidades totais em todos os produtos na colecao, nao unidades da cadeira na pagina. Entao um comprador pode acionar sua faixa "compre 3" adicionando um de cada uma das tres cadeiras diferentes, o que nao e o que a tabela em nenhuma pagina de cadeira implica. A tabela exibida e escrita da perspectiva de um produto; o desconto esta fazendo matematica de colecao. Eles descrevem ofertas diferentes.
Segundo, a associacao do desconto muda debaixo de voce. No momento em que voce adiciona um novo produto a essa colecao, ou no momento em que um produto sai dela, o conjunto de itens que contam para o limite muda. Comerciantes sinalizaram exatamente isso nos foruns: adicionar um produto a uma colecao silenciosamente muda a logica de desconto, e nada avisa voce. Sua tabela codificada manualmente ainda mostra as faixas antigas. Agora descreve um desconto que nao existe mais na forma que o cliente ve.
Essa e a razao central pela qual uma tabela de faixa nao deve ser um artefato estatico que voce mantem manualmente. A tabela e uma visao de um desconto. Se o desconto pode mudar escopo ou associacao sem tocar na tabela, os dois vao derivar, e a derivacao e invisıvel ate que um cliente ou seu proprio pedido de teste a revele. A correcao e estrutural: exiba faixas por produto a partir da mesma definicao que o desconto usa, e conte da forma que a tabela afirma contar, por produto e suas variantes, nao agrupado em uma colecao inteira. Esse e o modelo de contagem coberto em descontos por volume de produto, e e a diferenca entre uma tabela que sempre e verdadeira e uma que e verdadeira ate terca-feira.
A armadilha de SEO: nunca renderize precos como tags de heading
Esse e um verdadeiro e documentado campo minado, e vem direto das avaliacoes de app. Um comerciante sinalizou que um app de desconto popular renderizava seus precos em pagina dentro de tags de heading, o que criava multiplos elementos H1 concorrentes em todas as paginas de produto, e o suporte recusou-se a consertar. Isso nao e uma reclamacao cosmetica. E uma regressao de SEO colocada no widget.
Aqui esta por que importa. Os mecanismos de busca usam sua hierarquia de headings para entender uma pagina. O H1 deveria ser o tıtulo unico e primario da pagina, quase sempre o nome do produto. O resto dos headings, H2 e H3, descrevem a estrutura abaixo. Quando um widget de desconto envolve "6 por 34 dolares" em um ou porque era uma forma preguicosa de fazer o numero parecer grande e negrito, injeta headings que significam nada semanticamente e diluem os que significam. Multiplos H1s em uma pagina obscurecem o sinal sobre o que a pagina realmente trata. Precos e figuras de "voce economiza" sao dados, nao estrutura de documento. Eles pertencem a celulas de tabela, spans ou paragrafos estilizados com CSS, nunca em elementos de heading.
A forma certa de renderizar uma tabela de faixa e HTML tediamente correto: um verdadeiro Se voce esta avaliando um app de desconto, essa e uma coisa concreta a verificar antes de instalar. Visualize o codigo-fonte em uma pagina de produto de demonstracao, ou execute-o atraves do inspetor de acessibilidade ou SEO do seu navegador, e confirme que o widget nao adiciona elementos de heading. E um teste de cinco minutos que o poupa de uma lenta e difıcil de diagnosticar queda de ranking. Comercializar a ausencia desse problema e aceitavel, porque tantos widgets erram isso. Uma tabela de faixa de pagina de produto e pequena, mas renderiza em suas paginas de maior intencao, maior trafico, para que seu custo de desempenho se agrave. Duas metricas de Core Web Vitals sao as para observar. Cumulative Layout Shift (CLS) e a primeira. Uma tabela que aparece um momento depois que o resto da pagina foi pintada empurra o botao de adicionar ao carrinho para baixo e acumula mudanca de layout. A correcao e renderizar a tabela no servidor no HTML inicial onde possıvel, para que o espaco seja reservado a partir da primeira pintura, em vez de injetar tarde com JavaScript depois que a pagina se estabiliza. Os valores de uma tabela de faixa sao conhecidos no tempo de renderizacao; nao ha razao para que precise chegar por ultimo. Largest Contentful Paint (LCP) e o orçamento geral de peso sao o segundo. Um widget que carrega um pacote JavaScript pesado, sua propria fonte da web, ou um pedaco de codigo de framework para desenhar o que e fundamentalmente uma pequena tabela esta gastando seu orçamento de velocidade descuidadamente. A estrutura de extensao de app de tema do Shopify ajuda aqui: quando um bloco de app esta presente em uma pagina, sua folha de estilo e script sao carregados uma vez atraves das tags proprias da estrutura, e se um comerciante adiciona multiplos blocos que fazem referencia ao mesmo arquivo, o Shopify inclui esse arquivo apenas uma vez por pagina. Uma boa tabela de faixa aproveita isso, envia CSS e JS mınimos, e faz o trabalho pesado no servidor. O comportamento de atualizacao em tempo real merece uma nota tambem. Uma boa tabela de faixa destaca a faixa ativa conforme o comprador muda a quantidade, sem recarga de pagina. Essa interacao e barata quando e alguns poucas linhas de JavaScript vanilla alternando uma classe, e cara quando e um framework re-render. Mantenha leve. O ponto da tabela e vender mais unidades, e uma pagina que e lenta de interagir vende menos. Vamos construir uma concreta. Uma marca de suplementos vende uma lata de proteına por 40 dolares. Eles querem recompensar o estoque no mesmo pote, contado por produto em suas variacoes, com essas faixas: A tabela na pagina do produto, colocada direto sob o botao de adicionar ao carrinho, se parece assim. A coluna "voce economiza" e a que faz a persuasao. Um comprador que adiciona 6 potes ve a linha "6 a 11" destacada como sua faixa ativa, a 34 dolares cada, economizando 48 dolares contra comprar seis ao preco completo. A linha acima e abaixo permanecem visıveis, para que o proximo nıvel ("apenas mais seis e cai para 32 cada") esteja sempre a vista. Esse proximo passo visıvel e o mecanismo. E a mesma razao pela qual grades de preco de atacado sempre foram impressas como grades. As duas regras do resto deste guia se aplicam a essa tabela exata. Primeiro, os valores na coluna "preco cada" devem ser os valores que o desconto realmente cobra, contados por produto nas variantes de sabor do pote, nao agrupados com produtos nao relacionados. Segundo, nenhuma dessas celulas pode ser uma tag de heading. Os 34 dolares sao uma celula de tabela estilizada para parecer proeminente, nao um Aqui esta a sequencia confiavel para a rota de bloco de app, que e a que a maioria das lojas devem usar. Blocos de app requerem um tema de template JSON. Se voce esta em um tema Shopify atual, quase certamente se qualifica. Se voce esta em um tema antigo, planeje uma atualizacao de tema primeiro, ou use uma abordagem Liquid no ınterim. Defina seus pontos de ruptura de quantidade no desconto em si: os pontos de ruptura, os precos por unidade ou percentuais, e o modo de contagem (contar as variantes deste produto juntas, nao a colecao inteira). Esta e a unica fonte de verdade. Tudo que o cliente ve deve derivar daqui. Abra seu template de produto no editor de tema, escolha Adicionar bloco dentro da secao de informacoes de produto, e selecione o bloco de tabela de faixa do app. Arraste-o direto sob o botao de adicionar ao carrinho. Como blocos de app herdam a tipografia e cores do tema, deve corresponder ao seu design imediatamente; ajuste apenas espaco ou alinhamento se o bloco expoe essas configuracoes. Adicione o produto a um carrinho de teste real em uma quantidade que cruze um limite de faixa, por exemplo 6 unidades, e confirme que o preco que a tabela mostrou e o preco no checkout, incluindo atraves de um checkout acelerado como Shop Pay. Este e o passo que captura a derivacao antes dos clientes fazerem. Visualize o codigo-fonte da pagina do produto e confirme que o widget nao adicionou tags de heading e nao empurrou o botao de adicionar ao carrinho enquanto carregava. Um rapido passe em um inspetor de SEO ou acessibilidade confirma um H1, o tıtulo do produto, com a tabela de faixa vivendo em uma tabela ou lista, nao em headings. Se seu desconto e escopo, adicione e remova um produto da colecao ou grupo relevante e re-verifique que a tabela de faixa em seu produto alvo ainda mostra as faixas que voce pretende. Aqui e onde tabelas auto-mantidas falham; uma oferta corretamente com escopo por produto nao. Se voce preferir nao manter uma tabela codificada manualmente que derivar do seu desconto, ou auditar o HTML de um widget para tags de heading desviadas, este e o problema especıfico Stackable foi construıdo para lidar, honestamente e dentro das regras reais do Shopify. Instale Stackable gratuitamente e veja a tabela de pagina de produto e o total de checkout concordar ate a moeda em usestackable.com/pricing. Encontre respostas para as perguntas mais comuns Adicione um bloco de app de tema de um app de desconto no editor de tema, posicionando-o sob o botao de adicionar ao carrinho, ou codifique a tabela manualmente em Liquid dentro do seu template de produto. A rota de bloco de app nao requer codigo e, em um app bem construido, le os mesmos valores de faixa que o checkout usa. O requisito essencial de qualquer forma e que os precos exibidos correspondam ao que o checkout cobra e que a tabela nao use tags de heading. Sim, se seu tema for Online Store 2.0 e voce usar um app de desconto que forneca um bloco de app de tema. O editor de tema do Shopify permite que voce adicione, remova e reordene blocos de app visualmente, sem nenhum codigo de tema. Codificar uma tabela manualmente em Liquid requer experiencia com desenvolvimento, e adiciona manutencao contınua porque a tabela fica separada do desconto e deve ser sincronizada manualmente. Apenas se for construıda mal. O verdadeiro perigo e um widget que renderiza precos dentro de tags de heading, o que cria elementos H1 ou H2 adicionais e dilui a estrutura de heading da sua pagina. Uma tabela construıda corretamente coloca precos em celulas de tabela ou spans estilizadas com CSS, mantendo um unico H1 (o tıtulo do seu produto). Verifique qualquer app visualizando o codigo-fonte em uma pagina de demonstracao e confirmando que nao adiciona elementos de heading. 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 Usamos cookies essenciais para operar este site e, apenas com sua permissão, cookies de análise para entender o tráfego. Leia nossa Política de Cookies. (ou uma lista estilizada) cujas celulas mantem as quantidades e precos, com peso visual aplicado atraves de CSS, nao atraves de tags de heading. Os numeros podem parecer tao grandes e negrito quanto seu designer quiser. Eles apenas nao devem fingir ser headings de pagina. A orientacao propria do Shopify para widgets de vitrine na estrutura de extensao de app de tema aponta na mesma direcao, e internamente a regra que mantemos para nos mesmos e simples: widgets de vitrine devem ser seguros para SEO, sem tags de heading injetadas e sem mudanca de layout.
Core Web Vitals: uma tabela de faixa nao deve custar-lhe velocidade
Exemplo trabalhado: uma tabela "quantidade, preco cada, voce economiza"
. Siga essas duas regras e essa tabela e segura para enviar em toda pagina de produto do catalogo.Como configurar, passo a passo
1. Confirme que seu tema e Online Store 2.0
2. Defina as faixas uma vez, no desconto
3. Adicione o bloco de app de tabela de faixa no editor de tema
4. Verifique que a exibicao e igual a matematica de checkout
5. Verifique a estrutura de heading e a estabilidade de layout
6. Teste o caso extremo de colecao
PLACEHOLDER DE IMAGEM (Imagem 3): A exibicao e o checkout concordam
Visualizacao sugerida: Uma ilustracao de divisao 16:9. Painel esquerdo rotulado "Pagina de produto" mostra a tabela de faixa com a linha de 6 unidades destacada em $34.00 cada. Painel direito rotulado "Checkout" mostra as mesmas 6 unidades cobradas a $34.00 cada com um badge de marca de seleção verde lendo "Preco igual." Um ıcone de corrente nao quebrada unico vincula os dois paineis. Abaixo, uma faixa de legenda le "Uma unica fonte de verdade: exibicao e igual a checkout." Cores de marca violeta e dourado, vetor plano, nenhuma fotografia.
Execute isso de forma confiavel com Stackable
O resultado final
Artigos relacionados
Perguntas Frequentes
Stackable Team
Related Posts
Compre Um, Obtenha o Segundo com 50% de Desconto no Shopify: O Truque de 'Não Descontar as Primeiras N Quantidades' e Seus Limites
Limite de 100 Produtos do Shopify em Buy X Get Y: Como Executar 3-por-2 em Todo o Seu Catálogo
Shopify Agora Permite Empilhar Múltiplos Descontos de Produto no Mesmo Item (2026): O que Mudou e Como Configurar