Gerador de código Shopify com IA
Gerador de código Liquid para Shopify
Diga à Klorr o que a seção deve fazer. Ela escreve o Liquid, o CSS e o JavaScript isolados e um schema que transforma cada texto, cor e imagem em uma configuração que você altera no editor de temas. Você cola um único arquivo no seu tema — sem app, sem mensalidade de app, sem script carregando em todas as páginas.
“Uma barra de anúncio com contagem regressiva até o fim da promoção, uma mensagem curta e um botão. O lojista escolhe as cores e a data de término.”
<div class="acd-{{ section.id }}" data-ends="{{ section.settings.ends_at }}">
<p class="acd__msg">{{ section.settings.message | escape }}</p>
<div class="acd__clock" aria-live="polite">
<span data-unit="d">00</span>d <span data-unit="h">00</span>h
<span data-unit="m">00</span>m <span data-unit="s">00</span>s
</div>
{% if section.settings.button_label != blank %}
<a class="acd__btn" href="{{ section.settings.button_link }}">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>
{% style %}
.acd-{{ section.id }} {
background: {{ section.settings.background }};
color: {{ section.settings.text_color }};
}
{% endstyle %}
{% schema %}
{
"name": "Countdown bar",
"tag": "section",
"settings": [
{ "type": "text", "id": "message", "label": "Message", "default": "Summer sale ends in" },
{ "type": "text", "id": "ends_at", "label": "Ends at (YYYY-MM-DD HH:MM)", "default": "2026-10-31 23:59" },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Shop the sale" },
{ "type": "url", "id": "button_link", "label": "Button link" },
{ "type": "color", "id": "background", "label": "Background", "default": "#1c1230" },
{ "type": "color", "id": "text_color", "label": "Text", "default": "#ffffff" }
],
"presets": [{ "name": "Countdown bar" }]
}
{% endschema %}O que o gerador escreve
Liquid que existe de verdade
Objetos, filtros e tags reais — section.settings, image_url, block.shopify_attributes — na estrutura de seções e blocos que o Online Store 2.0 espera. Nada inventado que o editor de temas recuse ao salvar.
Um schema completo
Cada título, cor, imagem, link e botão liga/desliga vira uma configuração com um valor padrão sensato, para que a seção seja editada no personalizador, não no código. Blocos, limites e preset incluídos.
CSS e JavaScript isolados
Os estilos levam o id da própria seção como prefixo, então duas cópias na mesma página nunca brigam entre si nem com o seu tema. Os scripts são pequenos, em JavaScript puro, e só rodam onde a seção está.
Código que é seu
É um único arquivo .liquid na pasta sections do seu tema. Sem runtime, sem marca d'água, sem dependência: cancele a Klorr e a seção continua funcionando exatamente como antes.
De uma frase a uma seção no ar
Descreva
Escreva com suas palavras o que a seção deve mostrar e fazer. Adicione as cores da sua marca e uma captura de tela, se tiver.
Ajuste
Leia o código, veja a prévia e peça mudanças em português — "deixe o botão com largura total no celular" — até ficar do jeito certo.
Cole no seu tema
Copie o arquivo para a pasta sections do seu tema e adicione a seção pelo editor de temas, como qualquer outra.
Passo a passo: como adicionar uma seção personalizada na Shopify →
Como se compara
Existe mais de um jeito de colocar uma seção personalizada em uma loja Shopify. Esta é a versão honesta.
| Klorr | Gerador de blocos com IA da Shopify | Apps construtores de páginas | Contratar um desenvolvedor | |
|---|---|---|---|---|
| O que você recebe | Uma seção completa, com configurações e blocos próprios | Um único bloco de tema | Páginas montadas dentro do editor do app | O que você especificar e pagar |
| Funciona em | Qualquer tema Online Store 2.0 | Temas feitos para blocos de tema, como o Horizon | Lojas com o app instalado | Qualquer tema |
| Custo contínuo | Seu plano Klorr enquanto você cria — o código continua funcionando sem ele | Incluído na Shopify | Uma mensalidade de app enquanto as páginas estiverem no ar | Por alteração, por fatura |
| O código | Liquid legível no seu tema, seu para guardar e editar | Gerado dentro do editor de temas | Renderizado pelo app | Seu, depois da entrega |
| Prazo | Segundos, e depois quantas rodadas você quiser | Segundos | Horas arrastando e soltando | De dias a semanas |
Seções que as pessoas geram
Algumas das seções que os lojistas mais pedem à Klorr. Cada uma leva a versões prontas no marketplace da Klorr, se você preferir começar por uma delas.
Seção de contagem regressiva
Fim de promoções, lançamentos e prazos de envio.
Seção de FAQ em acordeão
Perguntas e respostas que abrem no lugar.
Carrossel de depoimentos
Avaliações e citações com fotos e notas.
Seção de destaques do produto
Benefícios, especificações e comparações ao lado do produto.
Seção de banner principal
Imagem ou vídeo em largura total com título e botões.
Galeria lookbook
Grades de imagens compráveis e comparadores de antes e depois.
Perguntas frequentes
O que é um gerador de código Liquid para Shopify?
É uma ferramenta que escreve Liquid — a linguagem de templates dos temas Shopify — a partir de uma descrição. A Klorr vai além de trechos soltos: escreve um arquivo de seção inteiro, com HTML, CSS, JavaScript e schema, pronto para colar no seu tema.
Com quais temas o código funciona?
Com qualquer tema Online Store 2.0, incluindo o Dawn, o Horizon e os temas da Shopify Theme Store feitos em 2.0. Em um tema antigo (vintage), as seções só podem ser adicionadas à página inicial pelo editor de temas.
Preciso saber programar?
Não. Você descreve a seção e depois a altera no editor de temas. Se você programa, o resultado é Liquid simples e legível, que você edita como qualquer outra parte do seu tema.
A Klorr é um app da Shopify?
Não. A Klorr é onde você escreve e ajusta a seção; o resultado é um arquivo no seu tema. Nada é instalado na sua loja e nada roda nos servidores da Klorr quando um cliente visita a loja.
A seção continua funcionando se eu parar de usar a Klorr?
Sim. O código fica no seu tema, não com a gente. Não há runtime, verificação de licença nem marca d'água para remover.
Qual a diferença para o ChatGPT escrevendo Liquid?
Um chatbot genérico muitas vezes inventa filtros e configurações que a Shopify recusa, e deixa o schema por sua conta. A Klorr é treinada em como as seções Shopify reais são construídas, confere o resultado com as regras de schema que o editor de temas aplica e mantém todo o conteúdo editável como configuração.