Outil gratuit
Générateur de schema de section Shopify
Ajoutez les paramètres et les blocs dont votre section a besoin et obtenez un bloc {% schema %} valide à coller dans votre thème — ou un fichier .liquid de départ dont le balisage lit déjà chaque paramètre. Tout s’exécute dans votre navigateur ; rien de ce que vous saisissez n’est envoyé nulle part.
Section
Paramètres
Blocs
{% 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 %}À quoi sert le schema d’une section
Chaque section Shopify se termine par une balise {% schema %} contenant un objet JSON. C’est ainsi que l’éditeur de thème sait quoi afficher : le nom de la section, les paramètres que les marchands peuvent modifier, les blocs qu’ils peuvent ajouter et réorganiser, et le preset qui place la section dans la liste Ajouter une section.
Le Liquid situé au-dessus du schema lit ces valeurs — section.settings.heading, block.settings.image —, si bien que le schema est le contrat entre le code et la personne qui modifie la boutique. S’il est incorrect, Shopify refuse d’enregistrer le fichier.
Les types de paramètres en un coup d’œil
text- Une seule ligne de texte : titres, libellés de boutons.
textarea- Du texte brut sur plusieurs lignes.
richtext- Du texte mis en forme avec gras, italique et liens. Sa valeur par défaut doit être entourée de <p>.
inline_richtext- De la mise en forme sans paragraphes, pour un titre avec un mot en gras.
image_picker- Une image des fichiers de la boutique. Elle ne peut pas avoir de valeur par défaut.
url- Un lien vers un produit, une collection, une page ou n’importe quelle adresse web.
checkbox- Un interrupteur activé/désactivé. La valeur par défaut est true ou false.
number- Un nombre saisi dans un champ.
range- Un curseur avec un min, un max et un pas — 101 pas au maximum.
select- Une liste déroulante d’options que vous définissez.
color- Un sélecteur de couleur.
font_picker- Une police de la bibliothèque Shopify. Une valeur par défaut est obligatoire.
product / collection- Choisissez un produit ou une collection et lisez ses données en Liquid.
header / paragraph- Pas des paramètres : des titres et des notes qui organisent la barre latérale.
Pourquoi Shopify refuse un schema
Les messages affichés par l’éditeur de thème quand une section ne s’enregistre pas, et leur cause :
Invalid JSON in tag 'schema'
JSON invalide : une virgule en trop, une apostrophe au lieu de guillemets ou un crochet manquant. Le schema est du JSON strict — et il ne peut pas contenir de Liquid.
Setting IDs must be unique
Les ID doivent être uniques : deux paramètres partagent le même ID. Les paramètres d’un bloc n’ont besoin d’être uniques qu’au sein de leur bloc.
Invalid default value
Valeur par défaut invalide : elle ne correspond pas au type — celle d’un range hors de son min et de son max, ou celle d’un select qui ne fait pas partie de ses options.
The section doesn't appear under Add section
La section n’apparaît pas sous Ajouter une section : elle n’a pas de preset. Une section sans preset ne peut être incluse que depuis le code.
Vos questions, nos réponses
Qu’est-ce que {% schema %} dans Shopify ?
C’est la balise en fin de fichier de section qui contient un objet JSON décrivant la section — son nom, ses paramètres, ses blocs et ses presets. L’éditeur de thème la lit pour construire la barre latérale que les marchands utilisent pour personnaliser la section.
Où coller le schema ?
À la fin du fichier .liquid de la section, dans le dossier sections de votre thème, après le balisage. Une section ne peut avoir qu’une seule balise {% schema %}.
Pourquoi ma section n’apparaît-elle pas dans l’éditeur de thème ?
Presque toujours parce que le schema n’a pas de preset. Ajoutez un preset portant le nom de la section et elle apparaîtra sous Ajouter une section. Sur un thème vintage, les sections ne peuvent être ajoutées qu’à la page d’accueil.
Ce générateur est-il gratuit ?
Oui, et sans compte. Il fonctionne entièrement dans votre navigateur, et rien de ce que vous saisissez ne quitte votre appareil.
Peut-il aussi écrire le reste de la section ?
Le fichier de départ vous donne un balisage qui lit chaque paramètre. Pour une section finie et stylée — mise en page, CSS, JavaScript et tout le reste —, décrivez-la à Klorr et il écrira le fichier complet.
Vous voulez la section complète, pas seulement le schema ?
Décrivez une section avec vos mots et obtenez le code Liquid Shopify, un schema complet et ses paramètres. Pour tout thème Online Store 2.0, sans application.
Générateur de code Liquid →