Criando uma Variável Global personalizável

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 Personalização >> 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- No campo Nome, você tem a opção de escolher o nome da sua variável.

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

Variável simples

1- Clique na opção Texto Simples.

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

3- 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

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

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

6- Após preencher as informações, clique em Inserir para salvar sua variável.

7- Por fim, clique em Ok, entendi.

Variável de cor

1- Clique na opção Cor.

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

3- 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

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

5- 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:

6- Após preencher as informações, clique em Inserir para salvar sua variável.

7- Por fim, clique em Ok, entendi.

Variável numérica

1- Clique na opção Numérico.

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

3- 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

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

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

6- Após preencher as informações, clique em Inserir para salvar sua variável.

7- Por fim, clique em Ok, entendi.

Variável HTML

1- Clique na opção HTML.

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

3- 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

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

5- 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!

6- Após preencher as informações, clique em Inserir para salvar sua variável.

7- Por fim, clique em Ok, entendi.

Variável de imagem

1- Clique na opção Imagem

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

3- 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

4- Em Nome da variável defina o nome da variável. Por exemplo: configurações de cabeçalho.

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

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

7- Por fim, clique em inserir.

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

Variável de interruptor

1- Clique na opção Interruptor

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

3- 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

4- Em Nome da variável defina o nome da variável. Por exemplo: configurações de cabeçalho.

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

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

7- Após isso, clique em Inserir.

8- 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- Acesse o painel administrativo da sua loja virtual.

2- Clique em Personalização >> 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!