Como ativar o widget de assinatura na loja virtual

O widget é o que seus clientes usam para escolher uma assinatura ou um kit nas suas páginas de produto. Um único widget mostra os dois: suas opções de assinatura e suas opções de kit. Para ativá-lo, clique em Ativar widget na página Design e depois clique em Salvar no editor de temas. Não há código, código de incorporação nem snippet para colar.

Índice

• Vídeo passo a passo
• Instruções passo a passo
• Onde o widget aparece
• Escolher uma posição exata
• Mostrar o widget em outras páginas
• Pop-ups de adição rápida e visualização rápida
• PageFly e outros construtores de páginas
• Configurar em um tema não publicado
• Solução de problemas
• Perguntas frequentes
• Guias relacionados

Vídeo passo a passo

Se você prefere assistir a ler, este vídeo mostra a incorporação de app sendo ativada no editor de temas. Essa chave é o que o Ativar widget liga para você.

Instruções passo a passo

1. No admin da Shopify, abra Supr Bundles & Subscriptions e vá em Design.
2. Se o widget ainda não está ativo, você vê um aviso Seus widgets ainda não estão ativos. Clique em Ativar widget (no aviso ou no topo da página).
3. Na janela que abrir, clique em Ativar. Seu editor de temas abre em uma nova aba com Supr Bundle & Subscriptions ligado em Incorporações de app.

4. No editor de temas, clique em Salvar no canto superior direito. O editor mostra um lembrete Mais uma etapa até você fazer isso. Se você fechar o editor sem salvar, o widget continua desativado.

5. Volte para a aba do app. Você vê Widget ativado quando o app encontra a chave salva. Se aparecer Widget não ativado, clique em Ativar de novo e dessa vez confirme que clicou em Salvar.

Você também pode começar pela Início: a etapa do guia de configuração Widget ativado (ou Widget de assinatura ativado / Widget de kits ativado, dependendo do que você vende) tem o mesmo botão Ativar widget. Depois que o widget está ativo, esse botão muda para Personalizar widget e leva você a Design.

Onde o widget aparece

Não há nada para arrastar. O widget se posiciona sozinho nas suas páginas de produto, logo acima do botão de adicionar ao carrinho, e funciona da mesma forma em todos os temas, incluindo os mais antigos (vintage). Para colocá-lo em outro lugar, veja Escolher uma posição exata.

• Ele aparece em todas as páginas de produto cujo produto está em uma oferta Publicada, qualquer que seja o template de produto que o produto usa.
• Suas opções de kit ficam logo ao lado das opções de assinatura. Se as opções de kit ficam acima ou abaixo delas é definido em Design > Elementos > Layout da página > Kit no topo.
• O espaço acima e abaixo do widget é definido em Design > Espaçamento > Ao redor do widget.
• O widget não tem botão de adicionar ao carrinho próprio. Ele usa o botão de adicionar ao carrinho do seu tema, então sua página de produto precisa ter o bloco Botões de compra do tema.

Escolher uma posição exata

Há duas formas de mover o widget: a configuração Posicionamento na página Design, que vale para todas as páginas de produto de uma vez (um design salvo tem um Posicionamento próprio, para as ofertas que o usam), ou o bloco Subscriptions + Bundles, que você arrasta exatamente para onde quiser.

Com a configuração Posicionamento:

1. No app, vá em Design. A seção Posicionamento aparece quando o widget está ativado (veja as etapas acima).
2. Escolha uma Posição na página do produto:
3. • Acima do botão de adicionar ao carrinho (automático): o padrão.
   • Abaixo dos botões de compra: abaixo do botão de adicionar ao carrinho e dos botões de checkout expresso, como Comprar agora.
   • Acima do seletor de quantidade: acima do campo de quantidade. Se o seu tema mostra a quantidade na mesma linha do botão de adicionar ao carrinho, o widget fica acima dessa linha.
   • Personalizado (seletor CSS): em qualquer lugar da página. Digite em Seletor CSS um seletor CSS de um elemento da sua página de produto, por exemplo .product__title, e escolha em Posicionar o widget se o widget vai antes ou depois desse elemento, ou dentro dele, no início ou no final.
3. Clique em Salvar.

Se a posição escolhida não existir em uma página (por exemplo, uma página de produto sem seletor de quantidade, ou um seletor que não corresponde a nada), o widget volta à posição automática acima do adicionar ao carrinho, para nunca desaparecer. A configuração vale para todos os temas em que você ativar o widget.

Com o bloco: se você quer o widget em um ponto exato, por exemplo abaixo do preço ou de uma linha de avaliações, adicione o bloco Subscriptions + Bundles onde quiser:

1. Vá em Loja virtual > Temas e clique em Personalizar.
2. Abra uma página de produto usando o seletor de templates no topo do editor (por exemplo, Produtos > Produto padrão).
3. Na seção de informações do produto, clique em Adicionar bloco, depois em Apps e em Subscriptions + Bundles.
4. Arraste o bloco até onde você quer o widget e clique em Salvar.

Mantenha a incorporação de app ligada. Onde houver um bloco Subscriptions + Bundles na página, a cópia da incorporação se remove sozinha, então você nunca recebe dois widgets por causa disso.

Mostrar o widget em outras páginas

Você também pode vender a partir de uma página que não é a do próprio produto, como uma landing page, uma página de coleção, sua página inicial ou um post de blog. O widget completo aparece ali, com as mesmas opções de kit, opções de assinatura e o mesmo design que você configurou na página Design.

1. No editor de temas, abra a página desejada.
2. Adicione uma seção que mostre um produto. A maioria dos temas a chama de Produto em destaque.
3. Nessa seção, clique em Adicionar bloco, depois em Apps e em Subscriptions + Bundles.
4. Clique no bloco e defina o Produto dele. Fora de uma página de produto, o bloco não consegue saber qual produto você quer dizer, então é preciso informar. Até você fazer isso, o editor de temas mostra Nada para mostrar ainda: este bloco não tem produto selecionado.
5. Mantenha o bloco Botões de compra da própria seção. O widget usa esse botão de adicionar ao carrinho.
6. Clique em Salvar.

A incorporação de app sozinha só mostra o widget nas páginas de produto. Para qualquer outra página, use o bloco como descrito acima.

Outra opção para um botão, um banner ou um e-mail é um link de assinatura rápida: Crescimento > Links de assinatura rápida cria um link que vai direto ao checkout com o produto e a assinatura já escolhidos. Veja Criar convites de assinatura (links de assinatura rápida).

Pop-ups de adição rápida e visualização rápida

Muitos temas têm um botão de Adição rápida ou Visualização rápida nos cards de produto das coleções e da página inicial. Se o widget aparece ali depende do tema:

• Temas cujo pop-up carrega o formulário completo do produto (por exemplo, o Dawn com adição rápida padrão): o widget e as opções de kit aparecem dentro do pop-up quando o bloco Subscriptions + Bundles está no template de produto. Adicione-o como descrito em Escolher uma posição exata.
• Horizon e os temas baseados nele: para um produto com assinatura, o botão de adição rápida abre a página do produto em vez de um pop-up, e o widget está lá como de costume.
• Outros temas: se o pop-up não mostra o widget ou mostra um quebrado, desative a adição rápida no editor de temas (geralmente é uma configuração da seção de coleção ou de grade de produtos) para que os compradores vão à página do produto, ou fale com o suporte e verificaremos seu tema.

PageFly e outros construtores de páginas

Não existe ID de widget, shortcode nem código de incorporação, e colar código em um elemento de Código personalizado ou HTML não funciona. O widget é um bloco de app da Shopify, e a Shopify só permite adicionar blocos de app pelo editor de temas. Os construtores de páginas oferecem suporte a isso com um elemento próprio de bloco de app.

Em uma página de produto do PageFly, você não precisa fazer nada. Com a incorporação de app ativada (veja as etapas acima), o widget se posiciona sozinho acima do botão de adicionar ao carrinho, como em uma página de produto do tema.

Em uma landing page do PageFly:

1. No editor do PageFly, abra sua página e arraste o elemento App blocks (em Shopify elements) para onde você quer o widget. O PageFly permite um elemento App blocks por página, e ele exige um tema Online Store 2.0.
2. Siga a indicação do PageFly para abrir o editor de temas e clique em Adicionar bloco, Apps, Subscriptions + Bundles.
3. Clique no bloco e defina o Produto como o produto que sua oferta abrange.
4. Confirme que a página também tem o botão de adicionar ao carrinho do PageFly para esse mesmo produto, depois salve e publique.

O guia do próprio PageFly sobre esse elemento: How to use the App blocks element.

GemPages, Shogun e outros construtores funcionam da mesma forma: as páginas de produto recebem o widget da incorporação de app, e as outras páginas precisam do elemento do construtor para blocos de app da Shopify com Subscriptions + Bundles adicionado a ele. Se o seu construtor não lista o bloco, fale com o suporte.

Configurar em um tema não publicado

Ativar widget sempre abre seu tema publicado (ativo). Para configurar e testar antes em outro tema:

1. Vá em Loja virtual > Temas, encontre o tema e clique em Personalizar (ou Editar tema).
2. Abra Incorporações de app, ligue Supr Bundle & Subscriptions e clique em Salvar.
3. Visualize esse tema e abra um produto que esteja em uma das suas ofertas.

O widget só aparece nos temas em que está ligado, então seu tema publicado não muda até você ligá-lo nele também. Suas ofertas são compartilhadas por todos os temas: quando o widget estiver ligado no seu tema publicado, toda oferta Publicada aparece nele.

Solução de problemas

Se você ainda não vê o widget nas suas páginas de produto, siga O widget de assinatura não aparece na minha loja. Se ele aparece duas vezes ou no lugar errado, veja O widget de assinatura aparece duas vezes ou no fim da página.

Perguntas frequentes

Preciso adicionar um código de incorporação ou um snippet Liquid ao meu tema?
Não. Design > Ativar widget liga o widget no seu tema, e você clica em Salvar no editor de temas. Não é preciso colar nada.

Cliquei em Ativar widget, mas nada mudou na minha loja. Por quê?
Quase sempre o editor de temas foi fechado sem clicar em Salvar. Clique em Ativar widget de novo e clique em Salvar no canto superior direito do editor de temas.

Preciso da incorporação de app e do bloco de app?
Você precisa da incorporação de app. O bloco Subscriptions + Bundles é opcional: adicione-o apenas para escolher uma posição exata ou para mostrar o widget em uma página que não é de produto. Usar os dois nunca mostra o widget duas vezes.

O editor de temas diz que o bloco de app não pôde ser adicionado. O que faço?
Use a incorporação de app: Design > Ativar widget e depois Salvar. A incorporação não precisa de um lugar na seção de produto, então funciona em temas cuja seção de produto não aceita blocos de app.

Preciso adicionar o widget a cada produto?
Não. O widget aparece em todo produto que está em uma oferta Publicada. Você escolhe os produtos na oferta, em Aplica-se a, não no tema.

Posso mostrar o widget na minha página inicial ou em uma landing page?
Sim. Adicione uma seção Produto em destaque, adicione a ela o bloco Subscriptions + Bundles e defina o Produto. Veja Mostrar o widget em outras páginas.

Os clientes podem escolher uma assinatura na página do carrinho?
Sim, com o complemento Upsell no carrinho na página Design: um botão Assine e economize abaixo de cada produto comprado uma única vez, na página do carrinho e no carrinho lateral, passa esse produto para a primeira opção de assinatura dele. Para escolher outra frequência, os clientes escolhem na página do produto. No Shopify Plus, o Checkout Subscription Picker também permite trocar no checkout, veja Mudar para uma assinatura no checkout. Veja Upsell no carrinho.

Posso colocar o widget abaixo do botão de adicionar ao carrinho?
Sim. Na página Design, defina Posicionamento > Posição na página do produto como Abaixo dos botões de compra e clique em Salvar. Veja Escolher uma posição exata.

Como movo o widget para acima do botão de adicionar ao carrinho?
Com a incorporação de app ligada, é para lá que ele vai sozinho. Se ele estiver em outro lugar, veja O widget de assinatura aparece duas vezes ou no fim da página.

Guias relacionados

• [Guia em vídeo] Como ativar a INCORPORAÇÃO DE APP
• O widget de assinatura
• O widget de assinatura não aparece na minha loja
• O widget de assinatura aparece duas vezes ou no fim da página
• Criar convites de assinatura (links de assinatura rápida)
• O que aconteceu com o editor de widget

Atualizado em: 24/10/2026