Vous allez construire une section d'accroche pour la page d'accueil d'Atelier Lumière, avec un titre et un texte modifiables directement depuis l'éditeur de thème, sans jamais avoir besoin de retoucher au code pour changer ce texte.

Créer le fichier de section

Dans le dossier sections de votre thème local, créez un fichier accroche-accueil.liquid. Le nom du fichier devient l'identifiant technique de la section ; choisissez-le descriptif, en minuscules, sans espace.

Le balisage de base

Commencez par le HTML et le Liquid qui affichent le contenu, en vous appuyant sur ce que vous avez appris aux guides 11 et 12 :

Remarquez l'objet section, différent de product vu précédemment : il représente la section elle-même, et sa propriété settings donne accès aux réglages que le marchand aura configurés depuis l'éditeur de thème. Ces réglages n'existent pas encore : c'est justement l'objet de la prochaine étape.

Déclarer les réglages avec le schema

À la fin du même fichier, ajoutez un bloc {% schema %}, qui contient un objet JSON décrivant la section pour l'éditeur de thème :

Décryptage : "name" est le nom affiché à l'intérieur de l'éditeur de thème, pour que le marchand reconnaisse cette section. Chaque entrée de "settings" définit un réglage, avec un "type" (ici text pour une ligne simple, richtext pour un texte enrichi), un "id" (le nom technique utilisé côté Liquid, celui que vous avez déjà utilisé dans section.settings.titre), et un "label" (le texte affiché au marchand dans l'éditeur). Le bloc "presets" permet à cette section d'apparaître dans la liste des sections que le marchand peut ajouter depuis l'éditeur de thème.

Le schema doit être un JSON strictement valide

Une virgule oubliée ou un guillemet manquant dans le bloc schema empêche toute la section de fonctionner, avec une erreur généralement explicite affichée dans votre terminal ou dans l'éditeur de thème. Relisez ce bloc avec la même attention qu'un fichier de configuration Claude Code ou Cursor, déjà rencontrée dans d'autres parcours de Web-Shine Docs : la syntaxe JSON ne pardonne aucune approximation.

Ajouter la section à la page d'accueil

Depuis l'aperçu local ouvert sur 127.0.0.1:9292, ou depuis le lien vers l'éditeur de thème affiché par shopify theme dev, ouvrez l'éditeur de thème et ajoutez une section à la page d'accueil. « Accroche accueil » doit maintenant apparaître dans la liste des sections disponibles, grâce au preset défini dans le schema.

Ce que vous devriez voir

Une fois la section ajoutée, l'éditeur de thème affiche un panneau de réglages avec un champ « Titre » et un champ « Texte », correspondant exactement aux entrées de votre "settings". Remplissez-les, par exemple avec « Des bougies façonnées à la main », et vérifiez que ce texte apparaît immédiatement dans l'aperçu, sans avoir eu besoin de modifier le fichier Liquid une seule fois après sa création.

Vérifiez que vous avez compris

Vous renommez le champ "id": "titre" en "id": "heading" dans le schema, sans modifier {{ section.settings.titre }} dans le balisage Liquid de la section. Le titre configuré par le marchand va-t-il continuer à s'afficher ?

Non. L'identifiant utilisé côté Liquid, dans section.settings.titre, doit correspondre exactement à l'"id" défini dans le schema. Si les deux ne correspondent plus, Liquid cherchera un réglage nommé titre qui n'existe plus, et n'affichera rien à cet endroit.

Chapitre terminé