Neste campo utilizamos as mesmas configurações do passo anterior sobre a página de produto, apenas alterando o campo “Posicionamento do selo” com a seguinte informação:
top:-3px; right:0;
Criando um selo customizado (Black Friday)
Diferentemente dos Selos Padrões, os Selos Customizados seguem condições inseridas manualmente para que sejam aplicados. Neste Tutorial iremos criar um selo customizado de Black Friday que deverá ser exibido em todos os produtos de uma categoria “Black Friday”.
Criamos previamente uma categoria para que possa ser utilizada como condição, caso sua categoria ainda não esteja criada, veja o tutorial: Criando uma nova categoria.
Para incluir um novo selo acesse:
- Catálogo
- Selos dos Produtos
- Selos Customizados
- No canto superior direito clique em “Adicionar Labels”
- Preencha as Informações Gerais
- Nome: Nome do selo para controle interno, “Selo Black Friday” neste exemplo
- Visão de Loja: Todas as Visões de Loja
- Status: Habilitado
Acesse o menu de Selos Customizados.
Acesse o menu de Selos Customizados.
- 2
Conteúdo (Página do Produto)
Aqui é possível inserir uma imagem como selo ou incluir personalizações no campo “Estilo do selo”. Segue detalhamento das funções de cada campo e opções utilizadas:
Imagem: Caso queira utilizar uma imagem como selo, faça upload neste campo. Neste Tutorial, subimos uma imagem como selo.
Texto da Imagem: Conteúdo que deve ser exibido no selo, caso não queira utilizar uma imagem, preencha neste campo o texto que deve ser exibido no selo (exemplo: Black Friday).
Posicionamento do selo: Clique para selecionar a posição do seu selo sobre a imagem do produto ou clique em “Mostrar/Ocultar Editor” para ocultar o editor e inserir a posição manualmente.
Obs: De acordo com o tema da loja pode ser necessário ajustar manualmente a posição para que a exibição fique melhor alinhada.
No selo deste Tutorial ocultamos o editor e inserimos a seguinte posição:
top: -3px; left: 312px;
Estilo do Selo: Código CSS de personalização do selo. Neste selo não incluímos nenhuma personalização pois a arte já está pronta na imagem que foi inserida.
Método de Arredondamento: Define o método de arredondamento para casos onde variáveis de valor serão exibidas. Não aplicável para este caso.
Arredondamento: Define quantas casas o arredondamento irá considerar (Inteiro, 1 ou 2 casas decimais). Não aplicável para este caso.
Conteúdo (Página do Produto).
- 3
Conteúdo (Página de Categoria)
Conteúdo (Página de Categoria).
- 4
Configurando as condições
No selo deste Tutorial utilizaremos a categoria “Black Friday” para que o selo seja aplicado somente nos produtos inclusos nesta categoria.
Para isso realize o seguinte procedimento:
- Acesse a aba “Condições”
- Clique no ícone adicionar “+”
- Escolha Categoria
- Após exibir “Categoria é …”, clique na reticências (…)
- Clique no ícone “Abrir Seletor”
- Selecione a categoria que a regra deve ser aplicada. Neste caso, Black Friday
- Clique em “Aplicar”
- Salve as alterações clicando em “Salvar e Aplicar” no canto superior direito.
- 5
Reindexando as Labels
Importante: Se sua loja é Open ou Custom certifique-se de que a tag @selos está inclusa no html da página, para isso acesse:
- Design
- Páginas
- Verifique nas abas Listagens de Produtos e Página de Produto se a tag @selos ou, por vezes, {{selos}}, está inserida
Confira também nas vitrines em:
- Design
- Componentes
- Filtre pelo tipo “Coleção de Produtos”
- Acesse o componente, na aba “Opções do Componente”
- Verifique se a tag está inserida no campo “Markup HTML”
Caso a tag não esteja nos templates, é necessário incluir, conforme as imagens.
Criando um selo customizado (Black Friday).
Criando um selo customizado (Black Friday).
- 7
Valide em seu site
Seu selo foi criado! Valide no site se estão exibindo corretamente!
Para Black Friday também é interessante criar selos que exibem o desconto no produto, veja o tutorial Criando um Selo Padrão de Promoção para aprender!
