Inizia a creare

Strumento gratuito

Generatore di schema per sezioni Shopify

Aggiungi le impostazioni e i blocchi di cui la tua sezione ha bisogno e ottieni un blocco {% schema %} valido da incollare nel tuo tema, oppure un file .liquid di base con il markup che legge già ogni impostazione. Tutto gira nel tuo browser: niente di ciò che scrivi viene inviato altrove.

Sezione

Impostazioni

header · Content
text · heading
richtext · intro
header · Style
color · accent
range · columns
select · layout
checkbox · show_border

Blocchi

feature
Impostazioni blocco
image_picker · icon
text · title
textarea · text
Il tuo codice
{% 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 %}
Valido: pronto da incollare nel tuo tema.
Gira nel tuo browser. Nulla viene caricato.

A cosa serve lo schema di una sezione

Ogni sezione Shopify termina con un tag {% schema %} che contiene un oggetto JSON. È così che l'editor del tema sa cosa mostrare: il nome della sezione, le impostazioni che il commerciante può modificare, i blocchi che può aggiungere e riordinare e il preset che inserisce la sezione nell'elenco Aggiungi sezione.

Il Liquid sopra lo schema legge quei valori — section.settings.heading, block.settings.image — quindi lo schema è il contratto tra il codice e chi modifica il negozio. Se è sbagliato, Shopify si rifiuta di salvare il file.

Tipi di impostazione in breve

text
Una sola riga di testo: titoli, etichette dei pulsanti.
textarea
Testo semplice su più righe.
richtext
Testo formattato con grassetto, corsivo e link. Il predefinito deve essere racchiuso in <p>.
inline_richtext
Formattazione senza paragrafi: per un titolo con una parola in grassetto.
image_picker
Un'immagine dai file del negozio. Non può avere un predefinito.
url
Un link a un prodotto, una collezione, una pagina o qualsiasi indirizzo web.
checkbox
Un interruttore on/off. Il predefinito è true o false.
number
Un numero digitato in un campo.
range
Un cursore con min, max e passo: al massimo 101 passi.
select
Un menu a tendina con opzioni che definisci tu.
color
Un selettore di colore.
font_picker
Un font della libreria di Shopify. Il predefinito è obbligatorio.
product / collection
Scegli un prodotto o una collezione e leggine i dati in Liquid.
header / paragraph
Non sono impostazioni: titoli e note che organizzano la barra laterale.

Perché Shopify rifiuta uno schema

I messaggi che l'editor del tema mostra quando una sezione non si salva, e cosa li causa:

Invalid JSON in tag 'schema'

JSON non valido: una virgola finale di troppo, un apice singolo o una parentesi mancante. Lo schema è JSON rigoroso e non può contenere Liquid.

Setting IDs must be unique

ID duplicati: due impostazioni condividono lo stesso ID. Le impostazioni dei blocchi devono essere uniche solo all'interno del proprio blocco.

Invalid default value

Valore predefinito non valido: non è compatibile con il tipo, ad esempio un predefinito di range fuori da min e max, o un predefinito di select che non è tra le opzioni.

The section doesn't appear under Add section

La sezione non compare in Aggiungi sezione perché non ha preset. Una sezione senza preset si può includere solo da codice.

Aggiungere una sezione personalizzata su Shopify →

Domande frequenti

Cos'è {% schema %} in Shopify?

È il tag alla fine di un file di sezione che contiene un oggetto JSON con la descrizione della sezione: nome, impostazioni, blocchi e preset. L'editor del tema lo legge per costruire la barra laterale che il commerciante usa per personalizzare la sezione.

Dove incollo lo schema?

In fondo al file .liquid della sezione, nella cartella sections del tuo tema, dopo il markup. Una sezione può avere un solo tag {% schema %}.

Perché la mia sezione non compare nell'editor del tema?

Quasi sempre perché lo schema non ha preset. Aggiungi un preset con il nome della sezione e comparirà in Aggiungi sezione. Su un tema vintage, le sezioni si possono aggiungere solo alla home page.

Questo generatore è gratuito?

Sì, e non serve un account. Gira interamente nel tuo browser e niente di ciò che scrivi lascia il tuo dispositivo.

Può scrivere anche il resto della sezione?

Il file di base ti dà un markup che legge ogni impostazione. Per una sezione finita e con stile — layout, CSS, JavaScript e tutto il resto — descrivila a Klorr e scriverà l'intero file.

Vuoi l'intera sezione, non solo lo schema?

Descrivi una sezione in italiano e ottieni codice Liquid per Shopify, uno schema completo e le impostazioni dell'editor del tema. Per temi 2.0, senza app.

Generatore di codice Liquid →

Fatti scrivere l'intera sezione da Klorr

Descrivi la sezione che vuoi. Klorr scrive il Liquid, il CSS, lo schema e ogni impostazione dell'editor del tema: codice che vive nel tuo tema e resta tuo.