Guia · 6 passos · cerca de 5 minutos
Como adicionar uma seção personalizada na Shopify
Uma seção personalizada é um único arquivo .liquid no seu tema. Você não precisa de app para adicionar uma: crie o arquivo no editor de código, cole o código e ela aparece no editor de temas ao lado das seções do próprio tema. Aqui está o processo completo e, depois, as soluções para as três coisas que costumam dar errado.
O que você precisa
- Uma loja Shopify e permissão para editar o tema (proprietário da loja ou colaborador com acesso a Temas).
- O código da seção — um arquivo .liquid terminado em uma tag {% schema %}. Escreva você mesmo, gere com a Klorr ou pegue um no marketplace.
- Um tema Online Store 2.0, se você quiser a seção em outras páginas além da página inicial.
Passo a passo
Primeiro, duplique seu tema
No admin da Shopify, vá em Loja virtual → Temas. Ao lado do tema atual, abra o menu … e escolha Duplicar. Trabalhe na cópia, para que sua loja no ar fique intacta até você estar satisfeito.
Abra o editor de código
Na cópia, abra o menu … de novo e escolha Editar código. As pastas do tema — layout, sections, snippets, assets e as demais — aparecem à esquerda.
Crie o arquivo da seção
Na pasta sections, escolha Adicionar nova seção (no editor mais novo, o + ao lado da pasta e depois Novo arquivo). Dê um nome que diga o que ela faz, como countdown-banner. A Shopify cria sections/countdown-banner.liquid com um código de exemplo.
Cole seu código e salve
Selecione tudo no novo arquivo, substitua pelo código da sua seção — incluindo o bloco {% schema %} no final — e clique em Salvar. Se a Shopify mostrar um erro, as soluções estão mais abaixo.
Adicione no editor de temas
Volte para Temas e clique em Personalizar na cópia. Abra a página que quiser — inicial, de produto, de coleção — e clique em Adicionar seção na barra lateral esquerda. Sua seção aparece com o nome definido no schema.
Configure e publique
Preencha as configurações da seção — textos, imagens, cores —, arraste-a para o lugar e clique em Salvar. Quando a prévia estiver certa, publique a cópia na página Temas.
Uma seção completa para testar
Cole isto em um novo arquivo de seção para ver o processo todo funcionando. É um título, uma linha de texto e um botão, todos editáveis no editor de temas.
<div class="promo-{{ section.id }}">
<h2>{{ section.settings.heading | escape }}</h2>
<p>{{ section.settings.text | escape }}</p>
{% if section.settings.button_label != blank %}
<a href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
{% endif %}
</div>
{% style %}
.promo-{{ section.id }} {
padding: 48px 20px;
text-align: center;
background: {{ section.settings.background }};
}
{% endstyle %}
{% schema %}
{
"name": "Promo banner",
"tag": "section",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "Free shipping this week" },
{ "type": "text", "id": "text", "label": "Text", "default": "On every order over $50." },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
{ "type": "url", "id": "button_link", "label": "Button link" },
{ "type": "color", "id": "background", "label": "Background", "default": "#f1ecfb" }
],
"presets": [{ "name": "Promo banner" }]
}
{% endschema %}Quando não funciona
A seção não aparece em Adicionar seção
O schema não tem presets. Adicione "presets": [{ "name": "Countdown banner" }] ao schema. Verifique também enabled_on ou disabled_on, que limitam onde a seção pode entrar — e, em um tema vintage, as seções só podem ser adicionadas à página inicial.
A Shopify não salva o arquivo
O erro diz qual é o problema. "Invalid JSON in tag 'schema'" (JSON inválido) é uma vírgula sobrando no final, uma aspa simples ou um colchete faltando. "Setting IDs must be unique" significa que duas configurações usam o mesmo ID. Nosso gerador de schema grátis verifica as duas coisas antes de você colar.
As alterações não aparecem na loja
Provavelmente você está vendo o tema publicado enquanto edita a cópia. Visualize a cópia pela página Temas ou publique-a quando estiver pronta.
Por que adicionar uma seção sem app
- Sem mensalidade — a seção faz parte do seu tema, não de uma assinatura.
- Nada extra é carregado — o script de um app pode rodar em todas as páginas; o código de uma seção só roda onde a seção está.
- Ela fica quando os apps vão embora — desinstalar um app pode deixar buracos nas páginas que ele montou. Um arquivo de seção fica até você apagá-lo.
Perguntas frequentes
Dá para adicionar uma seção personalizada na Shopify sem app?
Sim. Uma seção é um arquivo .liquid na pasta sections do seu tema. Crie-o em Loja virtual → Temas → Editar código, cole o código e adicione a seção pelo editor de temas. Nenhum app envolvido.
Minha seção personalizada sobrevive a uma atualização do tema?
Atualizar um tema para uma nova versão traz o que você configurou no editor de temas, mas não os arquivos que você adicionou no editor de código. Guarde uma cópia do arquivo da seção e adicione-o de novo ao tema atualizado.
Posso usar a mesma seção em várias páginas?
Sim. Em um tema Online Store 2.0 você pode adicioná-la a qualquer template — cada cópia tem as próprias configurações —, a menos que o schema limite onde ela pode entrar.
Como sei se meu tema é Online Store 2.0?
Abra o editor de temas e vá para uma página de produto. Se você conseguir clicar em Adicionar seção ali, o tema é 2.0. Se as seções só puderem ser adicionadas à página inicial, é um tema vintage.
Onde consigo o código de uma seção personalizada?
Escreva você mesmo, escolha uma pronta no marketplace da Klorr ou descreva o que você quer e deixe a Klorr escrever — Liquid, CSS, JavaScript e schema em um único arquivo.
Relacionados
Gerador de código Liquid
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 schema de seções
Crie o {% schema %} de uma seção Shopify: configurações, blocos e presets, validados pelas regras do editor de temas. Copie o JSON ou um .liquid inicial.