CSS personalizado

Para estilos que vão além do editor visual, o Sami Product Labels inclui um editor de CSS integrado. Você também pode controlar a sobreposição dos selos com z-index, adicionar dicas ao passar o mouse e definir texto alternativo para selos de imagem.

Como adicionar CSS personalizado

1. Abra o editor de selos

   No Sami Product Labels, acesse Badges & Labels. Selecione Create badge ou o ícone Edit badge/label na coluna Actions de um selo existente.

2. Acesse a guia Design

   Selecione Design no editor de selos. Esta guia vem selecionada por padrão quando o editor abre.

3. Role até Advanced Settings

   Expanda Advanced settings perto do fim da guia Design.

4. Ative “Custom css”

   Em Advanced, ative Custom css.

5. Insira um seletor e adicione seu CSS

   O editor de CSS aparece com três opções em CSS reference:

   • .samita_productLabel-content estiliza o selo inteiro.
   • .samita_productLabel-content-text estiliza selos de texto.
   • .samita_productLabel-content img estiliza selos de imagem.

   Selecione a opção de que você precisa. O app insere no editor um seletor com escopo do ID do selo atual, como .__content--94129. Mantenha essa parte específica do selo e adicione apenas as declarações necessárias entre as chaves.

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   Selecione uma classe em CSS reference para inserir no editor de CSS personalizado um seletor com escopo do selo.

6. Visualize e salve

   Confira a prévia ao vivo enquanto edita. Quando o resultado estiver correto, selecione Save e verifique o selo na página de coleção ou de produto relevante da sua loja virtual.

Cuidado

O CSS personalizado é salvo com este selo, mas seus seletores ainda determinam quais elementos da loja virtual ele pode afetar. Mantenha o seletor com escopo do selo gerado pelo app. Um seletor amplo, como .samita_productLabel-content sozinho, também pode corresponder a outros selos.

Controle de z-index

Corrija um selo que está escondido atrás de uma sobreposição da imagem do produto, de um cabeçalho fixo ou de outro selo.

1. Em Advanced settings, ative Z-index.
2. Informe um valor de 1 a 100. Valores maiores colocam o selo na frente de elementos com valores de z-index menores.

Defina um valor de z-index para controlar a sobreposição do selo.

Nota

O z-index também é afetado pelo contexto de empilhamento criado pelo seu tema. Se aumentar o valor do selo não o trouxer para a frente, talvez um contêiner pai do tema precise de um ajuste de CSS próprio.

Dica ao passar o mouse

Adicione uma dica que aparece quando clientes passam o mouse sobre o selo, útil para explicar o que significa “New Arrival” ou “Limited Edition” sem poluir a imagem do produto.

1. Em Advanced settings, ative Show tooltip on hover.
2. Digite o texto da dica que deve aparecer ao passar o mouse.

Adicione o texto da dica exibido quando clientes passam o mouse sobre o selo.

Não coloque informações essenciais apenas na dica. Quem usa telas sensíveis ao toque ou navega pelo teclado pode não acionar o estado de passar o mouse.

Texto alternativo de SEO para selos de imagem

Defina o texto alternativo para que leitores de tela possam descrever o significado de um selo de imagem. Um texto alternativo descritivo também pode ajudar no SEO de imagens.

1. Em Advanced settings, ative Seo alt text.
2. Digite uma descrição concisa da mensagem transmitida pelo selo, como “20% off sale badge” ou “Free shipping label”. Evite o excesso de palavras-chave e expressões como “imagem de”.

Defina o texto alternativo para acessibilidade e SEO.

Próximas etapas

• Alterar o estilo do selo: personalize seu selo usando os controles do editor visual.
• Alterar a posição do selo: posicione seu selo no local certo da página.

Dica

Precisa de ajuda?

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