> ## 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 que aconteceu com o editor de widget

| Procurando o botão **Personalizar** ou a página **Widget**? A estilização agora acontece na [página Design](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/): acesse [**Supr Bundles & Subscriptions > Design**](https://admin.shopify.com/apps/super-subscriptions/app/widget).

O widget de assinatura e as opções de kit eram estilizados separadamente, design por design, cada um em uma página própria. Para que parecessem uma coisa só, era preciso tomar cada decisão duas vezes, e experimentar outro design significava recomeçar do zero.

Agora eles compartilham um único conjunto de controles na página Design. Essa é a **experiência unificada de widget**. O item de menu que se chamava **Widget** agora é **Design**, e os links antigos para o editor de um design específico abrem a página Design.

Nada mudou sozinho na aparência dos seus widgets. Suas configurações estão exatamente onde estavam, e as páginas de produto continuam iguais até você decidir alterar algo.

| Se você instalou o Supr Bundles & Subscriptions recentemente, este artigo é história, não novidade: na sua loja sempre existiu um único lugar para estilizar os widgets, e ele é a página Design.

### Índice

* [Para onde tudo foi](#3-para-onde-tudo-foi)
* [Como migrar para a experiência unificada de widget](#3-como-migrar-para-a-experiencia-unificada-de-widget)
* [Como restaurar o design anterior](#3-como-restaurar-o-design-anterior)
* [Fontes](#3-fontes)
* [Designs personalizados criados pela nossa equipe](#3-designs-personalizados-criados-pela-nossa-equipe)
* [Perguntas frequentes](#3-perguntas-frequentes)
* [Guias relacionados](#3-guias-relacionados)

### Para onde tudo foi

Tudo o que o editor antigo fazia está na [página Design](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/), e agora vale para todos os designs de uma vez, não para um só:

* **Escolher um design** fica na seção **Design**, no topo: clique em **Alterar** ao lado do widget de assinatura ou do widget de kit para abrir a galeria.
* **As cores** ficam na seção [Cores](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-cores). Escolha uma cor e a opção selecionada, as bordas, os botões de opção e os selos a seguem.
* **O arredondamento e a espessura da borda** ficam na seção [Formato](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-formato). O preenchimento interno de cada opção, o espaço entre os widgets e o espaço ao redor do widget inteiro ficam na seção [Espaçamento](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-espacamento), logo abaixo.
* **A fonte** dos dois widgets fica na seção [Fonte](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-fonte). Se você deixar em **Segue o seu tema**, eles usam as fontes do seu tema.
* **A estilização por elemento**, a cor, o tamanho e o peso do texto de cada parte, fica em [Elementos](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-elementos), uma linha por parte. Mostrar ou ocultar uma parte também fica ali.
* **O CSS personalizado** vem logo depois de **Elementos** ([CSS personalizado](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-css-personalizado)). Ele pertence à sua loja, não a um design, então continua ao trocar de design.
* **Os textos** ficam no card [Rótulos](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-rotulos), abaixo das configurações, incluindo os sufixos de frequência de entrega, o preço por unidade e a linha da opção, que antes só podiam ser alterados em alguns designs.
* **O selo de assinatura, o texto do botão de adicionar ao carrinho, a prioridade do plano e os outros complementos** ficam no card **Configurações de complementos**, mais abaixo na página.

| Alguns controles mais finos ainda não têm uma linha na página Design, como o estilo usado para marcar a opção de kit escolhida. Tudo o que você definiu antes continua aplicado, e o suporte pode alterar isso para você enquanto isso. Conte o que você procura e configuraremos na sua loja.

### Como migrar para a experiência unificada de widget

Se você estilizava seus widgets no editor antigo por design, a sua loja passa para o novo modelo na primeira vez que você salva na página Design. Até lá, nada muda.

Como a página Design grava um único valor em todos os designs de uma vez, esse primeiro salvamento aplica as suas cores, o arredondamento e o espaçamento em todos os lugares, e não apenas no design que você está vendo. É esse o objetivo da página, mas também é uma surpresa na primeira vez, então acontecem duas coisas:

1. Perguntamos antes desse primeiro salvamento e explicamos o que ele fará.
2. Antes de aplicar qualquer coisa, salvamos uma cópia de como os seus widgets estão agora.

O que você ganha em troca:

* **Um estilo, todos os designs.** Suas cores, o arredondamento e o espaçamento valem ao mesmo tempo para o widget de assinatura e para as opções de kit, então os dois sempre combinam na página do produto.
* **Trocar de design é fácil.** Seu visual passa para todos eles, então você pode experimentar outro design sem refazer a estilização da loja do zero.
* **Muito mais controle.** Cada elemento tem uma linha própria com cor, tamanho e peso, há quatro formatos de selo para escolher e todos os textos voltados ao cliente ficam em um só lugar.
* **Veja antes de salvar.** Uma pré-visualização ao vivo da sua página de produto real mostra os dois widgets empilhados como o comprador os vê.

Suas ofertas, seus preços e seus assinantes não são afetados.

### Como restaurar o design anterior

Esta seção é para lojas que estilizavam seus widgets no editor antigo por design. Se você instalou o app depois que ele foi encerrado, não há um design anterior para voltar e a sua página Design não tem o botão **Restaurar design anterior**.

A cópia feita antes do seu primeiro salvamento não expira. A partir daí, um botão **Restaurar design anterior** fica perto do fim da página Design. Clique nele e seus widgets voltam exatamente como estavam antes de você passar para a experiência unificada de widget, não importa há quanto tempo.

Você pode estilizar de novo depois e restaurar outra vez. O botão continua lá, então restaurar nunca é a palavra final.

| Restaurar substitui tudo o que você alterou na página Design desde que aquela cópia foi feita, porque devolve o design inteiro ao que era. Isso não afeta as suas ofertas, os seus preços nem os seus assinantes.

Depois que você salvar alterações suas, um botão **Redefinir para o padrão** também aparece na seção **Design**. Ele devolve as suas cores, o formato, o espaçamento, os elementos, os rótulos e o CSS personalizado aos padrões do app na pré-visualização e mantém os designs que você publicou. Nada muda na sua loja até você clicar em **Salvar**, e **Descartar** traz o seu visual de volta.

### Fontes

Os widgets usam as fontes do seu tema, a menos que você escolha uma, então, por padrão, combinam com a página em que estão. A maioria dos temas define duas: uma fonte de títulos e uma fonte de corpo de texto, ambas nas configurações de tipografia do tema.

* **Os títulos** usam a fonte de títulos do seu tema: o título do bloco de kit, o título de cada opção de kit e o nome de cada opção de assinatura e da linha de compra única.
* **Todo o resto** usa a fonte de corpo do seu tema: preços, descrições, texto de economia e o restante.

É a mesma divisão que o seu tema faz, então o widget parece parte da página do produto, e não um bloco separado. Temas que definem apenas uma fonte simplesmente a usam em tudo.

Para usar outra fonte, abra a seção [Fonte](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-fonte) da página Design. Ela define uma fonte para o widget de assinatura e as opções de kit juntos, títulos incluídos: a fonte de corpo ou de títulos do seu tema, uma fonte de sistema, serifada ou monoespaçada, ou **Personalizada**, com o nome de uma fonte que o seu tema já carrega. **Segue o seu tema** mantém a divisão acima.

Os **tamanhos** e os **pesos** da fonte são definidos por elemento em [Elementos](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/#3-elementos), independentemente das famílias de fonte.

| A pré-visualização no admin não consegue carregar as fontes da sua loja virtual, então as fontes do seu tema e uma fonte personalizada aparecem na fonte do próprio admin. Abra uma página de produto na sua loja para ver o resultado real.

### Designs personalizados criados pela nossa equipe

Dois designs mantêm um editor próprio, porque são escritos em HTML, CSS e JavaScript em vez de montados a partir de configurações: o design de assinatura **Personalizado** e o layout de kit **Personalizado**.

Se a sua loja já usa um deles, nada muda. Ele continua na galeria de designs em **Avançado**, com um link **Personalizar** que abre o editor próprio dele (ou um link **Falar com o suporte**, se a nossa equipe ainda não o criou). As lojas que não usam um design Personalizado não o veem mais na galeria.

Se os designs prontos, **Cores**, **Formato**, **Espaçamento**, **Fonte**, **Elementos** e **CSS personalizado** não conseguem dar o visual que você quer, clique em **Conversar com um especialista** na parte de baixo da página Design. Envie uma captura de tela ou um link para um design de que você gosta e ajudaremos você a chegar lá.

### Perguntas frequentes

**Onde está o botão Personalizar do meu widget?**
Não existe mais um editor separado por design. Tudo está em **Design** e vale para o design que você publicar.

**Para onde foi a página Widget?**
Ela agora se chama **Design**, no menu do app.

**Troquei de design e as minhas cores continuaram as mesmas. Está certo?**
Sim. As cores, o formato, o espaçamento, a fonte, os estilos dos elementos, os rótulos e o CSS personalizado pertencem à sua loja, não a um design, então passam para o novo design quando você troca.

**Posso recuperar o visual antigo do meu widget?**
Se a sua loja estilizava os widgets no editor antigo, clique em **Restaurar design anterior** perto do fim da página Design.

**Vocês podem criar um design de widget personalizado para mim?**
Comece pelos designs prontos e pelo **CSS personalizado**. Depois, clique em **Conversar com um especialista** na página Design e conte o que você procura.

### Guias relacionados

* [O widget de assinatura](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/the-subscription-widget-l9335l/)
* [Como ativar o widget de assinatura na loja virtual](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/how-to-enable-the-subscription-widget-in-the-online-store-1lpw08p/)
* [Tipos de kit: descontos por quantidade, Compre X Leve Y, kits fixos e monte sua caixa](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/bundle-types-quantity-breaks-buy-x-get-y-fixed-bundles-and-build-a-box-q04e6x/)
* [Traduções](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/translations-1f89xct/)
* [Guia para iniciantes: ofertas de assinatura](https://supr-bundles-and-subscriptions.crisp.help/pt-br/article/a-beginners-guide-to-subscription-offers-mpp4ps/)