Variáveis Globais: o que são e como funcionam?

Resumo do Conteúdo

O que são as Variáveis Globais?

As Variáveis Globais funcionam como uma tag que pode possuir uma informação simples, de texto, cor, número, sim/não ou até informações mais complexas, como um bloco inteiro em HTML.

Essas tags podem ser inseridas em diversos locais da sua loja virtual, como rodapé, cabeçalho, páginas de informação, descrição de produtos ou até no layout de sua loja via CMS.

Como funcionam as Variáveis Globais?

Com elas, é possível complementar informações e conteúdos 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. Além disso, as variáveis podem ser reutilizadas em vários lugares de sua loja simultaneamente.

Um bom exemplo prático de uso para as variáveis são blocos de conteúdo que precisem ser usados em dezenas ou até centenas de produtos, como tabelas de medidas, informativos, tutoriais, etc.

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 “Minha Loja>> 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- Após serem feitas 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:

  • Tipos de variáveis:
  • Texto Simples: crie uma variável de texto;
  • Numérico: crie uma variável apenas de números;
  • Cor: crie uma variável de cor que pode ser personalizada de forma visual;
  • HTML: crie uma variável com qualquer tipo de informação usando código HTML;
  • Imagem: crie uma variável com o caminho de uma imagem do gerenciador de arquivos da sua loja;
  • Interruptor: crie uma variável de interruptor lógico (sim/não) que pode ser usada no template para ativar ou desativar recursos e
  • elementos em sua loja.

 

 

8.1- Variável simples

8.1.1- Clique na opção “Texto 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- Após 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- Após 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- Após 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- Após preencher as informações, clique em “Inserir” para salvar sua variável.

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

 

8.5- Variável de imagem

8.5.1- Clique na opção “Imagem”

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

8.5.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.5.2.2- Em “Nome da variável” defina o nome da variável. Por exemplo: configurações de cabeçalho. 

 

 

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

 

 

8.5.2.4- Na aba “Valor da variável” clique em “Selecionar” e escolha sua imagem.

 

 

8.5.2.5- Por fim, clique em “inserir”.

8.5.2.6- Lembrando que a variável do tipo “Imagem” traz a URL da imagem, portanto, para ser usada em algum lugar, é preciso criar um bloco HTML do tipo IMG.

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

 

8.6- Variável de interruptor

8.6.1- Clique na opção “Interruptor”

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

8.6.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.6.2.2- Em “Nome da variável” defina o nome da variável. Por exemplo: configurações de cabeçalho. 

 

 

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

 

 

8.6.2.4- Na aba “Valor da variável” clique para “ligar ou desligar” a opção do interruptor.

 

 

8.6.2.5- Após isso, clique em “Inserir”.

 

 

8.6.2.6– 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 “Minha Loja >> 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.