Alterar o estilo do selo

Use a guia Design para mudar a aparência de um selo. Os selos de texto oferecem controles de fonte, cor, fundo, borda, opacidade e rotação. Os selos de imagem oferecem controles de opacidade e rotação para a arte selecionada.

Abra um selo no editor

1. Abra Badges & Labels

   No admin da Shopify, abra Sami Product Labels > Badges & Labels.

2. Selecione um selo

   Encontre o selo que você quer atualizar e clique em Edit badge/label na linha dele.

   Para estilizar um novo selo, clique em Create badge e escolha Text badge ou Image badge.

   

   Clique em Edit badge/label no selo que você quer personalizar.

3. Permaneça na guia Design

   O editor abre em Design. As seções disponíveis dependem de você ter selecionado um selo de texto ou de imagem.

Personalize um selo de texto

Escolha uma fonte e a cor do texto

Use os controles abaixo de Badge text para personalizar o texto:

• Font picker — escolha uma fonte da lista integrada.
• Use Custom Font Style — ative esta opção para informar uma família de fontes em Font e escolher um estilo ou peso disponível, como Regular ou Bold.
• Text color — abra o seletor de cores e escolha uma cor que continue legível sobre o fundo do selo.

Escolha uma fonte integrada ou ative Use Custom Font Style e defina a cor do texto.

O tamanho do texto e o espaçamento entre letras são configurados em Size. Veja Alterar o tamanho do selo para esses controles.

Escolha um fundo

Expanda Style e selecione um Fill type:

Fill type	Use para
Solid	Uma única cor de fundo ou uma cor predefinida.
Shape	Uma forma de modelo com tratamento de cor sólida ou em gradiente.
Image	Uma textura, um padrão ou uma arte usada como fundo do selo de texto.

Expanda Style e selecione o tipo de fundo do selo de texto.

Use um fundo sólido

Selecione Solid e escolha uma Background color. Você também pode selecionar uma das predefinições em Choose template.

Use um fundo de forma ou gradiente

Selecione Shape e configure o seguinte:

• Choose from library — abra a galeria de modelos e filtre os designs por categorias como Sales, Autotext, Stock, Free shipping, Pre-order e mais.
• Start color e End color — use a mesma cor para um tratamento liso ou duas cores diferentes para um gradiente.
• Gradient direction — escolha Left to right, Top to bottom, Diagonal ou Radial.
• Choose template — aplique uma forma predefinida direto do editor.

Escolha uma forma, defina as cores e selecione a direção do gradiente.

Use um fundo de imagem

Selecione Image e clique em Select Image para escolher um fundo personalizado. O editor aceita arquivos PNG, JPG ou SVG de até 5 MB. Clique em Remove para limpar o fundo selecionado.

Nota

Esta imagem é usada somente como fundo de um selo de texto. Para exibir uma arte independente, sem texto editável, use um selo de imagem.

Selecione uma arte para usar como fundo de um selo de texto.

Adicione uma borda ou arredonde os cantos

Expanda Border & corners. As duas opções podem ser ativadas de forma independente:

Opção	Controles disponíveis
Add border	Defina Border width de 0 a 8 px, escolha uma Border color e selecione Solid, Dotted ou Dashed.
Round corners	Defina Corner radius de 0 a 100 px.

Adicione uma borda, arredonde os cantos ou use as duas configurações juntas.

Estilize um selo de imagem

Os selos de imagem não mostram os controles de fonte, fundo nem Border & corners do selo de texto. Use Content, no topo da guia Design, para alterar a arte do selo e depois use Advanced settings para ajustar a opacidade ou a rotação.

Para dimensões e posicionamento da imagem, veja Alterar o tamanho do selo e Alterar a posição do selo.

Ajuste a opacidade ou a rotação

Estes efeitos estão disponíveis para selos de texto e de imagem:

1. Expanda Advanced settings.
2. Em Effects, ative a opção de que você precisa.
3. Ajuste o valor enquanto confere a prévia ao vivo.

Efeito	Intervalo
Adjust opacity	0% a 100%
Rotate badge	0° a 360°

Ative Adjust opacity ou Rotate badge e defina o valor do efeito.

Nota

A seção Effects também inclui Use animation. Veja Adicionar animação a um selo para o fluxo completo de animação.

Visualize e salve

Use a barra de prévia para conferir o selo em Collection page e Product page e alterne entre Desktop view e Mobile view. Quando o selo estiver correto em todas as prévias necessárias, clique em Save.

Cuidado

Confira o contraste do texto depois de alterar cores ou opacidade. Um estilo legível em uma imagem de produto pode ser difícil de ler em outra.

Próximas etapas

• Alterar o tamanho do selo: redimensione o selo e ajuste o tamanho do texto ou o espaçamento entre letras.
• Alterar a posição do selo: mova o selo e ajuste a margem ou o preenchimento.
• Adicionar animação a um selo: aplique um efeito de animação e configure a velocidade e o número de repetições.
• Usar CSS personalizado: faça o ajuste fino do selo com CSS personalizado.

Dica

Precisa de ajuda?

Se tiver qualquer dificuldade ao seguir estas etapas, entre em contato pelo e-mail [email protected].