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

# Criando o seu próprio widget

O designer de widget personalizado permite que você escreva o HTML e o CSS do seu widget de assinatura, das suas opções de kit e da caixa que as envolve, para que o widget fique exatamente como o resto da sua página de produto. Ele está em beta: peça no chat para ativá-lo na sua loja.

## Abrindo o designer

1. Acesse **Supr Bundles & Subscriptions > Design**.
2. Clique no design **Personalizado (Liquid)**. Na primeira vez, ele abre o designer para você criar o seu design.

Clique em **Salvar** para guardar suas alterações. Cada alteração salva fica em **Versões**, então você sempre pode voltar atrás.

## Usando seu design na loja

Depois que o design estiver salvo, **Personalizado (Liquid)** pode ser escolhido na página Design como qualquer outro design, para o widget de assinatura, para o widget de kits ou para os dois. Escolha-o e salve a página Design. A partir daí, cada alteração salva no designer entra no ar imediatamente nos widgets que o usam.

## As três abas

* **Widget de assinatura**: as opções de assinatura e a linha de compra única.
* **Opções de kit**: a barra de kits e cada uma de suas opções, incluindo monte seu kit, kits fixos, complementos e brindes.
* **Layout**: tudo o que o bloco do app mostra, em uma única caixa: o título da oferta, o widget de assinatura, as opções de kit e um botão de adicionar ao carrinho e uma quantidade só seus.

A aba **Layout** tem um interruptor, **Usar este layout**: ativado, o seu layout posiciona o título da oferta, os dois widgets e o seu próprio botão de adicionar ao carrinho em todas as páginas de produto. As outras duas abas seguem a página Design, como descrito acima.

Cada aba tem uma lista **Começar com um modelo**. Um modelo substitui apenas o markup e a folha de estilo daquela aba, então você pode começar as suas opções de kit com um modelo e o seu widget de assinatura com outro.

## Importando um design da nossa equipe de suporte

Quando a nossa equipe cria um design para você, ela o envia como um único bloco de texto.

1. Abra o designer e clique em **Importar design**.
2. Cole o bloco inteiro e clique em **Importar**. Ele substitui todos os modelos, folhas de estilo e rótulos das três abas.
3. Confira a visualização e clique em **Salvar**.
4. Se a sua loja ainda não usa o design, escolha **Personalizado (Liquid)** para o widget na página Design.

Um design também pode trazer a cor da sua marca, o arredondamento e o espaçamento da página Design. O designer os lista em um banner antes de você salvar, e salvar os mantém junto com o design. Eles também mudam o estilo dos seus outros widgets; clique em **Manter a página Design como está** para salvar o design sem eles.

## Como funciona um modelo

Um modelo é HTML comum com strings Liquid entre chaves duplas, como `{{ selling_plan.name }}` ou `{{ tier.price | money }}`. Digite `{{` no editor para ver todas as strings que a parte que você está editando aceita, com o que cada uma imprime; a seção **Referência** também as lista. Qualquer outra coisa entre chaves duplas, e qualquer tag Liquid que não seja um comentário, é recusada, com a linha em que está.

Não há condições. Para ocultar algo que não tem valor, use CSS: um preço ou selo vazio não imprime nada, então `:empty` oculta o elemento dele. A opção de assinatura escolhida tem um botão de opção marcado (`.sss-liquid-row:has(> input:checked)`) e a opção de kit escolhida tem a classe `.sss-bundle-block__tier--selected`.

O app mantém as partes de que a sua loja precisa para funcionar: os botões de opção, os seletores de variante, os controles de quantidade e os dados que a vitrine lê para manter os preços atualizados e adicionar os itens certos ao carrinho. O seu markup fica em volta e dentro deles.

## Widget de assinatura

* **Contêiner**: tudo o que fica em volta das opções, como um título ou uma linha de confiança. Posicione as opções com `{{ sss.options }}`. Você também pode posicionar `{{ sss.one_time }}`, `{{ sss.add_to_cart }}` e `{{ sss.quantity }}`.
* **Grupo da oferta**: desenhado uma vez por oferta. Mostre as opções dele como linhas com `{{ sss.group.options }}`, ou faça da oferta inteira um único card com um seletor (`{{ sss.plan_picker }}`) ou botões (`{{ sss.plan_picker_pills }}`).
* **Opção de assinatura** e **Compra única**: uma linha para cada.
* **Linha de benefício**, **Brinde** e **Recompensa de fidelidade**: como fica um benefício, um brinde ou uma recompensa, posicionados em uma opção com `{{ sss.benefits }}`, `{{ sss.gifts }}` e `{{ sss.rewards }}`.

Os preços incluem as economias, o preço por dia, por porção e por unidade, o preço depois dos primeiros pedidos e a linha de cobrança. Para mostrar um preço por porção, adicione o campo **Porções** em **Campos de produto** e preencha-o em cada variante.

## Opções de kit

* **Barra do kit**: tudo o que fica em volta das opções. Posicione-as com `{{ sss.tiers }}`.
* **Opção de kit**: uma opção, por exemplo o tamanho de um pacote. Ela pode mostrar o título, o selo, o preço, o preço cheio, o preço por unidade e a economia da opção. Posicione o montador, os produtos de um kit fixo, os complementos, os brindes e os seletores de variante onde quiser com `{{ sss.tier.builder }}`, `{{ sss.tier.products }}`, `{{ sss.tier.addons }}`, `{{ sss.tier.gifts }}` e `{{ sss.tier.variant_pickers }}`. Tudo o que você deixar de fora segue o seu markup.
* **Produto do kit**: como fica um produto em um kit fixo, em uma opção de monte seu kit e nos complementos: imagem, título, preço, fornecedor e adesivo.

Para mostrar um adesivo como "Mais vendido" em um produto, adicione o campo **Adesivo do kit** em **Campos de produto** e preencha-o no produto. Traduza-o com o Translate & Adapt da Shopify. Os adesivos aparecem nos 20 primeiros produtos de kit de uma página.

Ative **Mostrar um grupo de produtos por vez** para mostrar os grupos de uma opção de monte seu kit como abas, com um grupo aberto por vez. Cada aba mostra o nome e o subtítulo do grupo, que você define no grupo em **Ofertas**.

## Rótulos e traduções

Suas próprias palavras ficam em **Rótulos**, e você imprime um com `{{ sss.labels.name }}`. Um rótulo usado dentro de uma opção de assinatura pode incluir os valores dessa opção, como `Billed {price} {billing_frequency}`, para que a frase inteira continue sendo um único rótulo em todos os idiomas. Traduza seus rótulos em **Configurações > Traduções > Widgets**.

Os rótulos de um modelo começam no idioma da sua loja. Quando você salva, todo rótulo que você não reescreveu também é traduzido para os outros idiomas da sua loja, a menos que você mesmo já o tenha traduzido. Os rótulos que você escreve são seus para traduzir.

## Folhas de estilo

Cada aba tem a sua própria folha de estilo. Ao salvar, cada regra é limitada à parte que estiliza, então o seu CSS não consegue alterar o resto do seu tema. A folha de estilo não pode carregar scripts nem alcançar nada fora do widget.

## Visualização

A visualização ao lado do editor desenha o seu design como a vitrine vai mostrá-lo. Escolha um dos produtos de exemplo ou clique em **Visualizar um produto da sua loja** para vê-lo em um dos seus. As fontes e os estilos do seu tema só aparecem na sua loja. A visualização não executa o seu JavaScript.

## JavaScript

A caixa **JavaScript**, na parte de baixo do designer, guarda um script para o seu design. Ele roda uma vez em cada página em que o seu design desenha o widget de assinatura ou as opções de kit, depois que elas são desenhadas. Uma página pode mostrar mais de um widget, então encontre todos com `document.querySelectorAll`.

## O que o designer não faz

* Um modelo não pode usar os nomes de classe nem os atributos de dados do próprio app (como `purchase-option-*` ou `data-tier-total`); o editor informa qual deles quando recusa.
* Damos suporte ao designer em si. Criar e manter o markup e o CSS do seu design fica por sua conta ou a do seu desenvolvedor.