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 mot “Type” dans le contexte des sections fait référence aux types de blocs dans une section (comme le bloc "type": "testimonial" ci-dessus) ou au type de la section elle-même. On ajoute de nouveaux types de sections en créant de nouveaux fichiers Liquid dans sections/. On ajoute de nouveaux types de blocs en ajoutant des éléments dans le tableau "blocks" du schema de la section.
Sur le même sujet : Ajouter du JavaScript personnalisé dans Shopify.
Sur le même sujet : Ajouter des sections sur la page d’accueil dans Shopify.