Variáveis Globais

As Variáveis Globais funcionam como uma tag que pode possuir um código simples, de cor, de número e de HTML dentro delas e que podem ser inseridas em diversos locais da sua loja virtual, como rodapé, cabeçalho, páginas de informação e produtos, etc. 

Com elas, é possível complementar informações e conteúdos (como imagens, informações em texto, etc) mais rapidamente e de forma muito mais simplificada no template da sua loja virtual sem necessidade de manipular frequentemente o código HTML (ou CSS) da sua loja.

Todos os novos templates da plataforma, a partir do dia 1° de abril de 2021, passarão a vir com variáveis globais padronizadas para personalização. Para saber como personalizar as variáveis globais do seu template, clique aqui!

Como criar uma Variável Global personalizável

Para saber como criar as Variáveis Globais, siga os passos abaixo:

1- Acesse o painel administrativo da sua loja virtual.

2- Clique em “Layout >> Variáveis Globais”.

3- Na tela “Variáveis Globais”, você poderá criar um Novo Grupo de variáveis.

Os grupos de variáveis servem como uma organização e identificação das variáveis.

Para criar um novo grupo de variáveis, clique em “+ Novo Grupo”.

4- Na tela que abrir, “Criar novo Grupo de variáveis”, preencha as informações necessárias:

4.1- Em “Identificação (ID)”, defina uma identificação para o grupo; ela deverá conter apenas letras e sem espaço/acentos.

4.2- Em “Descrição”, adicione uma breve descrição do seu grupo de variáveis.

4.3- Depois de feita essas configurações, clique “Criar grupo”.

4.4- Por fim, clique em “Ok!”.

5- O seu Grupo de variável ficará salvo na tela “Variáveis Globais”. Para criar variáveis dentro dele, clique em “ { } Variáveis”.

Você também pode excluir um Grupo de variável clicando no ícone vermelho de lixeira.

6- Na tela “Grupo [nome do grupo]”, você irá visualizar as suas variáveis já criadas.

Também existem algumas ações que você pode realizar:

  • Copie uma variável clicando no botão azul de copiar e a use no cabeçalho, rodapé e páginas da loja virtual.
  • Ative ou desative o Status de uma variável.
  • Remova uma variável clicando no botão vermelho de lixeira.
  • Edite uma variável clicando no botão amarelo de lápis.

7- Para criar uma variável, clique em “+ Nova variável”.

8- Uma tela abrirá, selecione o tipo de variável que deseja criar; há duas opções:

  • Simples: crie uma variável de texto.
  • Cor: crie uma variável de cor.
  • Numérico: crie uma variável apenas de números.
  • HTML: crie uma variável com qualquer tipo de informação usando código HTML.

8.1- Variável simples

8.1.1- Clique na opção “Simples”.

8.1.2- Na tela “Nova variável”, faça as seguintes configurações:

8.1.2.1- Em “Chave de identificação”, defina o nome da sua variável; ele deverá conter apenas letras, sem caracteres especiais. Por exemplo: telefone_da_loja

8.1.2.2- Em “Breve descrição”, adicione uma breve descrição para a sua variável.

8.1.2.3- Em “Valor”, preencha com a informação que a sua variável irá passar. Por exemplo: (031) 9 9910-7019

8.1.2.4- Depois de preencher as informações, clique em “Inserir” para salvar sua variável.

8.1.2.5- Por fim, clique em “Ok, entendi.”.

8.2- Variável de cor

8.2.1- Clique na opção “Cor”.

8.2.2- Na tela “Nova variável”, faça as seguintes configurações:

8.2.2.1- Em “Chave de identificação”, defina o nome da sua variável; ele deverá conter apenas letras, sem caracteres especiais. Por exemplo: cor_da_loja

8.2.2.2- Em “Breve descrição”, adicione uma breve descrição para a sua variável.

8.2.2.3- Abaixo, na caixa de Cor, coloque o código hexadecimal da cor desejada para a variável ou escolha uma cor clicando no quadrinho, como na imagem abaixo:

8.2.2.4- Depois de preencher as informações, clique em “Inserir” para salvar sua variável.

8.2.2.5- Por fim, clique em “Ok, entendi.”.

8.3- Variável numérica

8.2.1- Clique na opção “Numérico”.

8.2.2- Na tela “Nova variável”, faça as seguintes configurações:

8.2.2.1- Em “Chave de identificação”, defina o nome da sua variável; ele deverá conter apenas letras, sem caracteres especiais. Por exemplo: numero_da_loja

8.2.2.2- Em “Breve descrição”, adicione uma breve descrição para a sua variável.

8.2.2.3- Abaixo, em “Valor numérico”, adicione os números que desejar para a variável.

8.2.2.4- Depois de preencher as informações, clique em “Inserir” para salvar sua variável.

8.2.2.5- Por fim, clique em “Ok, entendi.”.

8.4- Variável HTML

8.4.1- Clique na opção “HTML”.

8.4.2- Na tela “Nova variável”, faça as seguintes configurações:

8.4.2.1- Em “Chave de identificação”, defina o nome da sua variável; ele deverá conter apenas letras, sem caracteres especiais. Por exemplo: logo_da_loja

8.4.2.2- Em “Breve descrição”, adicione uma breve descrição para a sua variável.

8.4.2.3- Abaixo, na caixa de edição de texto, clique em “Código-Fonte” e preencha com o HTML que desejar para a sua variável.

Você pode criar banners, imagens, informações e muito mais!

8.4.2.4- Depois de preencher as informações, clique em “Inserir” para salvar sua variável.

8.4.2.5- Por fim, clique em “Ok, entendi.”.

Pronto, agora você já possui suas variáveis criadas.

9- Por fim, clique na nuvem laranja para aplicar o cache da loja virtual.

Como usar uma variável

Para saber como usar as Variáveis Globais, siga os passos abaixo:

1- 1- Acesse o painel administrativo da sua loja virtual.

2- Clique em “Layout >> Variáveis Globais”.

3- Na tela “Variáveis Globais”, clique em “Variáveis” no Grupo de variáveis que deseja usar a variável.

4- Na tela “Grupo [nome do grupo]”, copie a variável que deseja usar clicando no botão azul de copiar.

5- Depois disso, você pode usar essa variável  no cabeçalho, rodapé e páginas da loja virtual como desejar.

Ao aplicar a variável de HTML e de texto simples com caracteres especiais, adicione “ | raw “ no final da variável. Assim: {{ variables.group.id|raw }}

6- Por fim, clique na nuvem laranja para aplicar o cache da loja virtual.

Pronto, agora você já sabe como usar as Variáveis Globais personalizadas na sua loja virtual.

Ficou com alguma dúvida? Entre em contato conosco!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *