Gratis tool
Shopify sectie schema generator
Voeg de instellingen en blokken toe die je sectie nodig heeft en krijg een geldig {% schema %}-blok om in je thema te plakken – of een .liquid-startbestand waarvan de markup elke instelling al uitleest. Alles draait in je browser; niets wat je typt wordt ergens naartoe gestuurd.
Sectie
Instellingen
Blokken
{% 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 %}Wat een sectieschema doet
Elke Shopify-sectie eindigt met één {% schema %}-tag met daarin een JSON-object. Zo weet de thema-editor wat hij moet tonen: de naam van de sectie, de instellingen die ondernemers kunnen wijzigen, de blokken die ze kunnen toevoegen en herschikken, en de preset die de sectie in de lijst onder Sectie toevoegen zet.
De Liquid boven het schema leest die waarden uit – section.settings.heading, block.settings.image – dus het schema is het contract tussen de code en degene die de winkel bewerkt. Klopt het niet, dan weigert Shopify het bestand op te slaan.
Instellingstypes in één oogopslag
text- Eén regel tekst – koppen, knopteksten.
textarea- Platte tekst over meerdere regels.
richtext- Opgemaakte tekst met vet, cursief en links. De standaardwaarde moet in <p> staan.
inline_richtext- Opmaak zonder alinea's – voor een kop met één vetgedrukt woord.
image_picker- Een afbeelding uit de bestanden van de winkel. Kan geen standaardwaarde hebben.
url- Een link naar een product, collectie, pagina of elk webadres.
checkbox- Een aan/uit-schakelaar. De standaardwaarde is true of false.
number- Een getal dat in een veld wordt getypt.
range- Een schuifregelaar met min, max en stap – hoogstens 101 stappen.
select- Een dropdown met opties die jij bepaalt.
color- Een kleurkiezer.
font_picker- Een lettertype uit de bibliotheek van Shopify. Een standaardwaarde is verplicht.
product / collection- Kies een product of collectie en lees de gegevens uit in Liquid.
header / paragraph- Geen instellingen – koppen en notities die de zijbalk ordenen.
Waarom Shopify een schema weigert
De meldingen die de thema-editor toont als een sectie niet wil opslaan, en wat ze veroorzaakt:
Invalid JSON in tag 'schema'
Ongeldige JSON: een komma te veel aan het eind, een enkel aanhalingsteken of een ontbrekend haakje. Het schema is strikte JSON – en mag geen Liquid bevatten.
Setting IDs must be unique
Twee instellingen delen een ID. Blokinstellingen hoeven alleen binnen hun eigen blok uniek te zijn.
Invalid default value
De standaardwaarde past niet bij het type – een range-standaardwaarde buiten min en max, of een select-standaardwaarde die geen van de opties is.
The section doesn't appear under Add section
De sectie verschijnt niet onder Sectie toevoegen omdat ze geen presets heeft. Een sectie zonder preset kan alleen via code worden ingevoegd.
Veelgestelde vragen
Wat is {% schema %} in Shopify?
Het is de tag aan het eind van een sectiebestand met een JSON-object dat de sectie beschrijft – naam, instellingen, blokken en presets. De thema-editor leest het uit om de zijbalk te bouwen waarmee ondernemers de sectie aanpassen.
Waar plak ik het schema?
Onderaan het .liquid-bestand van de sectie in de sections-map van je thema, na de markup. Een sectie kan maar één {% schema %}-tag hebben.
Waarom verschijnt mijn sectie niet in de thema-editor?
Bijna altijd omdat het schema geen presets heeft. Voeg een preset toe met de naam van de sectie en ze verschijnt onder Sectie toevoegen. In een vintage thema kun je secties alleen aan de homepage toevoegen.
Is deze generator gratis?
Ja, en zonder account. Hij draait volledig in je browser en niets wat je typt verlaat je apparaat.
Kan hij ook de rest van de sectie schrijven?
Het startbestand geeft je markup die elke instelling uitleest. Voor een complete, gestylede sectie – lay-out, CSS, JavaScript en alles – beschrijf je hem aan Klorr en Klorr schrijft het hele bestand.
Liever de hele sectie dan alleen het schema?
Beschrijf een sectie in gewone taal en krijg Shopify Liquid-code, een volledig schema en instellingen voor de thema-editor. Voor elk OS 2.0-thema, zonder app.
Liquid-codegenerator →