Criando um Selo Customizado (Frete Grátis)
Diferentemente dos Selos Padrões, os Selos Customizados seguem condições inseridas manualmente para que sejam aplicados. Neste Tutorial iremos criar um selo customizado utilizando um atributo como condição, isto é, utilizaremos um atributo de Sim/Não na condição onde o sele será aplicado somente para os produtos que estiverem com esta opção como “Sim”.
Inicie acessando:
- 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, “Frete Grátis” neste exemplo
- Visão de Loja: Todas as Visões de Loja
- Status: Habilitado
- 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 não utilizaremos essa opção.
- Texto da Imagem: Conteúdo que deve ser exibido no selo. Neste exemplo preenchemos como: “Frete Grátis”.
- 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: 0; left: 7px;
Estilo do Selo: Código CSS de personalização do selo. Neste exemplo utilizamos o seguinte código para customização:
background-color: #ff523c; border-radius: 6px; height: 29px; width: 85px; text-align: center; padding: 7px; color: #f9f9f9; font: bold 1.0em/14px arial;
OBS:
- A cor do selo é definida em “background-color”, caso queira alterar, insira neste campo o código html da cor desejada. A cor do texto é definida em “color”, caso queira alterar, insira neste campo o código html da cor desejada.
- A altura e largura do selo são determinadas em height e width respectivamente, dessa forma, caso queira aumentar ou diminuir a label, altere os valores inseridos nestes campos.
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.
- 3
Conteúdo (Página de Categoria)
Neste campo utilizamos as mesmas configurações do passo anterior sobre a página de produto, apenas alterando o posicionamento, veja na imagem a seguir.
- 4
Configurando as condições
No selo deste Tutorial utilizaremos o atributo “Frete Grátis” que é do tipo “Sim/Não” para que o selo seja aplicado somente nos produtos que tem esse atributo como “Sim”. Para isso realizamos o seguinte procedimento:
- Acesse a aba “Condições”
- Clique no ícone adicionar “+”
- Escolha o atributo, “Frete Grátis” neste caso
- Após exibir “Frete Grátis é …”, clique na reticências
- Selecione “Sim”
- Clique em “Salvar e Aplicar”
- 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.
- 7
Valide em seu site
Após seguir os passos do Tutorial, valide no site se os selos estão exibindo corretamente! Prefira uma aba anônima para que a cache do navegador não influencie na visualização. Veja nas imagens abaixo como o selo deve ser exibido.
-
Ainda tem dúvidas? Sem problema. Nosso time de suporte te ajuda.
-
Abra um chamado:
A equipe de atendimento da Biz está a posta para te atender, crie um ticket ou envie um e-mail.
Criar Tickete-mail: [email protected]
-
Se preferir faça uma ligação: