Comment ajouter un nouveau type de section dans Shopify de zéro (2026)

À 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 “Ajouter une section”.
• Ce guide permet de créer une section de témoignages complète avec un titre modifiable, un nombre de colonnes et des blocs de témoignages récurrents (citation, auteur, note).
• "max_blocks" limite le nombre de blocs que les marchands peuvent ajouter. "min_blocks" impose un minimum.
• Une fois publiée, la section apparaît dans l’Éditeur de thème (Theme Editor) pour toutes les pages qui autorisent les sections.

Un nouveau type de section vient s’ajouter à la bibliothèque de sections de votre thème — disponible pour être ajouté à n’importe quel template de page qui prend en charge les sections. Ce guide vous montre comment créer de zéro une section de témoignages complète, prête pour la production.

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 %}">&#9733;</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

Sur le même sujet : Ajouter du JavaScript personnalisé sur Shopify.

Sur le même sujet : Ajouter des sections à la page d’accueil sur Shopify.