Personalizando a aparência de cada elemento do widget

A seção Estilo do widget divide o widget da página do produto em elementos individuais, para que você possa personalizar cada um separadamente. Abra-a no editor de pacotes e você encontrará um conjunto de painéis sanfonados, um para cada elemento, nos quais é possível controlar cores, fontes, bordas, espaçamento, selos e muito mais.

Como funciona a seção Estilo do widget

Abra a aba Estilo do pacote e encontre Estilo do widget. Clique no título de um painel para revelar os controles desse elemento. Ao passar o cursor sobre um título, o elemento correspondente é destacado na prévia. Alguns painéis aparecem apenas quando o recurso correspondente está disponível no pacote.

A maioria dos painéis compartilha os mesmos componentes básicos: um seletor de cores, um tamanho de fonte e um seletor de estilo da fonte. Os painéis que personalizam uma caixa, como o cartão de oferta ou um selo, também exibem cor de fundo, cor da borda, largura da borda e raio dos cantos. Suas alterações são salvas junto com o restante do pacote.

Os painéis, elemento por elemento

Cabeçalho

Controla a cor do texto, o tamanho da fonte e o estilo da fonte do cabeçalho do widget. Insira o texto do cabeçalho mais acima na aba Estilo para revelar Alinhamento do cabeçalho (Esquerda, Centro, Centro com linha ou Direita). Quando o alinhamento está definido como Centro com linha, um controle adicional aparece neste painel para definir a cor e a espessura da linha.

Cartão de oferta

Esta é a caixa ao redor de cada oferta, ou nível de quantidade. É o maior painel porque abrange três estados visuais:

• Oferta não selecionada: cor de fundo, cor da borda e largura da borda para o estado padrão.
• Oferta ao passar o mouse: os mesmos três controles aplicados quando o cliente passa o mouse sobre o cartão.
• Oferta selecionada: os mesmos três controles para a oferta escolhida no momento.

O painel também define propriedades compartilhadas dos cartões: raio dos cantos, espaço entre os cartões, preenchimento horizontal e vertical e uma opção de Rádio para mostrar ou ocultar o botão de rádio. O efeito de fundo animado é definido separadamente com o botão Decoração mais acima na aba Estilo (Blobs, Anéis, Corações, Explosão, Porcentagem, Estrelas, Relógio ou Dinheiro) e aparece somente na oferta selecionada. As cores do cartão da oferta também controlam a aparência do botão de rádio.

Título e subtítulo da oferta

Dois painéis separados, cada um com uma cor, tamanho da fonte e estilo da fonte para a linha do título e a linha do subtítulo da oferta.

Etiqueta de desconto

Define o estilo da etiqueta de desconto com cor do texto, cor de fundo, tamanho da fonte e estilo da fonte. Observe que essas configurações também afetam os selos extras de brindes.

Imagem da oferta

Controla o tamanho da imagem da oferta, o raio dos cantos, a cor da borda, a largura da borda e uma Sombra (Nenhuma, Pequena, Média ou Grande). Também define como a imagem é exibida:

• Original: mantém a proporção nativa da imagem.
• Quadrada: recorta a imagem em formato quadrado.
• Quadrada (superior): recorta a imagem em formato quadrado, mantendo a parte superior.
• Quadrada (ajustada): ajusta a imagem inteira dentro de um quadrado sem recortá-la.

Selo de quantidade

Define o estilo do pequeno número de quantidade que pode aparecer sobre a imagem da oferta. Você pode definir a cor do texto, a cor de fundo, o raio dos cantos, o tamanho da fonte, o estilo da fonte e a Posição (Superior direita, Superior esquerda, Inferior direita ou Inferior esquerda). Esse número aparece na imagem da oferta quando a opção "Mostrar selo de quantidade" está ativada.

Etiqueta da variante

Define a cor, o tamanho da fonte e o estilo da fonte dos títulos das opções de variante (por exemplo, Tamanho ou Cor) e dos números das linhas.

Menu suspenso

Para menus suspensos de variantes, use o painel separado Menu suspenso para ajustar texto, fundo, borda, cantos e preenchimento.

Selo da oferta

O selo é o destaque (como "Mais popular") exibido em uma oferta. Além da cor do texto, cor de fundo, tamanho da fonte e estilo da fonte usuais, este painel oferece um seletor de Formato do selo com várias predefinições:

• Padrão, Dobrado, Cápsula
• Seta para a direita, Seta para a esquerda
• Quadrado
• Banner, Banner arredondado
• Fita de canto, Fita lateral, Fita lateral alternativa, Fita lateral arredondada

Preço

O painel Preço reúne três estilos de texto, cada um com sua própria cor, tamanho da fonte e estilo da fonte:

• Preço principal: o preço de venda ativo.
• Preço de comparação: o preço "anterior" riscado.
• Texto por item: o texto do preço por unidade.

Pacote

Os pacotes de produtos também têm um painel Pacote para o texto do título do produto, a borda entre os itens do pacote e o sinal de mais entre os produtos.

Benefícios

Define o estilo da lista de benefícios. Aqui você define um tamanho da fonte e um estilo da fonte compartilhados, além de uma Cor do texto e uma Cor do ícone separadas, para que os ícones e o texto possam ter cores diferentes.

Brinde e upsell

Define o estilo do bloco de brinde gratuito em dois estados, cada um com uma cor de fundo, cor do título, tamanho da fonte e estilo da fonte:

• Brinde da oferta selecionada: o bloco de brinde da oferta escolhida.
• Brinde da oferta não selecionada: o bloco de brinde das outras ofertas.

Um terceiro grupo, Imagem do brinde, controla a largura e o raio dos cantos da imagem do brinde.

Imagens de brindes e pop-ups de mix & match

Abra Estilo > Estilo do modal > Modal de brinde e localize Ajuste da imagem. Você também pode acessar esses controles em Personalizar estilo do modal ao lado de um seletor de brinde ou de mix & match. Escolha Original para preservar as proporções da foto inteira ou Quadrada para miniaturas uniformes. A configuração é compartilhada pelos pop-ups de seleção de brindes e de grupo de pacotes dentro deste desconto; as imagens do widget principal usam os controles separados de Imagem da oferta.

Rodapé

Define a cor, o tamanho da fonte e o estilo da fonte do texto do rodapé do widget.

Contêiner e largura máxima

O painel Contêiner controla a largura geral do widget por meio da configuração Largura máxima:

• Padrão da Shopify (44rem): limita o widget a 44rem dentro do espaço disponível.
• Largura total (100%): permite que o widget se estenda até preencher o contêiner.
• Personalizada: exibe um campo Largura para inserir um valor em pixels.

Este painel também inclui uma Cor de alerta usada no texto de alerta de baixo estoque.

Use Margem superior e Margem inferior aqui para ajustar o espaço ao redor do widget deste desconto antes de adicionar CSS personalizado.

A largura total preenche o contêiner pai do widget. Ela não pode ampliar uma coluna estreita de informações do produto no seu tema.

Dicas de edição

• Observe a prévia ao vivo enquanto trabalha. Como passar o mouse sobre o título de um painel destaca o elemento correspondente, você pode confirmar que está editando a parte certa antes de alterar um valor.
• Defina juntos os três estados do cartão da oferta (não selecionado, ao passar o mouse e selecionado) para que o estado selecionado se destaque claramente dos demais.
• Se precisar de estilos que os painéis não oferecem, o painel CSS personalizado na parte inferior da seção permite adicionar CSS para substituir os estilos do widget.