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

Points clés

• Un nouveau type de section est un fichier Liquid dans sections/ avec une structure HTML, un bloc {% schema %} et des “presets” pour apparaître dans le menu “Ajouter une section”.
• Ce guide crée une section complète de témoignages avec un titre modifiable, un nombre de colonnes et des blocs de témoignages répétables (citation, auteur, note).
• "max_blocks" limite le nombre de blocs que les marchands peuvent ajouter ; il n’y a pas de paramètre minimum, donc gérez une section vide dans le balisage.
• Une fois publiée, la section apparaît dans l’éditeur de thème pour toutes les pages qui autorisent les sections.

Pour ajouter un nouveau type de section dans Shopify, créez un fichier .liquid dans le dossier sections/ de votre thème avec le code HTML, un bloc {% schema %} et au moins un “preset”. Elle apparaît ensuite dans le menu Ajouter une section de l’éditeur de thème sur n’importe quel modèle de page qui prend en charge les sections. Ce guide crée une section de témoignages complète à 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 (par ex. testimonials-grid.liquid). Le fichier doit inclure un bloc {% schema %} valide avec une clé "presets" pour qu’il apparaisse dans le menu “Ajouter une section”.

Pour la logique Liquid à l’intérieur des sections, consultez Ajouter une logique Liquid personnalisée dans Shopify.

Planifier la section

Avant d’écrire du code, définissez les besoins de la section :

Paramètres au niveau de la section (globaux) :

• Texte du titre
• Texte du sous-titre
• Nombre de colonnes sur ordinateur (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 par étoiles (1 à 5)
• Photo de l’auteur (facultatif)

Comportement :

• Maximum 12 témoignages
• Le preset par défaut inclut 3 témoignages d’exemple

Pour créer une section comme celle-ci sans écrire de code, découvrez le Fudge Page Builder.

É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

<div 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 }} sur 5 étoiles">
              {% 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 | image_url: width: 80, height: 80, 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>
</div>

É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 %}

Pour les scripts qui accompagnent une section, consultez Ajouter du JavaScript personnalisé dans Shopify.

É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 “Type” dans le contexte des sections fait référence aux types de blocs au sein 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 sections 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 schema.

Pour placer la section terminée sur votre page d’accueil, consultez Ajouter des sections de page d’accueil dans Shopify.

FAQ