# 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**. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FxvuULZmb2dSxPZwe1i5w%2F0.jpeg?alt=media) \ 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**. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FMCNA1NybpqDqgNKEiZ9R%2F1.jpeg?alt=media) \ 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. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fc93onFCADEVuUeew8lCh%2F2.jpeg?alt=media) \ 4.2- No campo **Nome**, você tem a opção de escolher o nome da sua variável. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fvs6cVZtd2l8MPEoZbT8K%2F3.jpeg?alt=media) \ 4.3- Em **Descrição**, adicione uma breve descrição do seu grupo de variáveis. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Ftn6LxlwoKFWEtJ10Knrz%2F4.jpeg?alt=media) \ 4.3- Após serem feitas essas configurações, clique **Criar grupo**. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FqQKcJpi5GO2S2Pb0YjTc%2F5.jpeg?alt=media) \ 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.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FIcdzTcl78ZJ18O5EddEn%2F6.jpeg?alt=media) \ Você também pode **excluir um Grupo de variável** clicando no **ícone vermelho de lixeira.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FZ3exDnXGwfE0Q9NUYrQw%2F7.jpeg?alt=media) \ 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.** ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FvsjExdKujpYtCe0SKwBz%2F8.jpeg?alt=media) \ 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. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FFejYkHxJV7SFmOQ1EWsa%2F9.jpeg?alt=media) #### **Variável simples** \ 1- Clique na opção **Texto** **Simples**. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FnwMcOJD6p7clmz1jgUBD%2F10.jpeg?alt=media) \ 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 ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F9HryfezjjpnB4ZuAdtKU%2F11.jpeg?alt=media) \ 4- Em **Breve descrição**, adicione uma breve descrição para a sua variável. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FeEarFYf1R4igCPK9KUyw%2F12.jpeg?alt=media) \ 5- Em **Valor**, preencha com a informação que a sua variável irá passar. Por exemplo: (031) 9 9910-7019 ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FXMxESHN9enaZQKa38REv%2F13.jpeg?alt=media) \ 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**. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F0alZujSUB7dw6bZ8HdZe%2F14.jpeg?alt=media) \ 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 ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F4XFKdzf9QEGDUUne2eo0%2F15.jpeg?alt=media) \ 4- Em **Breve descrição**, adicione uma breve descrição para a sua variável. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FP4E7eXMpaAeetp9a7G6Q%2F16.jpeg?alt=media) \ 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**. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FFwXh2Pq9AXT7ZsHrF6Hr%2F17.jpeg?alt=media) \ 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 ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2Fk44LJF23GTpEjGqgKfGF%2F18.jpeg?alt=media) \ 4- Em **Breve descrição**, adicione uma breve descrição para a sua variável. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2F6otjU9Tj4whfUni0Ey4B%2F19.jpeg?alt=media) \ 5- Abaixo, em **Valor numérico**, adicione os números que desejar para a variável. ![](https://935039236-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FtC5RsRPAz28LAb5rFkZl%2Fuploads%2FHG3J1I7ZSECt44AUYUS2%2F20.jpeg?alt=media) \ 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!