Points clés à retenir
- Un nouveau type de section est un fichier Liquid dans le dossier
sections/avec une structure HTML, un bloc{% schema %}, et des presets pour apparaître dans le menu “Add section”.- Ce guide vous montre comment construire une section de témoignages complète avec un titre éditable, un nombre de colonnes et des blocs de témoignages qui se répètent (citation, auteur, note).
"max_blocks"limite le nombre de blocs que les marchands peuvent ajouter."min_blocks"exige un minimum de blocs.- Une fois publiée, la section apparaît dans le Theme Editor pour n’importe quelle page qui a les sections d’activées.
Un nouveau type de section fait partie de la bibliothèque de sections de votre thème — disponible pour être ajouté à n’importe quel template de page qui supporte les sections. Ce guide vous explique comment créer une section de témoignages complète et prête pour la production à partir de zéro.
Comment ajouter une nouvelle section dans Shopify ?
Créez un nouveau fichier .liquid dans le dossier sections/ de votre thème. Donnez-lui un nom descriptif en kebab-case (ex: testimonials-grid.liquid). Le fichier doit inclure un bloc {% schema %} valide avec une clé "presets" pour qu’il apparaisse dans le menu “Add section”.
Sur le même sujet : Ajouter de la logique Liquid personnalisée dans Shopify.
Planifier la section
Avant d’écrire du code, définissez ce dont la section a besoin :
Sur le même sujet : Fudge Page Builder.
Paramètres au niveau de la section (globaux) :
- Texte du titre (Heading)
- Texte du sous-titre (Subheading)
- Nombre de colonnes sur desktop (2 ou 3)
Paramètres au niveau du bloc (par témoignage) :
- Citation (le texte du témoignage)
- Nom de l’auteur
- Titre/rôle de l’auteur
- Note (1-5 étoiles)
- Photo de l’auteur (facultatif)
Comportement :
- Maximum 12 témoignages
- Minimum 1 témoignage
- Le preset par défaut inclut 3 exemples de témoignages
Étape 1 — Créer le fichier de la section
Ouvrez votre éditeur de code → dossier sections/ → ajoutez un nouveau fichier : testimonials-grid.liquid.
Étape 2 — Écrire la structure HTML
<section class="testimonials-grid section-{{ section.id }}" id="section-{{ section.id }}">
<div class="page-width">
{% if section.settings.heading != blank %}
<h2 class="testimonials-grid__heading">{{ section.settings.heading }}</h2>
{% endif %}
{% if section.settings.subheading != blank %}
<p class="testimonials-grid__subheading">{{ section.settings.subheading }}</p>
{% endif %}
<div class="testimonials-grid__grid testimonials-grid__grid--{{ section.settings.columns }}-col">
{% for block in section.blocks %}
<div class="testimonials-grid__item" {{ block.shopify_attributes }}>
{% if block.settings.rating > 0 %}
<div class="testimonials-grid__stars" aria-label="{{ block.settings.rating }} out of 5 stars">
{% for i in (1..5) %}
<span class="testimonials-grid__star {% if i <= block.settings.rating %}testimonials-grid__star--filled{% endif %}">★</span>
{% endfor %}
</div>
{% endif %}
{% if block.settings.quote != blank %}
<blockquote class="testimonials-grid__quote">
{{ block.settings.quote }}
</blockquote>
{% endif %}
<div class="testimonials-grid__author">
{% if block.settings.author_photo != blank %}
<img
src="{{ block.settings.author_photo | img_url: '80x80', crop: 'center' }}"
alt="{{ block.settings.author_name }}"
class="testimonials-grid__author-photo"
loading="lazy"
width="40"
height="40"
/>
{% endif %}
<div>
{% if block.settings.author_name != blank %}
<p class="testimonials-grid__author-name">{{ block.settings.author_name }}</p>
{% endif %}
{% if block.settings.author_title != blank %}
<p class="testimonials-grid__author-title">{{ block.settings.author_title }}</p>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>Étape 3 — Écrire le schema
{% schema %}
{
"name": "Testimonials Grid",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "What our customers say"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Trusted by thousands of happy customers"
},
{
"type": "select",
"id": "columns",
"label": "Columns on desktop",
"options": [
{ "value": "2", "label": "2 columns" },
{ "value": "3", "label": "3 columns" }
],
"default": "3"
}
],
"blocks": [
{
"type": "testimonial",
"name": "Testimonial",
"settings": [
{
"type": "range",
"id": "rating",
"label": "Star rating",
"min": 1,
"max": 5,
"step": 1,
"default": 5
},
{
"type": "textarea",
"id": "quote",
"label": "Quote",
"default": "This product completely changed the way I work. Couldn't be happier."
},
{
"type": "image_picker",
"id": "author_photo",
"label": "Author photo"
},
{
"type": "text",
"id": "author_name",
"label": "Author name",
"default": "Jane Smith"
},
{
"type": "text",
"id": "author_title",
"label": "Author title or company",
"default": "Verified Customer"
}
]
}
],
"max_blocks": 12,
"presets": [
{
"name": "Testimonials Grid",
"blocks": [
{ "type": "testimonial" },
{ "type": "testimonial" },
{ "type": "testimonial" }
]
}
]
}
{% endschema %}Étape 4 — Ajouter le CSS
{% stylesheet %}
.testimonials-grid {
padding: 60px 0;
}
.testimonials-grid__heading {
text-align: center;
margin-bottom: 8px;
}
.testimonials-grid__subheading {
text-align: center;
color: #666;
margin-bottom: 40px;
}
.testimonials-grid__grid {
display: grid;
gap: 24px;
}
.testimonials-grid__grid--2-col {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid__grid--3-col {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 767px) {
.testimonials-grid__grid--2-col,
.testimonials-grid__grid--3-col {
grid-template-columns: 1fr;
}
}
.testimonials-grid__item {
background: #f9f9f9;
padding: 24px;
border-radius: 8px;
}
.testimonials-grid__star--filled {
color: #f5a623;
}
.testimonials-grid__quote {
font-style: italic;
margin: 12px 0 16px;
}
.testimonials-grid__author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonials-grid__author-photo {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.testimonials-grid__author-name {
font-weight: bold;
margin: 0;
}
.testimonials-grid__author-title {
font-size: 14px;
color: #666;
margin: 0;
}
{% endstylesheet %}Étape 5 — Tester
Après avoir enregistré, allez dans Boutique en ligne (Online Store) → Thèmes → Personnaliser (Customize). Cliquez sur “Add section” sur n’importe quelle page. Votre section “Testimonials Grid” devrait apparaître dans la liste. Ajoutez-la et vérifiez que le panneau de configuration fonctionne correctement.
Comment ajouter un nouveau type dans Shopify ?
Le terme “Type” dans le contexte des sections fait référence aux types de blocs à l’intérieur d’une section (comme le bloc "type": "testimonial" ci-dessus) ou au type de la section elle-même. Vous ajoutez de nouveaux types de section en créant de nouveaux fichiers Liquid dans sections/. Vous ajoutez de nouveaux types de blocs en ajoutant des entrées au tableau "blocks" d’une section dans son schéma.
FAQ
Pourquoi ma nouvelle section n’apparaît-elle pas dans le menu “Ajouter une section” ?
La cause la plus courante : l’absence d’un tableau "presets" dans le schéma. Une section sans presets est techniquement du code Liquid valide mais Shopify ne la listera pas dans le menu déroulant “Ajouter une section” — ajoutez au moins une entrée dans les presets avec un "name" et elle devrait apparaître. (Si vous préférez ne pas écrire le schéma à la main, Fudge génère le fichier de section avec des presets valides, le schéma et le code Liquid à partir d’une simple description en langage naturel.)
Quelle est la différence entre les paramètres de section et les paramètres de bloc ?
Les paramètres de section s’appliquent une seule fois à l’ensemble de la section (le titre, le nombre de colonnes, la couleur de fond). Les paramètres de bloc s’appliquent à chaque élément enfant répété à l’intérieur de la section (la citation de chaque témoignage, l’auteur, la note). Utilisez les paramètres de section pour la configuration globale et les blocs pour le contenu répétitif que le marchand ajoute et réorganise.
Puis-je limiter une section à des modèles de page spécifiques ?
Oui - dans le schéma, ajoutez "enabled_on": { "templates": ["product"] } pour la restreindre aux pages produits uniquement, ou "disabled_on": { "templates": ["index"] } pour la masquer sur la page d’accueil. Par défaut, une section avec des presets est disponible sur tous les modèles JSON.
Comment faire pour qu’une section fonctionne à la fois comme une section classique et comme un app block ?
Ce n’est pas possible, ce sont des concepts différents. Les app blocks sont des extensions installées par une application ; ils apparaissent dans la même interface “Ajouter une section” mais sont limités à l’application. Une section de thème se trouve dans le code de votre thème. Si vous la développez vous-même, créez simplement une section de thème.
Pourquoi {% schema %} s’affiche-t-il sous forme de texte brut sur ma page ?
Le code Liquid est affiché comme du contenu au lieu d’être interprété. Il est très probable que le fichier se trouve dans le mauvais dossier (il doit être dans sections/, et non dans snippets/ ou templates/), ou que le bloc schema comporte une erreur de syntaxe JSON qui interrompt l’interprétation du Liquid. Vérifiez l’inspecteur de thème pour trouver des erreurs et validez le JSON à l’intérieur de {% schema %} séparément.
Article connexe : Ajouter du JavaScript personnalisé dans Shopify.
Article connexe : Ajouter des sections de page d’accueil dans Shopify.