Artigos sobre: Widgets

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

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
Como migrar para a experiência unificada de widget
Como restaurar o design anterior
Fontes
Designs personalizados criados pela nossa equipe
Perguntas frequentes
Guias relacionados

Para onde tudo foi

Tudo o que o editor antigo fazia está na página Design, 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. 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. 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, logo abaixo.
A fonte dos dois widgets fica na seção 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, uma linha por parte. Mostrar ou ocultar uma parte também fica ali.
O CSS personalizado vem logo depois de Elementos (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, 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.

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:

Perguntamos antes desse primeiro salvamento e explicamos o que ele fará.
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 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, 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

Atualizado em: 24/10/2026

Este artigo foi útil?

Obrigado!