Customização de temas

Agora é possível disponibilizar ao lojista opções de personalização do tema, deixando-o infinitamente mais flexível, versátil e atraente.

Você pode disponibilizar aos usuários opções que podem envolver: troca de títulos, posicionamento de colunas no layout, cores, imagens e outras infinitas opções, tendo como limite apenas sua criatividade.

Se você deseja criar um painel de customização no seu tema, será necessário seguir os passos abaixo:

Se o tema já possui o botão "Customizar", poderá pular para o 2º passo e editar os arquivos que já estão presentes na pasta /configs.

1º Passo:

Crie os dois arquivos a seguir dentro da pasta /configs que está na raiz do seu tema.

Arquivo 1 - [settings.html] 

Este é o primeiro arquivo que deverá ser criado, o mesmo deve apresentar a seguinte estrutura inicial:

<fieldset></fieldset>

Este arquivo enviará as informações para o  segundo arquivo (settings.json) que será o responsável por refletir as opções na loja virtual.

Arquivo 2 - [settings.json]

Este arquivo deverá ser criado obrigatoriamente com a seguinte estrutura. É aqui que serão definidos os modelos de personalização do layout. 

{
 "current":{}
}

 

2º Passo:

Você deverá inserir em cada um dos arquivos recém criados as opções de customização desejada, para isso você deve seguir a seguinte estrutura.

Arquivo 1 - [settings.html] 

Dentro da tag <fieldset></fieldset> deverão ser incluídos os campos de personalização desejados, o mesmo segue os preceitos de um <form> comum; ex:

<fieldset>
  <label for="cor">Cor:</label>
  <input type="text" name="cor" id="cor"/><br/>
  <label for="limite_produtos">Limite de Produtos:</label>
  <input type="text" name="limite_produtos" id="limite_produtos">
  <label for="limite_produtos">Titulo:</label>
  <input type="text" name="titulo" id="titulo">
</fieldset>

Cada input representa um valor a ser customizado, onde o campo name será o responsável por diferenciar e enviar os parâmetros para o arquivo (settings.json)

ATRIBUTOS PERMITIDOS NO INPUT

checkbox Define um checkbox
file Define um campo para upload de arquivos
hidden Define um campo invisível
radio Define um radio button
text Define um campo de texto

Alem das tags <input> é possível também utilizar o <select>

Arquivo 2 - [settings.json] 

Para adicionar um novo modelo você deve declarar as variáveis e seus valores da seguinte maneira.

{
 "current":{},
 "modelo1":{
   "cor": "#ff0",
   "limite_produtos": "5",
   "titulo": "Produtos em Destaque"
 },
 "modelo2":{
   "cor": "#f00",
   "limite_produtos": "10",
   "titulo": "Produtos em Promoção"
 }
}

O modelo current deve permanecer vazio e as variáveis de cada modelo deverão possuir o mesmo nome do atributo name criado no arquivo (settings.html), também é necessário definir um valor padrão para cada variável.

 

3º Passo:

Após a criação dos arquivos, um novo botão (customizar) irá aparecer nas opções do tema de sua loja virtual.

 

Ao clicar neste novo botão o usuário será direcionado para a página de customização, onde será possível selecionar os modelos pré-definidos, alterar seus valores e publicá-los no tema em questão.

 

Após as alterações serem enviadas você poderá utilizar a variável settings conforme o exemplo abaixo: 

settings.cor
{% if settings.cor == '#000' %}
    Esta é a cor preta!
{% endif %}
settings.titulo
{% if settings.titulo %}
    O título é {{ settings.titulo }}
{% endif %}

No link a seguir você poderá conferir mais detalhes a respeito da variável Settings