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 %}">&#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.

Créez une section Shopify sur mesure en la décrivant à Fudge.

Try Fudge for Free

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.