Adicione o widget ao seu tema

O desconto no checkout e o widget da loja virtual são duas coisas separadas. O desconto é aplicado por uma Shopify Function assim que você publica uma campanha — ele vale no checkout, esteja o widget no seu tema ou não. O widget é o que torna a oferta visível para o cliente antes de ele chegar lá: uma tabela de níveis de desconto na página do produto, e uma mensagem curta no carrinho.

Nota

Se o desconto de uma campanha não está aparecendo nas suas páginas de produto, mas você já confirmou que ele se aplica no checkout, o widget quase certamente ainda não está ativado — os passos abaixo resolvem isso.

Ative a incorporação de app (recomendado)

Essa é a forma mais rápida de adicionar o widget, e não exige posicionamento manual:

1. No admin da Shopify, acesse Loja virtual → Temas, depois Personalizar seu tema publicado.
2. Abra Incorporações de apps.
3. Ative Nock Quantity Breaks & BOGO.
4. Salve o tema.

A Início marca esse passo como concluído automaticamente na primeira vez que o navegador de um cliente carrega uma página de produto com a incorporação ativada — geralmente dentro de um minuto após salvar.

Uma vez ativado, o widget se posiciona sozinho: ele procura sua área de preço e de adicionar ao carrinho na página do produto e renderiza ao lado delas, além de adicionar uma linha curta ao carrinho e à gaveta do carrinho.

Adicione o widget como bloco (para posicionamento exato)

Se o posicionamento automático cair no lugar errado, adicione o bloco em vez disso — ele tem prioridade sobre o posicionamento automático da incorporação:

1. No editor de tema, abra seu modelo de produto.
2. Adicione um bloco e escolha Nock Quantity Breaks & BOGO widget.
3. Posicione-o onde você quiser.

Posição do widget e seletor personalizado

Tanto a incorporação de app quanto o bloco expõem as mesmas duas configurações:

Configuração	O que faz
Posição do widget	Auto (padrão), Before add to cart (antes de adicionar ao carrinho), After price (depois do preço), ou Custom selector (seletor personalizado).
Seletor de CSS personalizado	Usado apenas quando a posição é Custom selector — o widget renderiza imediatamente após o elemento correspondente a este seletor de CSS.

Dica

Você também pode ajustar o posicionamento a partir do próprio app, sem mexer no código do tema: abra ConfiguraçõesNo app: Settings → Widget da loja virtualOnde o widget de desconto por quantidade aparece nas páginas de produto e como ele chega até lá.No app: Storefront widget, ou a aba PosicionamentoAutomático por padrão — o widget encontra sozinho o lugar abaixo do preço e da caixa de quantidade. Se ele cair no lugar errado, escolha o lugar você mesmo.No app: Placement de uma campanha, e use o seletor de posicionamento para clicar no lugar exato em uma prévia ao vivo da sua loja. Use Redefinir para automáticoNo app: Reset to automatic para voltar ao comportamento padrão.

O que aparece onde

• A página do produto recebe o widget completo: a tabela de níveis, ou a barra de progresso da meta de carrinho, com o estilo definido na aba Widget de uma campanha.
• A página do carrinho e a gaveta do carrinho recebem uma mensagem mais leve — uma linha abaixo do item de carrinho relevante dizendo o que foi desbloqueado ou o que falta para desbloquear o próximo nível.

Próximo: crie sua primeira campanha para que haja algo para o widget mostrar.