--- title: "Widget de assinatura: documentação do Subscriptions" description: "Adicione o widget de assinatura da Chargezen às páginas de produto da Shopify, escolha um modelo, defina textos e visual e adicione ofertas antes de adicionar ao carrinho." url: "https://chargezen.com/pt-br/docs/subscriptions/subscription-widget" lang: "pt-BR" updated: "2026-10-18" --- Canonical URL: https://chargezen.com/pt-br/docs/subscriptions/subscription-widget # Widget de assinatura Adicione o widget de assinatura da Chargezen às páginas de produto da Shopify, escolha um modelo, defina textos e visual e adicione ofertas antes de adicionar ao carrinho. Última atualização: 2026-10-18 O widget de assinatura é a caixa de compra nas suas páginas de produto, onde os compradores escolhem entre compra avulsa e assinatura, escolhem uma frequência de entrega e adicionam ao carrinho. É onde a maioria das assinaturas começa, então vale a pena deixá-lo claro. Abra **Subscriptions → Customer experience → Subscription widget**. ## Configure 1 #### Crie um widget Selecione **Create widget** e depois **Use template** em **Product widget** (uma caixa de compra compacta para qualquer página de produto) ou **Variant cards** (cartões de variantes, compra avulsa ou assinatura, e ofertas antes do botão de adicionar ao carrinho). 2 #### Edite os textos e o visual Percorra as seções do editor (Content, Layout, Behavior, Style e outras). Use **Previewing** para escolher um produto e os botões de desktop e celular para conferir os dois tamanhos. 3 #### Escolha onde aparece Em **Publish**, informe um **Widget name** (só você vê) e defina **Show on** como **All products** ou **Specific products**. 4 #### Salve Selecione **Save**. 5 #### Adicione o bloco ao seu tema Em **On your store**, selecione **Add the block in Shopify**. Na Shopify, abra **Online Store → Themes → Customize**, abra um modelo de produto, adicione o bloco **Chargezen product widget** ou **Chargezen variant cards** e salve o tema. Comece por um plano No cartão **Storefront widget** de um plano, **Customize widget** abre o widget dos produtos desse plano ou cria um novo. ## Opções do Product widget * **Content**: texto dos botões (Add to cart, Buy now), título e subtítulo da opção de compra avulsa, título, subtítulo e **Delivery selector label** da opção de assinatura, e o rótulo da quantidade. Começa como “One-time purchase”, “Subscribe and save” e “Pause, skip, or cancel anytime.” * **Layout**: mostre ou oculte fornecedor, título do produto, preço, seletor de variantes, opções de compra avulsa e de assinatura, seletor de entrega, seletor de quantidade, Add to cart e Buy now. * **Behavior**: **Selected by default** (Auto, One-time ou Subscription), **Shown first**, limites de quantidade e se o widget mostra as mídias da variante ou atualiza a imagem de produto do tema. * **Rules**: **Allow preorders** com uma janela de confirmação, **Confirm before purchase** com uma mensagem de aviso, **Discount this product** com um rótulo e uma porcentagem de desconto, e **Offer all variants as a bundle**. * **Style**: cores e texto dos botões, cores do texto, cores de seleção, superfícies e bordas. ## Opções do Variant cards * **Content**: os cartões de compra avulsa e de assinatura, o texto dos botões, o texto de esgotado e o símbolo da moeda. No título da assinatura, `{{savings}}` vira o valor economizado. * **Layout**: preços, cartões de variantes e colunas, e quais cartões e botões aparecem. * **Offers**: adicione **Bundle (try them all)**, **Upsell**, **Buy more**, **Sell as another variant** ou **Preorder**. Cada uma tem **Show this offer** e fica desativada até os campos obrigatórios serem preenchidos. Uma venda adicional pode oferecer outra oferta se for recusada, ou nada. * **Variants**: ordene os cartões pelo menor preço, pelo maior preço ou numa ordem personalizada; renomeie, oculte ou mostre uma variante como esgotada. * **Behavior**: **Selected by default**; Auto seleciona a assinatura nos links /start e /pay e a compra avulsa em todos os outros lugares. * **Style** e **Custom CSS**: cores, cantos, tipografia e CSS carregado depois dos estilos do próprio widget (comece os seletores com `#ketonaid-widget`). ## Qual widget um produto usa Um widget definido como **All products** aparece em todos os produtos, a menos que um produto tenha o próprio widget. Quando vários widgets específicos incluem o mesmo produto, vence o de maior **Priority**. A lista de widgets mostra **Type**, **Template**, **Status**, **Scope** e **Offers** de cada widget. Use **Filter** para ver widgets All, Active ou Draft, e o menu da linha para **Edit** ou **Delete**. ## Solução de problemas ### O widget não aparece na página do meu produto * Confira se o bloco foi adicionado ao modelo de produto que você usa e se você salvou o tema. * Confira se o widget está definido para aparecer nesse produto, ou em All products. * Confira se outro widget com esse produto não tem prioridade maior. ### O widget aparece, mas não a minha opção de assinatura * O plano precisa estar Active, incluir o produto e ter o canal **Online Store** ativado. Um plano oculto da Online Store não é oferecido por nenhum widget. * Adicione produtos ao plano para que os compradores possam assinar pelas páginas de produto. ### O widget não é salvo Dê um nome ao widget e escolha pelo menos um produto, ou mostre-o em todos os produtos. ## Relacionados * [Vendas adicionais e vendas cruzadas](https://chargezen.com/pt-br/subscriptions/upsells-and-cross-sells): transforme compradores avulsos em assinantes. * [Novo em assinaturas](https://chargezen.com/pt-br/subscriptions/getting-started): lance seu primeiro programa. * Glossário: [assine e economize](https://chargezen.com/glossary/subscribe-and-save), [página do produto](https://chargezen.com/pt-br/glossary/product-detail-page), [adicionar ao carrinho](https://chargezen.com/pt-br/glossary/add-to-cart). ### Artigos relacionados [ #### Criar planos de assinatura Os planos que o widget oferece ](https://chargezen.com/pt-br/docs/subscriptions/create-product)[ #### Como funcionam os planos de venda Por que o canal Online Store importa ](https://chargezen.com/pt-br/docs/subscriptions/selling-plans-explained)[ #### Kits monte sua caixa Uma caixa que os próprios clientes montam ](https://chargezen.com/pt-br/docs/subscriptions/build-a-box) Esta página foi útil? Precisa de mais ajuda? [Fale com o suporte](https://chargezen.com/docs/checkoutos/troubleshooting/support)