Ferramenta gratuita
Gerador de schema de seções Shopify
Adicione as configurações e os blocos de que a sua seção precisa e receba um bloco {% schema %} válido para colar no seu tema — ou um arquivo .liquid inicial com o HTML já lendo cada configuração. Tudo roda no seu navegador; nada do que você digita é enviado para lugar nenhum.
Seção
Configurações
Blocos
{% schema %}
{
"name": "Feature highlights",
"tag": "section",
"class": "feature-highlights",
"max_blocks": 6,
"settings": [
{ "type": "header", "content": "Content" },
{ "type": "text", "id": "heading", "label": "Heading", "default": "Why customers switch" },
{ "type": "richtext", "id": "intro", "label": "Intro", "default": "<p>Three reasons, in plain words.</p>" },
{ "type": "header", "content": "Style" },
{ "type": "color", "id": "accent", "label": "Accent colour", "default": "#5d4787" },
{ "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 4, "step": 1, "default": 3 },
{ "type": "select", "id": "layout", "label": "Layout", "options": [{"value": "grid", "label": "Grid"},{"value": "carousel", "label": "Carousel"}], "default": "grid" },
{ "type": "checkbox", "id": "show_border", "label": "Show card borders", "default": true }
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{ "type": "image_picker", "id": "icon", "label": "Icon" },
{ "type": "text", "id": "title", "label": "Title", "default": "Ships in 24 hours" },
{ "type": "textarea", "id": "text", "label": "Text", "default": "Order by 3pm and it leaves the same day." }
]
}
],
"presets": [
{ "name": "Feature highlights", "blocks": [{"type": "feature"}] }
]
}
{% endschema %}O que o schema de uma seção faz
Toda seção Shopify termina em uma tag {% schema %} com um objeto JSON. É assim que o editor de temas sabe o que mostrar: o nome da seção, as configurações que o lojista pode alterar, os blocos que ele pode adicionar e reordenar e o preset que coloca a seção na lista Adicionar seção.
O Liquid acima do schema lê esses valores — section.settings.heading, block.settings.image —, então o schema é o contrato entre o código e quem edita a loja. Se estiver errado, a Shopify se recusa a salvar o arquivo.
Tipos de configuração num relance
text- Uma única linha de texto — títulos, rótulos de botão.
textarea- Texto simples em várias linhas.
richtext- Texto formatado com negrito, itálico e links. O padrão precisa estar dentro de <p>.
inline_richtext- Formatação sem parágrafos — para um título com uma palavra em negrito.
image_picker- Uma imagem dos arquivos da loja. Não pode ter padrão.
url- Um link para um produto, coleção, página ou qualquer endereço da web.
checkbox- Um botão liga/desliga. O padrão é true ou false.
number- Um número digitado em um campo.
range- Um controle deslizante com mín., máx. e passo — no máximo 101 passos.
select- Um menu suspenso com opções que você define.
color- Um seletor de cor.
font_picker- Uma fonte da biblioteca da Shopify. O padrão é obrigatório.
product / collection- Escolha um produto ou coleção e leia os dados dele no Liquid.
header / paragraph- Não são configurações — títulos e notas que organizam a barra lateral.
Por que a Shopify recusa um schema
As mensagens que o editor de temas mostra quando uma seção não salva, e o que as causa:
Invalid JSON in tag 'schema'
JSON inválido: uma vírgula sobrando no final, uma aspa simples ou um colchete faltando. O schema é JSON estrito — e não pode conter Liquid.
Setting IDs must be unique
IDs repetidos: duas configurações usam o mesmo ID. As configurações de bloco só precisam ser únicas dentro do próprio bloco.
Invalid default value
Valor padrão inválido: ele não combina com o tipo — um padrão de range fora do mín. e do máx., ou um padrão de select que não é uma das opções.
The section doesn't appear under Add section
A seção não aparece em Adicionar seção porque não tem presets. Uma seção sem preset só pode ser incluída pelo código.
Perguntas frequentes
O que é o {% schema %} na Shopify?
É a tag no final de um arquivo de seção que guarda um objeto JSON descrevendo a seção — nome, configurações, blocos e presets. O editor de temas o lê para montar a barra lateral que o lojista usa para personalizar a seção.
Onde eu colo o schema?
No final do arquivo .liquid da seção, na pasta sections do seu tema, depois do HTML. Uma seção só pode ter uma tag {% schema %}.
Por que minha seção não aparece no editor de temas?
Quase sempre porque o schema não tem presets. Adicione um preset com o nome da seção e ela aparecerá em Adicionar seção. Em um tema vintage, as seções só podem ser adicionadas à página inicial.
Este gerador é grátis?
Sim, e sem cadastro. Ele roda inteiramente no seu navegador, e nada do que você digita sai do seu dispositivo.
Ele também escreve o resto da seção?
O arquivo inicial traz um HTML que lê cada configuração. Para uma seção pronta e estilizada — layout, CSS, JavaScript e tudo mais —, descreva o que quer para a Klorr e ela escreve o arquivo inteiro.
Quer a seção inteira, não só o schema?
Descreva uma seção em português e receba o código Liquid para Shopify, com schema completo e configurações do editor de temas. Funciona em temas 2.0, sem app.
Gerador de código Liquid →