> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://supr-bundles-and-subscriptions.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como ativar o widget de assinatura na loja virtual

| Para acessar esta página, vá em [**Supr Bundles & Subscriptions > Design**](https://admin.shopify.com/apps/super-subscriptions/app/widget)

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](#3-video-passo-a-passo)
* [Instruções passo a passo](#3-instrucoes-passo-a-passo)
* [Onde o widget aparece](#3-onde-o-widget-aparece)
* [Escolher uma posição exata](#3-escolher-uma-posicao-exata)
* [Mostrar o widget em outras páginas](#3-mostrar-o-widget-em-outras-paginas)
* [Pop-ups de adição rápida e visualização rápida](#3-pop-ups-de-adicao-rapida-e-visualizacao-rapida)
* [PageFly e outros construtores de páginas](#3-pagefly-e-outros-construtores-de-paginas)
* [Configurar em um tema não publicado](#3-configurar-em-um-tema-nao-publicado)
* [Solução de problemas](#3-solucao-de-problemas)
* [Perguntas frequentes](#3-perguntas-frequentes)
* [Guias relacionados](#3-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ê.

${frame}[](https://www.youtube.com/embed/UpHcV7CoYVg)

### 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**.
![Botão Ativar](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/screenshot-2025-07-12-at-19571_gm3jkw.png =757xauto)
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.
![Botão Salvar do editor de temas](https://storage.crisp.chat/users/helpdesk/website/-/7/f/3/a/7f3a3e9ddc403000/5c6ce361-b562-467d-bf5c-f57834_bnt2do.png)
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**.

|| Prefere fazer manualmente? No admin da Shopify, vá em **Loja virtual > Temas**, clique em **Personalizar** no seu tema publicado, abra **Incorporações de app** (o ícone na parte de baixo da barra lateral esquerda), ligue **Supr Bundle & Subscriptions** e clique em **Salvar**. Em versões antigas do app, essa chave se chamava **Subscriptions (1.0 themes only)**.

### 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](#3-escolher-uma-posicao-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**:
   * **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.

|| Não sabe qual seletor CSS usar? Fale com o suporte enviando o link da sua página de produto e onde você quer o widget, e enviaremos um para você.

**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.

|| Um bloco pertence ao template, não a um único produto. Movê-lo move o widget em todos os produtos que usam esse template. Se seus produtos usam mais de um template de produto, repita isso em cada template em que você quer a nova posição. Os templates sem um bloco mantêm a posição automática acima do adicionar ao carrinho.

### 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**.

|| Você pode colocar mais de um na mesma página. Cada um mantém as próprias opções e preços, e o botão de adicionar ao carrinho de cada produto leva a escolha que o comprador fez para aquele produto.

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)](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/creating-subscription-invitations-quick-subscribe-links-57qm5h/).

### 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](#3-escolher-uma-posicao-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](https://help.pagefly.io/page-structure-and-elements/shopify-elements/custom-content/how-to-use-shopify-app-block-element-with-pagefly-section).

**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.

|| Quando sua página estiver no ar, adicione o produto ao carrinho com uma assinatura selecionada e confira se o carrinho a mostra. Se não mostrar, envie o link da página e posicionaremos o widget para você.

### 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 o widget não aparecer depois de salvar, confirme que o editor de temas salvou com sucesso. Você pode clicar em **Ativar widget** de novo para tentar outra vez.

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](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-is-not-displayed-in-my-store-1pxres2/). Se ele aparece duas vezes ou no lugar errado, veja [O widget de assinatura aparece duas vezes ou no fim da página](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-21b9cb/).

### 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](#3-mostrar-o-widget-em-outras-paginas).

**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](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/what-shoppers-see-in-the-cart-and-at-checkout-pmtcfu/#3-mudar-para-uma-assinatura-no-checkout-shopify-plus). Veja [Upsell no carrinho](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/product-page-add-ons-1b9e1n3/#3-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](#3-escolher-uma-posicao-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](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-21b9cb/).

### Guias relacionados

* [[Guia em vídeo] Como ativar a INCORPORAÇÃO DE APP](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/video-guide-how-to-enable-app-embed-1fa0qbu/)
* [O widget de assinatura](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/)
* [O widget de assinatura não aparece na minha loja](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-is-not-displayed-in-my-store-1pxres2/)
* [O widget de assinatura aparece duas vezes ou no fim da página](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-appears-twice-or-at-the-bottom-of-the-page-21b9cb/)
* [Criar convites de assinatura (links de assinatura rápida)](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/creating-subscription-invitations-quick-subscribe-links-57qm5h/)
* [O que aconteceu com o editor de widget](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/what-happened-to-the-widget-editor-ct911p/)