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

# O widget de assinatura

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

A página Design é onde você controla a aparência dos widgets de assinatura e de kits nas páginas de produto: o design, as cores, os cantos e o espaçamento, quais partes aparecem, os textos que os clientes leem e o seu próprio CSS. Os dois widgets são projetados juntos nesta mesma página, então combinam entre si e com o seu tema. Essa é a **experiência unificada de widgets**: um único conjunto de controles, os dois widgets, todos os designs.

Se a página mostrar **Seus widgets ainda não estão ativos**, clique primeiro em **Ativar widget**. Veja [How to Enable the Subscription Widget in the Online Store](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/how-to-enable-the-subscription-widget-in-the-online-store-1lpw08p/).

### Índice

* [O que é o widget de assinatura?](#3-o-que-e-o-widget-de-assinatura)
* [Como a página está organizada](#3-como-a-pagina-esta-organizada)
* [A prévia](#3-a-previa)
* [Design](#3-design)
* [Cores](#3-cores)
* [Formato](#3-formato)
* [Espaçamento](#3-espacamento)
* [Fonte](#3-fonte)
* [Elementos](#3-elementos)
* [Títulos e o título da oferta](#3-titulos-e-o-titulo-da-oferta)
* [Como ler uma linha de elemento](#3-como-ler-uma-linha-de-elemento)
* [Selos](#3-selos)
* [Cores padrão e personalizadas](#3-cores-padrao-e-personalizadas)
* [Preços](#3-precos)
* [A ordem em que as coisas aparecem](#3-a-ordem-em-que-as-coisas-aparecem)
* [Rótulos](#3-rotulos)
* [CSS personalizado](#3-css-personalizado)
* [Designs por oferta](#3-designs-por-oferta)
* [Salvar as alterações](#3-salvar-as-alteracoes)
* [Restaurar o design anterior](#3-restaurar-o-design-anterior)
* [A linha Powered by Supr](#3-a-linha-powered-by-supr)
* [Como obter ajuda com o design](#3-como-obter-ajuda-com-o-design)
* [Dicas e boas práticas](#3-dicas-e-boas-praticas)
* [Perguntas frequentes](#3-perguntas-frequentes)
* [Guias relacionados](#3-guias-relacionados)

### O que é o widget de assinatura?

|| O widget de assinatura fica acima do botão de adicionar ao carrinho e mostra as formas de comprar um produto: a compra única e as suas opções de assinatura. Os clientes escolhem a frequência de entrega, veem o desconto, se houver, e adicionam o produto ao carrinho. Se a sua oferta também tiver opções de kit, o widget de kits aparece junto, na mesma página de produto.

O que os widgets oferecem, quais opções, quais descontos e se a linha de compra única aparece, é definido em cada oferta em [**Ofertas**](https://admin.shopify.com/apps/super-subscriptions/app/offers). A aparência dos widgets e os textos compartilhados que eles exibem são definidos nesta página.

### Como a página está organizada

* **A prévia** à esquerda, que acompanha você enquanto rola a página.
* **Um cartão de configurações** à direita, com as seções nesta ordem: **Design**, **Cores**, **Formato**, **Espaçamento**, **Fonte**, **Elementos** e **CSS personalizado**.
* **Rótulos**, um cartão próprio abaixo do cartão de configurações, para os textos que os clientes leem.
* **Configurações de complementos** abaixo dos dois, para os extras ao redor do widget, como o selo ao lado do preço do produto, o texto do botão de adicionar ao carrinho e o seletor de data de entrega. Veja [Product Page Add-ons](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/product-page-add-ons-1b9e1n3/).
* **Restaurar design anterior**, apenas em lojas que estilizaram os widgets antes de esta página existir.
* **Quer ajuda para adaptar isto à sua marca?**, com um botão **Conversar com um especialista** que abre um chat com a nossa equipe.

### A prévia

A prévia fica ao lado dos controles e acompanha você enquanto rola a página, para que você veja o que está mudando enquanto muda. Ela mostra a sua página de produto como o comprador a vê, com os widgets de kits e de assinatura empilhados na ordem em que realmente aparecem, e o campo de data de entrega abaixo deles, se você usar um.

Use **Produto da prévia** acima dela para visualizar com as opções e os preços de um produto real em vez de dados de exemplo, e **Variante da prévia** para conferir um produto cujas variantes têm preços diferentes.

Cada alteração aparece na prévia antes de você salvar, então você pode testar várias coisas e descartá-las. Em telas de computador, a prévia nunca fica mais alta que a janela: o título e o rodapé dela ficam fixos e os widgets rolam entre eles.

| Cores e espaçamentos ainda podem ser um pouco diferentes no seu tema real, porque a prévia roda no admin da Shopify e não na sua loja. Abra uma página de produto da loja para ver o resultado final.

### Design

Esta seção mostra o design de assinatura e o layout de kits que estão ativos agora, cada um com uma miniatura.

1. Clique em **Alterar** para abrir **Escolher um design**.
2. Use o seletor no topo para escolher **Widget de assinatura** ou **Widget de kits**. Você pode digitar em **Pesquisar designs** ou filtrar por categoria.
3. Clique no design que você quer. A galeria se fecha e a prévia mostra o design.
4. Salve na barra de salvamento no topo da página. Nada muda na sua loja até você salvar.

Designs de assinatura, nas categorias da galeria:

* **Conversão**
  * **Checkbox**: uma única caixa de seleção para alternar entre compra única e assinatura.
  * **Aurora**: bordas com degradê fluido e efeito de brilho. É o design com o qual uma loja nova começa.
  * **Lure**: o design principal, com destaques de benefícios e uma faixa de desconto.
* **Clássicos**
  * **Classic+**: um layout detalhado, com espaço para opções pré-pagas e várias escolhas. O preço fica no topo e acompanha a opção que o cliente escolheu, e cada opção mantém o próprio preço com a etiqueta de desconto ao lado.
  * **Dropdown+**: todo o detalhe em uma lista suspensa compacta. O preço fica no topo e acompanha a opção que o cliente escolheu, então as linhas dentro da lista suspensa continuam sendo uma lista simples de frequências.
  * **Panel+**: um layout com abas e um botão de opção em cada opção.
* **Minimalistas**
  * **Classic**: um layout simples para opções de pagamento por pedido, com até três escolhas.
  * **Dropdown**: a forma mais compacta de mostrar as suas opções.
  * **Panel**: botões de painel limpos e simples.
* **Estéticos**
  * **Blobs**: um estilo animado para chamar a atenção.

Layouts de kits:

* **Painéis**: linhas, cada uma em seu próprio painel com borda. É o layout com o qual uma loja nova começa.
* **Cartões**: cartões horizontais, bons para comparar duas ou três opções lado a lado.
* **Lista**: linhas verticais com um botão de opção em cada opção. O mais compacto.

Todos os designs são estilizados nesta página, nas seções abaixo, então não há nada para abrir nem para configurar duas vezes. Apenas um design de assinatura e um layout de kits ficam ativos na sua loja por vez, e todas as ofertas usam esses. As configurações dos outros são mantidas, então alternar entre eles não custa nada.

Trocar de design nunca afeta as suas ofertas, os seus preços nem os seus assinantes.

| Os designs **Neon** e **Personalizado** não são mais oferecidos na galeria. Uma loja que já usa um deles continua com ele e ainda vê o respectivo cartão. Um design personalizado é escrito em HTML e CSS, em vez de montado a partir de configurações, e por isso mantém um link **Personalizar** que abre o código que a nossa equipe escreveu para você. Veja [What happened to the widget editor](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/what-happened-to-the-widget-editor-ct911p/#3-designs-personalizados-criados-pela-nossa-equipe).

Depois de salvar alterações nesta página, um botão **Redefinir para o padrão** aparece nesta seção. Ele devolve as suas cores, formato, espaçamento, fonte, elementos, rótulos e CSS personalizado ao que o app traz de fábrica, em todos os designs, e mantém o design e o layout de kits que você publicou. Como todo o resto aqui, só entra em vigor quando você salva.

### Cores

Uma única decisão, gravada em todos os designs de uma vez, então, se você trocar de design depois, a sua loja mantém o visual. Cada tipo de resposta fica em sua própria linha, sob um pequeno título:

* **Do seu tema**, primeiro: a amostra tracejada **Herdar do seu tema** pega tudo do seu tema, seguida dos esquemas de cores do próprio tema, mostrados como amostras em suas cores. Escolher um esquema usa o fundo e o texto dele. Essa linha só aparece se o seu tema publicar esquemas de cores.
* **Cor principal** e **Fundo**, em temas que publicam uma paleta de cores em vez de esquemas de cores, como o Horizon. Veja abaixo.
* **Uma cor, e todo o resto acompanha**: as cores comuns, percorrendo o círculo cromático do azul até o rosa e o vermelho, com os neutros por último e as suas próprias no fim. Escolher uma define a sua cor primária, e tudo o que os widgets desenham a acompanha: a opção que o cliente escolheu, as bordas, os botões de opção e os selos de economia. O texto de um selo é escolhido automaticamente para continuar legível, qualquer que seja a cor. Para a maioria das lojas, isso é todo o trabalho.
* **Degradê**: treze combinações prontas, cada uma desenhada em suas próprias cores, começando em **Aurora** e terminando no único neutro, **Ink & silver**. No meio estão **Midnight**, **Blossom**, **Rose**, **Sunset**, **Sand**, **Ember**, **Mint**, **Forest**, **Ocean**, **Lagoon** e **Amethyst**. Escolha uma e as três paradas dela aparecem abaixo, **Base**, **Segunda** e **Terceira**, para você ajustá-las. Essa linha só aparece enquanto um design capaz de desenhar degradê está publicado; nos outros não haveria nada para ela fazer.

Se o seu tema publica uma paleta de cores em vez de esquemas de cores, não há um par para herdar, então você escolhe o seu em duas linhas desenhadas nas cores do próprio tema:

* **Cor principal** é a cor em que os seus widgets são desenhados: a opção que o cliente escolheu, as bordas, os botões de opção e os selos. O seu texto a acompanha, então não há nada extra para configurar.
* **Fundo** é o cartão atrás dela.

Uma cor não pode ser as duas coisas, então escolher uma que a outra linha já esteja usando troca as duas. Inverter um par de claro sobre escuro é um clique em vez de três.

São alternativas, não camadas, porque respondem à mesma pergunta. Um degradê é uma cor como qualquer outra: a parada **Base** dele é o que o resto do widget adota, então a opção escolhida, as bordas e os selos o acompanham. Escolher uma cor lisa desenha esses designs sem degradê, e escolher um esquema do tema usa o par daquele esquema e deriva a cor do texto dele.

Um degradê chega a tudo no widget que deve chamar a atenção, não só ao contorno. Na opção que o cliente escolheu, ele desenha o nome da opção e o preço. Em todas as opções, escolhidas ou não, ele desenha os selos, as etiquetas de economia e as linhas de brinde e de frete grátis. As linhas de brinde e de frete grátis se movem devagar, o que chama a atenção sem tirá-la do preço. O seu selo de desconto adota o degradê em todos os designs, porque o selo de uma opção de assinatura e o de uma opção de kit são o mesmo objeto; dê ao selo uma cor sua na linha dele em **Elementos** e ele a mantém.

Uma linha de brinde ou de frete grátis fica com contorno na sua cor enquanto a opção não está escolhida, e é preenchida com ela quando o cliente escolhe essa opção. Isso vale tanto para uma cor lisa quanto para um degradê, então uma sequência de opções mostra um único bloco sólido de cor, na opção que o comprador realmente escolheu, e as demais parecem ofertas à espera de serem aproveitadas.

Seja qual for a combinação que você escolher, o texto impresso sobre ela é escolhido para continuar legível. A opção individual fica de fora: é a linha simples de um item a preço cheio, não uma promoção, então mantém um contorno comum e o preço na sua cor habitual.

Defina isto primeiro e use **Elementos**, abaixo, apenas para as partes que você quer que sejam diferentes.

| **Desativar o brilho do Aurora.** O Aurora só se anima enquanto tem um degradê para desenhar. Escolha uma cor lisa em **Uma cor, e todo o resto acompanha** e o Aurora é desenhado sem degradê e sem brilho. Para manter o degradê sem o movimento, escolha outro design ou fale com a gente no chat.

| **Uma cor muito clara inverte o widget.** Um creme, um cinza claro ou um branco gelo não aparece sobre o cartão branco com o qual os designs vêm. Por isso, o cartão escurece, para um tom profundo da sua própria cor, e as suas bordas, botões de opção e texto mantêm a cor em plena intensidade por cima. Escolha um **Fundo** seu e ele é usado no lugar, e voltar a uma cor comum traz de volta o cartão branco.

| A sua cor primária contorna a opção que o cliente escolheu em vez de inundá-la. No design **Checkbox**, em particular, a opção marcada mantém o próprio fundo e recebe a cor na borda e no visto, porque essa opção é o widget inteiro e não uma linha de uma lista.

| Enquanto os seus widgets seguem as cores do próprio tema, uma opção que o cliente não escolheu é contornada com essa tinta atenuada, e a que ele escolheu é o único contorno sólido da lista. O **Lure** desenha a faixa de desconto como uma banda dessa mesma tinta atenuada, e não como uma placa sólida.

| O nome e o preço na opção escolhida não são pintados na sua cor. Eles são escolhidos para ficar legíveis sobre o que quer que preencha essa opção. Defina-os você mesmo nas linhas **Nome da oferta**, **Nome da opção** e **Preço** se quiser algo diferente.

| Se as cores do seu tema não aparecem como você espera, escolha uma cor você mesmo em **Uma cor, e todo o resto acompanha** em vez de herdar do tema. Alguns temas não repassam as cores aos apps.

| Se você estilizou um design elemento por elemento antes de esta página existir, salvar aqui substitui essas cores, da mesma forma que substitui o espaçamento e o arredondamento que você tinha definido. Isso pode ser desfeito: [Restaurar o design anterior](#3-restaurar-o-design-anterior), abaixo, explica como recuperar essa estilização.

### Formato

* **Arredondamento** define o quanto os cantos são arredondados.
* **Espessura da borda** define a largura das bordas.

Em um design que desenha uma borda em degradê, a espessura define essa borda também, para que o degradê e as bordas lisas ao lado dele tenham o mesmo peso. A opção que o cliente escolheu, e a que está sob o ponteiro, são marcadas pela cor no mesmo peso, e não por um anel mais pesado só delas. O arredondamento também vale dentro de uma opção de kit: as linhas de brinde, de frete grátis e de complemento são arredondadas de acordo.

### Espaçamento

O espaçamento tem três partes:

* **Dentro de cada opção**: **Espaçamento superior** e **Espaçamento inferior** definem o espaço acima e abaixo do conteúdo de cada opção de assinatura e de kit. Deixe o inferior como está e ele acompanha o superior. **Espaçamento interno horizontal** define os dois lados.
* **Entre os widgets**: **Espaço** é o espaço entre o widget de kits, o widget de assinatura e o campo de data de entrega, para quando as peças ficam muito juntas ou muito afastadas.
* **Ao redor do widget**: **Espaço acima** e **Espaço abaixo** do conjunto todo. Use-os quando o seu tema coloca o widget muito perto do botão de adicionar ao carrinho ou do preço.

Tudo isso vale para os seus widgets de assinatura e de kits ao mesmo tempo, e para o campo de data de entrega abaixo deles.

| Como um único controle define um valor em todos os lugares, salvar aqui substitui o espaçamento e o arredondamento que você possa ter definido em partes individuais de um design antes de esta página existir. Isso pode ser desfeito: veja [Restaurar o design anterior](#3-restaurar-o-design-anterior).

### Fonte

Uma fonte para o seu widget de assinatura e as suas opções de kit juntos, títulos incluídos:

* **Segue o seu tema**, o padrão: os títulos usam a fonte de títulos do tema e todo o resto, a fonte de corpo, a mesma divisão que o seu tema faz.
* **Fonte do corpo do tema** ou **Fonte dos títulos do tema**: o widget inteiro nessa única fonte.
* **Sistema**, **Serifada** ou **Monoespaçada**: uma fonte que todo dispositivo já tem.
* **Personalizada**: digite o nome de uma fonte que o seu tema já carrega, como `Futura PT`, exatamente como o seu tema a chama. Você pode listar algumas, separadas por vírgulas, e a primeira que o navegador tiver é usada. Só letras, números, espaços, vírgulas e hífens são mantidos. Se o navegador não a tiver, o widget volta para a fonte de corpo do seu tema.

O app nunca carrega uma fonte por conta própria, então uma fonte personalizada só aparece se o seu tema (ou outro app) já a carrega na página de produto. Tamanhos e pesos ficam em cada linha em **Elementos**.

| A prévia do admin não consegue carregar as fontes da sua loja, então as fontes do seu tema e uma fonte personalizada são exibidas lá na fonte do próprio admin. Abra uma página de produto da loja para ver o resultado real.

### Elementos

Esta seção tem uma linha para cada parte do widget, listadas na ordem em que você lê a página de produto. Uma linha vale para todos os designs que têm essa parte, então ocultar o título o oculta em todos eles, e uma linha que o seu design publicado não consegue respeitar nem é exibida.

* **Ambos os widgets**: **Título da oferta**, **Mostrar variantes como amostras**, **Selo de desconto**, **Selo de desconto em cada opção** (somente no **Classic+**) e **Selo de mensagem**.
* **Opções de assinatura**: **Título**, depois a superfície (**Fundo**, **Borda**, **Botão de opção**) e, em seguida, o texto sobre ela: **Nome da oferta**, **Título da seção**, **Nome da opção**, **Descrição**, **Frequência de entrega**, **Preço**, **Preço riscado**, **Preço por unidade**, **Benefícios**, **Ícone do benefício**, **Título dos benefícios** e **Dica informativa**.
* **Opções de kit**: **Título**, **Fundo**, **Borda**, **Botão de opção**, **Título**, **Preço**, **Preço riscado** e **Preço por unidade**.
* **Data de entrega**: **Título**, **Campo** e **Borda**, a estilização do campo de data abaixo dos widgets. Esta seção só aparece quando o **Seletor de data** está ativado em **Configurações de complementos**. Veja [Product Page Add-ons](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/product-page-add-ons-1b9e1n3/#3-seletor-de-data).
* **Layout da página**: **Kit no topo**, que define se o widget de kits fica acima do widget de assinatura, e **Sincronizar preços dos kits**, que define se os preços dos kits acompanham o preço por entrega da assinatura selecionada. Os dois vêm ativados por padrão.

Dentro de **Opções de assinatura** e **Opções de kit**, um pequeno título **Somente neste design** marca as linhas que pertencem ao design que você publicou e a nenhum outro. A lista muda com o design que você publica. Por exemplo:

* **Lista suspensa de entrega**, nos designs que mostram uma seleção para a frequência de entrega (**Dropdown**, **Dropdown+**, **Lure** e **Checkbox**): o preenchimento, o texto e a seta dentro dela, e o tamanho e o peso desse texto.
* **Borda grossa** e **Ocultar a descrição até a escolha**, no **Aurora**.
* **Borda grossa** nas opções de kit, nos layouts que conseguem desenhá-la.

As duas seções de widget são listadas na ordem em que os widgets se empilham na sua página de produto, então o que o comprador vê primeiro é o que você alcança primeiro. Alterne **Kit no topo** e eles trocam de lugar na hora.

| **Borda** e **Fundo** têm duas cores cada: primeiro a comum, depois a da opção que o cliente escolheu. Deixada no padrão, a escolhida acompanha a sua cor primária, que é o que a maioria das lojas quer.

| A segunda cor da linha **Título** do kit, a da opção escolhida, só aparece onde há uma opção preenchida para ela. As suas opções de kit marcam a escolhida com um destaque sutil, e o layout **Painéis** indica qual opção está escolhida pela força da borda. Se você preferir que a opção escolhida seja totalmente preenchida, fale com o suporte e configuramos isso para você.

| **Nome da oferta** e **Nome da opção** são duas linhas, não uma. Nos designs que exibem os dois, o nome da oferta é a linha acima de um conjunto de escolhas, "Assine e economize", e o nome da opção é uma escolha dentro dele, "Entrega todo mês". Nos designs que exibem uma lista simples de opções não há nome da oferta, então só a linha do nome da opção faz algo.

| **Benefícios** é uma linha para as duas listas de benefícios: os vistos sob uma opção de assinatura e os vistos sob a linha de compra única. A cor, o tamanho e o peso valem para as duas. A linha também tem um campo **Espaço** para o espaço entre as linhas; deixe como está e ele acompanha o seu espaçamento. O que cada benefício diz é definido onde você o escreveu, nas opções da oferta.

| **Ícone do benefício** é uma linha própria nos dois designs que desenham um visto, **Lure** e **Checkbox**. A primeira cor é o visto e o contorno dele, a segunda é o disco atrás, que fica transparente até você lhe dar uma cor. O **Aurora** desenha o visto com o próprio degradê do design, então ele acompanha **Cores**.

| Duas coisas não são definidas aqui porque pertencem à oferta, e não ao seu design. Se a linha de compra única aparece e qual opção vem selecionada primeiro são definidos em cada oferta: veja [How to remove the one-time purchase option for a product](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/how-to-remove-the-one-time-purchase-option-for-a-product-lms1pa/). E a imagem do produto em uma opção de kit é a imagem que você envia para essa opção.

### Títulos e o título da oferta

Uma página de produto pode ter um título da oferta e até três títulos de seção.

**Título da oferta** é uma linha em **Ambos os widgets**. Ele imprime o nome da sua oferta uma vez, no topo de tudo, acima das opções de kit, das opções de assinatura e da data de entrega. É o **Nome da oferta** que você deu à oferta na página Ofertas, então, se você renomear a oferta, a página acompanha. Ele vem **desativado até você ativá-lo**, e a cor, o tamanho e o peso são definidos na linha.

**Mostrar variantes como amostras** é uma linha em **Ambos os widgets**. Com ela ativada, cada escolha de variante nos dois widgets mostra as opções como amostras em vez de uma lista suspensa: kits montados pelo cliente e a lista de produtos deles, complementos, brindes (em opções de kit e em opções de assinatura), os produtos de um kit fixo e as escolhas por item em faixas de quantidade e em Compre X, ganhe Y. Onde você definiu uma cor ou uma imagem no valor da opção na Shopify (a amostra de uma opção Cor, por exemplo), a amostra a mostra; outras opções, como tamanhos, mostram o nome. Um valor esgotado aparece riscado e não pode ser escolhido. As amostras adotam as cores do widget: a escolhida é desenhada na sua cor de destaque. As amostras vêm dos valores de opção de produto da Shopify: abra o produto na Shopify e, em **Variantes**, conecte a opção de cor à categoria de metacampo **Cor** e escolha a amostra de cada valor (veja o guia da Shopify, [Using category metafields](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields)). Ela vem ativada em lojas novas e desativada em lojas que instalaram antes, até você ativá-la.

Cada seção tem a própria linha **Título**, com o próprio interruptor, cor, tamanho, peso e layout: **Opções de assinatura > Título**, **Opções de kit > Título** e **Data de entrega > Título**. Os layouts são:

* **Centralizado com linhas**, o título no meio com uma linha saindo para cada lado. É o layout com o qual uma loja nova começa.
* **Centralizado**, o título no meio, sem linhas.
* **Simples**, o título sozinho no início da linha.

O que cada título diz é definido em um lugar diferente:

* **Título da assinatura**: o campo **Título da seção** em **Rótulos**. Ele começa como **{{ subscription_name }}**, que imprime o **Nome da assinatura** da oferta, o nome que você definiu na oferta acima das opções de assinatura (traduzido junto com a oferta). Digite as suas próprias palavras ("Nunca fique sem!") ou misture os dois ("{{ subscription_name }}, cancele quando quiser"). Se ficar vazio, o campo funciona como **{{ subscription_name }}**.
* **Título do kit**: o campo **Nome do kit** na oferta, acima das opções de kit. Deixe-o vazio e o título diz "Bundle & Save". Para não mostrar nenhum título de kit, desative **Opções de kit > Título** em **Elementos**.
* **Título da data de entrega**: **Título do seletor de data**, em **Configurações de complementos > Seletor de data**.

| Todos esses são textos que um comprador lê, então todos podem ser traduzidos. Nomes de ofertas, de assinaturas e de kits são traduzidos em [Configurações > Traduções](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/translations-1f89xct/) em **Ofertas**; os rótulos dos widgets, em **Widgets**.

### Como ler uma linha de elemento

Uma linha é uma única fileira. O nome do elemento à esquerda com o interruptor ao lado e, em colunas à direita:

* A **cor** dele, como uma amostra em que você clica para abrir o seletor de cores.
* A **cor na opção que o cliente escolheu**, como uma segunda amostra, nas partes que ficam diferentes depois de escolhidas.
* O **tamanho do texto**, em pixels.
* O **peso do texto**, do fino ao preto.

O que muda de linha para linha é o interruptor: o nome da opção, os fundos e as bordas não podem ser ocultados, então essas linhas não têm interruptor, e os fundos e as bordas só têm cor, sem texto para dimensionar.

Dois campos não pertencem a nenhuma dessas colunas, então ficam em uma linha própria abaixo delas: um **Espaço**, para um elemento feito de mais de uma linha, e um **Layout do preço**. A lista de benefícios tem o primeiro, e o preço riscado tem os dois.

Em uma tela estreita, os controles descem para uma linha própria abaixo do nome. A estilização só aparece enquanto o elemento está ativado, e uma alteração é gravada em todos os designs que têm o elemento, então trocar de design depois mantém a sua estilização. Passe o mouse sobre o nome de uma linha para ver o que ela abrange.

### Selos

Há dois selos, e são duas linhas em **Ambos os widgets**, porque cada um é definido uma vez para os dois widgets:

* O **Selo de desconto** é calculado a partir do seu desconto e diz "-20%" em uma opção de assinatura e "Economize 20%" em uma opção de kit.
* O **Selo de mensagem** é o que você mesmo escreve em uma opção de kit, no campo **Selo**, como "Mais popular".

Cada um tem o próprio formato, cor de fundo, cor do texto, tamanho do texto e peso do texto. As cores do selo de desconto começam no padrão, que acompanha a sua cor primária; escolha uma cor na linha para definir a sua.

Há quatro formatos:

* **Bolha**, uma pílula arredondada ao lado do título.
* **Etiqueta**, uma etiqueta de mala com uma ponta no lado inicial.
* **Flutuante**, a pílula elevada acima da linha, com uma sombra suave embaixo.
* **Fita**, uma tira colada na borda superior da linha. É o formato com o qual uma loja nova começa para o selo de desconto.

**Flutuante** e **Fita** saem da linha, então são os dois que perguntam em que ponto dela devem ficar: **Início**, **Centro** ou **Fim**.

| O **Classic+** imprime o selo de desconto duas vezes: uma no cabeçalho acima das opções e outra em cada opção abaixo. O segundo tem uma linha própria, **Selo de desconto em cada opção**. Desative-a para deixar só o selo do cabeçalho, ou dê a ele cores, tamanho, peso e formato próprios (**Bolha** ou **Etiqueta**). O **Dropdown+** imprime só um selo, no cabeçalho.

| Para ocultar o selo de desconto, desative a linha dele. O que o selo diz ("Economize 20%", "20% de desconto") é definido em **Rótulos**.

### Cores padrão e personalizadas

Toda cor em uma linha de elemento começa no padrão, e padrão significa a sua cor primária onde a primária comanda aquela parte: a borda, o botão de opção, o fundo quando selecionado. Defina-a uma vez em **Cores** e todas as outras a acompanham.

Dá para distinguir as duas pela amostra. Um contorno tracejado significa que a cor ainda segue a sua paleta; um contorno sólido significa que você mesmo a definiu. Uma amostra xadrez significa que o texto não tem cor própria e usa a cor do texto ao redor, até você escolher uma. Passe o mouse para ver qual é e qual é a cor.

Clique na amostra e escolha uma cor, e essa parte se destaca, mantendo a sua cor, seja qual for a primária. Para devolvê-la ao padrão, clique na amostra de novo e escolha **Usar padrão**: a parte volta a seguir e adota a cor primária atual.

Partes que a primária não comanda, como o nome da opção ou o preço riscado, leem o padrão como a cor com que o design vem. Em um design que desenha degradê, a borda lê o padrão como o degradê.

| Mudar a sua cor em **Cores** vale para toda parte que ainda está no padrão, inclusive em designs que você não está usando no momento. Voltar à amostra tracejada **Herdar do seu tema** devolve essas partes às cores com que o design vem.

### Preços

Os preços têm linhas próprias dentro de **Elementos**, e os dois widgets são separados para você poder mudar um e deixar o outro como está. Para cada widget, você pode desativar:

* **Preço**, o valor em cada opção de assinatura ou de kit.
* **Preço riscado**, o preço cheio riscado ao lado do preço com desconto.
* **Preço por unidade**, o preço por item, como "US$ 3,50 cada". Ele começa desativado no widget de assinatura e ativado nas opções de kit.

**Sugestão de levar mais** (opções de kit, desativada até você ativá-la) adiciona um link abaixo das faixas de quantidade, como "Adicione mais 1 para economizar 15%", enquanto o comprador tem um pacote menor escolhido e um maior economiza mais. Clicar nele escolhe o pacote maior. Ele só aparece em faixas de quantidade simples, não em um kit montado pelo cliente, em um kit fixo, em Compre X, ganhe Y nem em uma opção com brinde, e o texto dele é o campo **Sugestão de levar mais** em **Rótulos**.

O motivo comum para desativar um preço é que o seu tema já o imprime acima do widget e você prefere não dizer duas vezes. Para mostrar só o preço por unidade, desative **Preço** e ative **Preço por unidade**.

Os três têm cor, tamanho e peso. A linha **Preço** da assinatura também tem a segunda amostra, para o preço na opção que o cliente escolheu.

A linha **Preço riscado** da assinatura tem mais dois campos, em uma linha abaixo do tamanho e do peso:

* **Layout do preço**: **Lado a lado** mantém os dois preços em uma linha. **Empilhado** coloca o preço riscado em uma linha própria acima do atual.
* **Espaço**, o espaço entre os dois preços, em pixels.

Cada design guarda as próprias respostas, então configurá-las no design que você publica deixa os outros como estavam.

| O **Classic+** e o **Dropdown+** imprimem um preço no topo do widget, e ele acompanha a opção que o cliente escolheu. Desativar o preço oculta esse também.

| O preço por unidade só é oferecido em designs que imprimem um. O texto ao redor dele, "/ cada" ou "{{ unit_price }} / {{ unit_name }}", é definido em **Rótulos**. O preço unitário que o seu tema mostra abaixo do preço do produto (por 100 g e assim por diante) é outro complemento, **Detalhes do preço da assinatura**, em [Product Page Add-ons](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/product-page-add-ons-1b9e1n3/#3-detalhes-do-preco-da-assinatura).

### A ordem em que as coisas aparecem

* **Qual widget vem primeiro**: **Elementos > Layout da página > Kit no topo**. Vem ativado por padrão; desative para colocar o widget de assinatura acima das opções de kit.
* **A ordem das opções de assinatura**: abra a oferta em **Ofertas** e arraste as opções pela alça em **Opções de assinatura**, depois salve a oferta. A loja as mostra nessa ordem.
* **A linha de compra única**: na oferta, use as setas para cima e para baixo na linha **Compra única** para colocá-la no topo ou no fim da lista.
* **A ordem das opções de kit**: arraste-as em **Opções de kit** na oferta. A linha da opção individual vai para o topo ou para o fim do mesmo jeito que a linha de compra única.
* **Qual opção vem selecionada quando a página carrega**: clique em **Tornar padrão** nessa linha na oferta. Veja [Setting the default option](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/a-beginners-guide-to-subscription-offers-mpp4ps/#3-como-definir-a-opcao-padrao).
* **Um produto em mais de uma oferta**: a assinatura de cada oferta é um grupo próprio no widget. Defina a ordem dos grupos em **Configurações de complementos > Ordem dos grupos de planos**. Essa mesma ordem é usada no checkout.

### Rótulos

É aqui que você reescreve os textos que os clientes leem, no idioma principal da sua loja. Fica abaixo do cartão de configurações, em um cartão próprio. Cada campo vale para todos os designs daquele widget, então o seu texto continua quando você testa outro design, e o cartão só lista os campos que o seu design publicado realmente imprime.

* **Widget de assinatura**: **Título da seção** (aceita {{ subscription_name }} para o Nome da assinatura da oferta), **Linha de compra única**, **Selo de desconto, porcentagem**, **Selo de desconto, valor de desconto**, **Selo de desconto, preço fixo**, **Título das opções de assinatura**, **Linha da pré-paga**, **Faixa de desconto**, **Título da dica informativa**, **Linha da opção** (a linha impressa para cada frequência na lista), **Preço por unidade** e os sufixos de frequência de **A cada dia** a **A cada N anos** ("/ mês", "/ {{ n }} semanas").
* **Widget de kits**: **Etiqueta de economia, porcentagem**, **Etiqueta de economia, caixa em faixas**, **Etiqueta de economia, valor**, **Sufixo por unidade** ("/cada"), **Linha de frete grátis**, **Opção individual**, **Linha de brinde** e **Sugestão de levar mais** ("Adicione mais {remaining} para economizar {value}%").
* **Kit montado pelo cliente**: tudo o que uma opção de kit montado pelo cliente imprime ao redor das escolhas, como o **Título "Inclui"**, o **Título das escolhas**, o **Convite para escolher**, o **Contador de seleção** e **Mínimo não atingido** ("Escolha pelo menos {min} itens").
* **Recompensas e brindes**: os títulos acima das recompensas de Compre X, ganhe Y e dos brindes, e a palavra **Grátis** impressa como o preço deles.

Alguns campos usam marcadores entre chaves, e cada campo diz o que os seus marcadores representam. Mantenha-os no seu texto e mude-os de lugar conforme a frase pedir. Deixe um campo vazio para voltar ao texto original do app.

Alguns textos não estão em **Rótulos**, porque pertencem a uma oferta ou a um complemento:

* **Nomes, descrições e benefícios das opções de assinatura**: em cada opção de assinatura em **Ofertas** (**Nome da opção**, **Descrição**, **Benefícios**). Os nomes das opções não têm edição em massa, então altere-os oferta por oferta; textos válidos para a loja toda, como os sufixos de frequência, são editados uma vez aqui.
* **O nome, a descrição e os benefícios da linha de compra única**: na linha **Compra única** da oferta. Deixe o **Nome** dela vazio e a linha usa **Linha de compra única** de **Rótulos**.
* **Títulos, subtítulos e selos das opções de kit**, e o título **Nome do kit**: na oferta.
* **O texto do botão de adicionar ao carrinho, o selo ao lado do preço do produto e os textos da data de entrega**: em **Configurações de complementos**, veja [Product Page Add-ons](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/product-page-add-ons-1b9e1n3/).

| Estes campos definem o texto no idioma principal da sua loja. Para traduzi-lo para os seus outros idiomas, use [Configurações > Traduções](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/translations-1f89xct/). Uma tradução lá vale mais do que o que você digita aqui para esse idioma.

### CSS personalizado

A última seção do cartão de configurações, abaixo de **Elementos**, para tudo o que os controles acima não alcançam. O CSS escrito aqui vale para os dois widgets na sua página de produto, e a prévia mostra o que ele faz antes de você salvar.

Cada design tem o próprio CSS personalizado: o do design da loja vale onde o design da loja é usado, e o de um design salvo vale onde esse design é usado. Um design novo começa com uma cópia do CSS do design a partir do qual foi criado, e um design feito antes de os designs terem o seu próprio usa o do design da loja até você salvar. Trocar de layout na seção **Design** o mantém. Se você escreveu CSS no antigo editor por design, esse CSS continua valendo por cima.

| Deixe isto vazio, a menos que você conheça os seletores que procura. O CSS escrito aqui não é verificado, então uma regra quebrada pode ocultar parte do seu widget nas páginas de produto. Se você quer uma mudança que os controles não cobrem, como centralizar o widget, peça no chat e escrevemos para você.

Os widgets não aceitam o seu próprio HTML. O layout vem do design que você publica, e tudo o que você pode mudar está nesta página.

### Designs por oferta

Toda oferta usa o **design da loja**, a menos que você dê a ela um design próprio, então uma oferta pode ter aparência diferente das demais: um clube de refil premium nas cores escuras da sua marca, por exemplo, ao lado do seu Assine e economize do dia a dia.

**Dar um design próprio a uma oferta**

1. Vá em [**Supr Bundles & Subscriptions > Ofertas**](https://admin.shopify.com/apps/super-subscriptions/app/offers) e abra a oferta.
2. Na prévia, na linha **Design** abaixo do seletor de produto, clique em **Novo design**. A oferta recebe um design com o nome dela (uma oferta chamada Coffee Club recebe Coffee Club Design), começando como uma cópia do design da loja, e o editor de design abre nele em uma janela em tela cheia sobre a oferta.
3. A prévia da janela é a prévia da própria oferta: o mesmo produto e a mesma variante que você estava visualizando na oferta, e as opções, opções de kit, brindes e textos da oferta como estão agora, inclusive alterações não salvas. Você pode alternar para outro produto da oferta ali.
4. Altere o design, o layout de kits, as cores, o formato, o espaçamento e os elementos. As duas prévias acompanham cada alteração à medida que você a faz. Para renomeá-lo, digite o novo nome em **Nome do design** no topo do cartão **Design**.
5. Feche a janela e salve a oferta. O design é salvo com a oferta, então não há Salvar na janela: **Descartar** na oferta desfaz o design e as alterações dele também, e nada é mantido até você salvar.

Quando a oferta tem um design próprio, a lista suspensa da linha mostra o nome dele e **Editar design** ocupa o lugar de **Novo design**. **Editar design** abre a mesma janela de novo, e as alterações são salvas com a oferta do mesmo jeito. A lista suspensa **Design** alterna a oferta entre **Design da loja**, o design próprio dela e qualquer outro design salvo, e isso é salvo com a oferta; trocar para outro mantém o design, então você pode escolhê-lo de novo. Para excluir o design próprio da oferta, clique na lixeira ao lado de **Nome do design** na janela dele e salve a oferta.

Uma oferta que já usava um design compartilhado com outras ofertas continua com ele. A linha então diz quantas outras ofertas o usam, porque uma alteração ali muda essas ofertas também. Um design compartilhado, como qualquer design aberto na página Design, mantém o próprio **Salvar** na barra de título da janela, e esse salvamento vale para todas as ofertas que o usam.

**Na página Design.** O topo do cartão **Design** lista o design da loja e todos os designs salvos. Escolha um na seleção para editá-lo, clique em **Novo design** para começar outro como cópia do que está aberto e use os ícones de lápis (renomear) e de lixeira (excluir) ao lado para renomear ou excluir o design aberto. Cada oferta pode ter um design próprio, e uma loja pode manter até 50 a mais aqui.

**O que um design abrange.** O design e o layout de kits, as cores, o formato, o espaçamento, os elementos, o **Posicionamento** e o **CSS personalizado**. Os **Rótulos** e as configurações de complementos são compartilhados por todos os designs. Os rótulos são editados no design da loja: enquanto um design salvo está aberto, a nota abaixo das configurações dele tem um botão **Editar o design da loja** que leva você até lá. O cartão **Configurações de complementos** também continua na página enquanto um design salvo está aberto, marcado como compartilhado, e uma alteração ali vale para o design da loja e para todos os designs salvos. As traduções acompanham o layout do design, como no design da loja.

**Na página de produto.** O widget de assinatura de um produto usa o design da primeira oferta que ele mostra. Qual oferta vem primeiro é definido em **Configurações de complementos > Ordem das ofertas** nesta página. Quando ofertas têm como alvo variantes diferentes do mesmo produto, cada variante usa o design da primeira oferta que ela tem, e o widget muda de design conforme o cliente escolhe uma variante: uma variante Glass bottle vendida pelo seu clube premium pode ter a aparência do clube, enquanto a Can ao lado mantém o seu design do dia a dia. Cada opção de kit segue o design da própria oferta. Excluir um design devolve as ofertas dele ao design da loja.

### Salvar as alterações

Nada nesta página é salvo na hora. Altere o quanto quiser, veja tudo na prévia e depois use a barra de salvamento no topo da página para salvar tudo de uma vez, ou descarte e recomece. Depois de salvar, recarregue uma página de produto da sua loja para ver o resultado.

Esta página grava um valor em todos os designs de uma vez. Se você estilizou os seus widgets no antigo editor por design, o seu primeiro salvamento aqui é o momento em que a sua loja passa para a experiência unificada de widgets: uma mensagem **Seus widgets estão ficando melhores** pergunta antes desse primeiro salvamento, e fazemos uma cópia de como os seus widgets estavam antes.

### Restaurar o design anterior

Esta seção é para lojas que estilizaram os widgets no antigo editor por design, antes de esta página o substituir. Se você instalou o Supr Bundles & Subscriptions depois disso, não há design anterior para voltar e não existe o cartão **Restaurar design anterior** na sua página.

Antes de a sua loja passar para a experiência unificada de widgets, salvamos uma cópia de como os widgets dela estão. Essa cópia não expira, e o cartão informa a data em que foi feita.

A partir daí, um cartão **Restaurar design anterior** fica perto do fim desta página. Use-o e os seus widgets voltam exatamente como estavam antes de você migrar. Você pode estilizar de novo depois e restaurar outra vez.

Restaurar substitui tudo o que você alterou nesta página desde que essa cópia foi feita. Não afeta as suas ofertas, os seus preços nem os seus assinantes.

| [What happened to the widget editor](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/what-happened-to-the-widget-editor-ct911p/) explica para onde foi cada controle do antigo editor.

### A linha Powered by Supr

Algumas lojas veem uma pequena linha **Powered by Supr** abaixo do widget de assinatura, ou dentro da dica informativa dele. Se ela aparece depende do seu plano: é removida automaticamente nos planos pagos, e não há interruptor para ela na página Design. Os planos estão listados na [nossa página de preços](https://super-simple.co/pricing.html) e em **Faturamento** no app.

Depois de mudar de plano, abra o app uma vez e recarregue a sua página de produto, e a linha some. Se ela ainda aparecer, fale com a gente no chat e verificamos para você.

A mesma linha pode aparecer no rodapé dos e-mails de assinatura que enviamos por você, e segue a mesma regra.

### Como obter ajuda com o design

O cartão **Quer ajuda para adaptar isto à sua marca?** no fim da página tem um botão **Conversar com um especialista**. A nossa equipe pode ajudar você a escolher um design, combinar as cores e as fontes do seu tema, ajustar o espaçamento no celular ou escrever CSS personalizado para uma mudança que os controles não cobrem. Conte como você quer que o widget fique, uma captura de tela ajuda, e configuramos isso com você.

### Dicas e boas práticas

* Defina primeiro a sua cor, o formato e o espaçamento, e só depois escolha um design. Eles valem para todos os designs, então testar designs não custa nada.
* Deixe as cores dos elementos no padrão, a menos que tenha um motivo. Quanto menos exceções, melhor um design novo vai ficar quando você testá-lo.
* Visualize com um produto real para ver os seus próprios preços e descontos.
* Se um design mostra uma lista suspensa que você não quer, trocar para **Classic** ou **Panel** é o jeito mais rápido de removê-la.
* Para opções lado a lado em vez de empilhadas, use **Panel** ou **Panel+** nas assinaturas e o layout de kits **Cartões**.

### Perguntas frequentes

**Duas ofertas da minha loja podem ter aparências diferentes?**
Sim. Crie um design salvo e escolha-o para uma das ofertas, veja [Designs por oferta](#3-designs-por-oferta).


**Como mudo as cores para combinar com a minha marca?**
Escolha a sua cor em **Cores** e depois altere partes individuais em **Elementos** apenas onde elas devem ser diferentes. Salve na barra de salvamento e recarregue uma página de produto.

**Uma configuração que alterei não aparece na minha loja. Por quê?**
Confira se você salvou e depois recarregue a página de produto. Se ainda não aparecer, provavelmente o CSS do seu próprio tema está sobrescrevendo o widget ali. Mande uma mensagem no chat com o link do produto e corrigimos sem mexer no seu tema.

**Ofertas diferentes podem usar designs diferentes?**
Não. Um design de assinatura e um layout de kits ficam ativos por loja, e todas as ofertas usam esses. A estilização dos outros é mantida, então trocar não custa nada.

**Como oculto o preço, o preço riscado ou o selo de desconto?**
Desative **Preço**, **Preço riscado** ou **Preço por unidade** em **Elementos**, separadamente para as opções de assinatura e as opções de kit. O selo de desconto tem a própria linha em **Ambos os widgets**.

**Como coloco o widget de assinatura acima das opções de kit?**
Desative **Elementos > Layout da página > Kit no topo** e salve.

**Como altero "Assine e economize", "Compra única", "Economize 15%" ou "/cada"?**
No cartão **Rótulos**. O título acima das opções de assinatura é o **Título da seção**, que imprime o **Nome da assinatura** da oferta onde está **{{ subscription_name }}** (o valor inicial dele), e o título do kit é o **Nome do kit** da oferta. Veja [How to Change/Translate Main Language Texts](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/how-to-changetranslate-main-language-texts-1u0k6u/).

**A lista suspensa de entrega aberta fica diferente no Windows e no Mac. Posso estilizá-la?**
A lista suspensa fechada é estilizada em **Elementos > Lista suspensa de entrega**. A lista aberta é desenhada pelo navegador e pelo sistema operacional do comprador, então não pode ser estilizada. Escolha **Classic** ou **Panel** se preferir não ter lista suspensa.

**Posso adicionar o meu próprio HTML ou copiar um design que vi em outro site?**
Os widgets não aceitam HTML próprio. Escolha aqui o design mais próximo e estilize-o, depois use **Conversar com um especialista** e a nossa equipe ajuda você a chegar o mais perto possível.

**Como removo a linha Powered by Supr?**
Ela é removida automaticamente nos planos pagos. Veja [A linha Powered by Supr](#3-a-linha-powered-by-supr).

### Guias relacionados

* [Product Page Add-ons](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/product-page-add-ons-1b9e1n3/)
* [What happened to the widget editor](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/what-happened-to-the-widget-editor-ct911p/)
* [A Beginner's Guide to Subscription Offers](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/a-beginners-guide-to-subscription-offers-mpp4ps/)
* [How to Change/Translate Main Language Texts](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/how-to-changetranslate-main-language-texts-1u0k6u/)
* [Translations](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/translations-1f89xct/)
* [What shoppers see in the cart and at checkout](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/what-shoppers-see-in-the-cart-and-at-checkout-pmtcfu/)
* [The subscription widget is not displayed in my store](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-is-not-displayed-in-my-store-1pxres2/)