Artigos sobre: Widgets

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

Acesse Supr Bundles & Subscriptions > Design.
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.

Abra o designer e clique em Importar design.
Cole o bloco inteiro e clique em Importar. Ele substitui todos os modelos, folhas de estilo e rótulos das três abas.
Confira a visualização e clique em Salvar.
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.

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.

Atualizado em: 24/10/2026

Este artigo foi útil?

Obrigado!