Generatore di codice Shopify con IA
Generatore di codice Liquid per Shopify
Di' a Klorr cosa deve fare la sezione. Scrive il Liquid, il CSS e il JavaScript isolati e uno schema che trasforma ogni testo, colore e immagine in un'impostazione modificabile dall'editor del tema. Incolli un solo file nel tuo tema: niente app, niente canone mensile, nessuno script caricato su ogni pagina.
“Una barra annunci con il conto alla rovescia alla fine dei saldi, un breve messaggio e un pulsante. Il commerciante sceglie i colori e la data di fine.”
<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 %}Cosa scrive il generatore
Liquid che esiste davvero
Oggetti, filtri e tag reali — section.settings, image_url, block.shopify_attributes — nella struttura di sezioni e blocchi che Online Store 2.0 si aspetta. Niente di inventato che l'editor del tema rifiuti al salvataggio.
Uno schema completo
Ogni titolo, colore, immagine, link e interruttore diventa un'impostazione con un valore predefinito sensato, così la sezione si modifica nell'editor del tema, non nel codice. Blocchi, limiti e preset inclusi.
CSS e JavaScript isolati
Gli stili hanno come prefisso l'id della sezione stessa, così due copie sulla stessa pagina non entrano mai in conflitto tra loro o con il tuo tema. Gli script sono piccoli, in JavaScript puro, e girano solo dove c'è la sezione.
Codice di tua proprietà
È un solo file .liquid nella cartella sections del tuo tema. Nessun runtime, nessuna filigrana, nessun vincolo: disdici Klorr e la sezione continua a funzionare esattamente come prima.
Da una frase a una sezione online
Descrivila
Scrivi con parole tue cosa deve mostrare e fare la sezione. Aggiungi i colori del tuo brand e uno screenshot, se ne hai uno.
Perfezionala
Leggi il codice, guarda l'anteprima e chiedi modifiche in italiano — "rendi il pulsante a tutta larghezza su mobile" — finché non è perfetta.
Incollala nel tuo tema
Copia il file nella cartella sections del tuo tema, poi aggiungila dall'editor del tema come qualsiasi altra sezione.
Passo dopo passo: come aggiungere una sezione personalizzata su Shopify →
Il confronto
C'è più di un modo per inserire una sezione personalizzata in un negozio Shopify. Ecco la versione onesta.
| Klorr | Generatore di blocchi IA di Shopify | App page builder | Assumere uno sviluppatore | |
|---|---|---|---|---|
| Cosa ottieni | Una sezione completa con impostazioni e blocchi propri | Un singolo blocco del tema | Pagine costruite nell'editor dell'app | Quello che definisci e paghi |
| Funziona con | Qualsiasi tema Online Store 2.0 | Temi pensati per i blocchi del tema, come Horizon | Negozi con l'app installata | Qualsiasi tema |
| Costo continuativo | Il tuo piano Klorr mentre crei — il codice continua a funzionare anche senza | Incluso in Shopify | Un canone mensile finché le pagine sono online | A modifica, a fattura |
| Il codice | Liquid leggibile nel tuo tema, tuo da tenere e modificare | Generato dentro l'editor del tema | Renderizzato dall'app | Tuo, una volta consegnato |
| Tempi | Pochi secondi, poi tutte le revisioni che vuoi | Pochi secondi | Ore di drag and drop | Da giorni a settimane |
Sezioni che le persone generano
Alcune delle sezioni che i commercianti chiedono più spesso a Klorr. Ognuna rimanda a versioni pronte sul marketplace di Klorr, se preferisci partire da una di quelle.
Sezione con conto alla rovescia
Scadenze dei saldi, lanci e termini di spedizione.
Sezione FAQ a fisarmonica
Domande e risposte che si aprono sul posto.
Carosello di testimonianze
Recensioni e citazioni con foto e valutazioni.
Sezione caratteristiche prodotto
Vantaggi, specifiche e confronti accanto al prodotto.
Sezione hero banner
Immagine o video a tutta larghezza con titolo e pulsanti.
Galleria lookbook
Griglie di immagini acquistabili e slider prima e dopo.
Domande frequenti
Cos'è un generatore di codice Liquid per Shopify?
È uno strumento che scrive Liquid — il linguaggio di template con cui sono fatti i temi Shopify — partendo da una descrizione. Klorr va oltre i semplici snippet: scrive un intero file di sezione con markup, CSS, JavaScript e schema, pronto da incollare nel tuo tema.
Con quali temi funziona il codice?
Con qualsiasi tema Online Store 2.0, compresi Dawn, Horizon e i temi del Shopify Theme Store basati su 2.0. Su un tema meno recente (vintage), le sezioni si possono aggiungere solo alla home page dall'editor del tema.
Devo saper programmare?
No. Descrivi la sezione e poi la modifichi nell'editor del tema. Se invece scrivi codice, il risultato è Liquid semplice e leggibile, che puoi modificare come qualsiasi altra parte del tuo tema.
Klorr è un'app Shopify?
No. Klorr è dove scrivi e perfezioni la sezione; il risultato è un file nel tuo tema. Nel tuo negozio non viene installato nulla e nulla gira sui server di Klorr quando un cliente visita il negozio.
La sezione continua a funzionare se smetto di usare Klorr?
Sì. Il codice vive nel tuo tema, non da noi. Non c'è nessun runtime, controllo di licenza o filigrana da rimuovere.
Che differenza c'è rispetto a ChatGPT che scrive Liquid?
Un chatbot generico spesso inventa filtri e impostazioni che Shopify rifiuta, e lo schema lo lascia a te. Klorr è addestrato su come sono costruite le vere sezioni Shopify, verifica il risultato con le regole di schema che l'editor del tema applica e mantiene ogni contenuto modificabile come impostazione.