(11) 3181-0675 / (14) 3434-0421 vendas.biz ou a gente te liga

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”.

Acompanhe os passos para criar um selo de frete grátis condicionado a um atributo!

  • Se aplica aos recursos
  • Aprenda em

    7 passos

1

Acesse o menu de Selos Customizados

Inicie acessando:

  1. Catálogo
  2. Selos dos Produtos
  3. Selos Customizados
  4. No canto superior direito clique em “Adicionar Labels”
  5. 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:

  1. 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.
  2. 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:

  1. Acesse a aba “Condições” 
  2. Clique no ícone adicionar “+”
  3. Escolha o atributo, “Frete Grátis” neste caso
  4. Após exibir “Frete Grátis é …”, clique na reticências
  5. Selecione “Sim”
  6. Clique em “Salvar e Aplicar”
5

Reindexando as Labels

Após criar o selo é necessário reindexar os selos para que as alterações sejam aplicadas. Para isso acesse:

  1. Catálogo
  2. Selos dos Produtos
  3. Selos Customizados
  4. No canto superior direito clique em “Reindexar Labels”
  5. Após reindexar os selos, limpe as caches do sistema

Após o procedimento, ao acessar a aba “Produtos Indexados” serão exibidos os produtos que atendem a condição especificada na aba “Condições” e devem estar com o selo aplicado.

Importante: Se após a indexação nenhum produto for exibido na aba “Produtos Indexados” pode ser que sua condição esteja com algum problema de configuração, verifique novamente ou contate nosso Suporte!

6

Fique atento!

Importante: Se sua loja é Open ou Custom certifique-se de que a tag @selos está inclusa no html da página, para isso acesse:

  1. Design
  2. Páginas
  3. 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:

  1. Design
  2. Componentes
  3. Filtre pelo tipo “Coleção de Produtos”
  4. Acesse o componente, na aba “Opções do Componente”
  5. 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.

 


Ficou com dúvidas? Contate nosso Suporte através de:

https://suporte.bizcommerce.com.br/

E-mail: suporte@bizcommerce.com.br

Telefones: (11) 3181-0675 ou (14) 3434-0421 – Opção 2

Treinamento

Caso você já seja nosso cliente, você pode agendar um treinamento com nossa equipe para sanar dúvidas pontuais e aprender a controlar sua loja por completo!

Se você ainda não é nosso cliente mas deseja tirar alguma dúvida técnica, por favor entre em contato por telefone:

(11) 3181-0675 / (14) 3434-0421



Mudar minha versão ou plano

Você pode mudar sua versão ou plano preenchendo nosso formulário abaixo ou entrando em contato com nosso suporte via telefone!

(11) 3181-0675 / (14) 3434-0421




Migrar para biz!

Será um prazer receber você como nosso cliente!

Preencha o formulário abaixo para que nossa equipe comercial entre em contato com você para uma conversa!