Este arquivo tem como objetivo adicionar configurações ao seu tema. Essas configurações permitem definir opções para exibir valores do tipo texto, número ou inteiro (0 e 1). Veja o modelo abaixo:

{
  "configuracoesTema": [
    {
      "type": "divider",
      "title" : "Topo"
    },
    {
      "var": "telefoneTopo",
      "text": "Telefone no topo a esquerda (deixe vazio para não exibir)",
      "type": "number"
    },
    {
      "var": "mensagemTopo",
      "text": "Mensagem no topo a direita (deixe vazio para não exibir)",
      "type": "text"
    },
    {
      "type": "divider",
      "title" : "Configurações gerais"
    },
    {
      "var": "hideTopStars",
      "text": "Não mostrar estrelas de avaliação junto ao nome na página de detalhes do produto",
      "type": "switch",
      "value": false
    },
    {
      "type": "divider",
      "title" : "Vitrine"
    },
    {
      "var": "qntVitrine",
      "text": "Quantidade de produtos por linha nas vitrines (desktop)",
      "type": "select",
      "options": [
        {"value": 2, "label": "Dois"},
        {"value": 3, "label": "Três"},
        {"value": 4, "label": "Quatro"},
		{"value": 6, "label": "Seis"}
      ],
      "value": "3"
    }
  ]
}

Você pode utilizar da seguinte forma:

var = nome da variável pra usar no front
text = como aparecerá a opção no painel pro lojista (dentro das config do tema)
type = tipo da opção no painel pro lojista, pode ser switch, number, text, select ou divider
value = valor padrao

Para o tipo divider você pode usar o title para definir um título para sua divisão, não declare essa opção e será apenas uma "linha" para dividir as seções

Par ao tipo select use o value para definir um padrão das opções.

As opções que criar neste arquivo ficam no menu suspenso de opções do tema, exemplo da imagem abaixo:

Usando no tem:

Abaixo tem um exemplo de como usar a variável no tema, confira:

{% if recursos.config_tema.hideTopStars %}
    <div class="topStar">
	    <!--seu códigio aqui-->
	</div>
{% endif %}