How to Create and Add a Custom Liquid Section to Your Shopify Store in 2025

Pourquoi ajouter une section personnalisée à votre boutique Shopify ?

Les sections personnalisées vous permettent de contrôler totalement la mise en page et le contenu de votre boutique. Voici pourquoi ils sont importants :

• Stimulez l'engagement : Personnalisez le contenu pour mettre en valeur les offres uniques de votre marque.
• Améliorez le référencement : Ajoutez des sections riches en mots clés pour obtenir un meilleur classement dans les moteurs de recherche.
• Réduisez les coûts : Évitez les applications tierces grâce à l'éditeur de thème intégré à Shopify.
• Design flexible : Créez des sections réutilisables pour n'importe quelle page, des pages d'accueil aux pages de produits.

Pour plus d'inspiration sur les sections personnalisées de Shopify, consultez consultez notre guide des sections Shopify.

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Un compte Shopify avec accès administrateur.
• Connaissances de base du HTML, du CSS et de l'éditeur de thèmes de Shopify.
• Une sauvegarde de votre thème (dupliquez toujours votre thème avant de modifier le code).

Étape 1 : comprendre les sections Shopify

Les sections Shopify sont des blocs de contenu réutilisables et personnalisables que vous pouvez ajouter aux pages de votre boutique. Ils sont créés à l'aide de Liquid, le langage de création de modèles de Shopify, et stockés dans le dossier des sections de votre thème. Les sections peuvent inclure du contenu statique (comme du texte ou des images) ou du contenu dynamique (comme des données sur les produits).

Pour en savoir plus sur Liquid, consultez la référence Liquid officielle de Shopify.

Étape 2 : Accédez à votre éditeur de thème Shopify

1. Connectez-vous à votre panneau d'administration Shopify.
2. Naviguez vers Boutique en ligne > Thèmes.
3. Trouvez votre thème actif, cliquez Actions, puis sélectionnez Modifier le code.

Cela ouvre l'éditeur de thème, dans lequel vous allez créer et gérer votre section personnalisée.

Étape 3 : Création d'un nouveau fichier de section

Créons une section personnalisée pour afficher une bannière promotionnelle avec un bouton d'appel à l'action (CTA).

1. Dans l'éditeur de thème, localisez le Rubriques dossier.
2. Cliquez Ajouter une nouvelle section et nommez-la promo-banner.
3. Ajoutez le code Liquid suivant au nouveau fichier :

‍

{% schema %}
{
  "name": "Promo Banner",
  "settings": [
    {
      "type": "text",
      "id": "banner_title",
      "label": "Banner Title",
      "default": "Welcome to Our Store!"
    },
    {
      "type": "text",
      "id": "banner_subtitle",
      "label": "Banner Subtitle",
      "default": "Shop our exclusive collection today."
    },
    {
      "type": "url",
      "id": "button_url",
      "label": "Button URL"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Shop Now"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#f5f5f5"
    }
  ],
  "presets": [
    {
      "name": "Promo Banner",
      "category": "Promotional"
    }
  ]
}
{% endschema %}

<div class="promo-banner" style="background-color: {{ section.settings.background_color }};">
  <div class="promo-content">
    <h2>{{ section.settings.banner_title }}</h2>
    <p>{{ section.settings.banner_subtitle }}</p>
    {% if section.settings.button_url != blank %}
      <a href="{{ section.settings.button_url }}" class="promo-button">{{ section.settings.button_text }}</a>
    {% endif %}
  </div>
</div>

<style>
  .promo-banner {
    padding: 40px 20px;
    text-align: center;
  }

  .promo-content h2 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #333;
  }

  .promo-content p {
    font-size: 16px;
    margin-bottom: 20px;
    color: #555;
  }

  .promo-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
  }

  .promo-button:hover {
    background-color: #0056b3;
  }
</style>

4. Cliquez Enregistrer.

‍

Répartition du code

• Paramètres du schéma : Le bloc {% schema %} définit les champs personnalisables (titre, sous-titre, URL du bouton, etc.) qui apparaissent dans le personnalisateur de thème.
• Structure HTML : Le <div class="promo-banner">contient le contenu de la bannière, en extrayant dynamiquement les valeurs du schéma.
• Style CSS : La <style>section garantit à la bannière un aspect professionnel et réactif.
• Préréglages : La section « préréglages » permet de sélectionner facilement la section dans le personnalisateur de thème.

‍

Étape 4 : Ajoutez la section personnalisée à votre boutique

1. Dans l'éditeur de thème, cliquez sur Personnalisez (ou retournez à Boutique en ligne > Thèmes > Personnaliser).
2. Sélectionnez la page où vous souhaitez placer la section (par exemple, page d'accueil).
3. Cliquez Ajouter une section dans la barre latérale.
4. Trouvez Bannière promotionnelle dans le cadre du Promotionnel catégorie et ajoutez-la.
5. Personnalisez les paramètres de la section (par exemple, modifiez le titre, le sous-titre ou la couleur d'arrière-plan).
6. Cliquez Enregistrer.

‍

Étape 5 : Testez votre section personnalisée

1. Prévisualisez votre boutique pour vous assurer que la bannière promotionnelle s'affiche correctement.
2. Testez le bouton CTA pour confirmer qu'il renvoie à la bonne URL.
3. Vérifiez la réactivité sur les appareils mobiles et les tablettes.

Si la section n'apparaît pas, vérifiez la syntaxe de votre schéma et assurez-vous que la section est ajoutée au modèle de page approprié.

‍

Étape 6 : Personnaliser davantage (facultatif)

• Ajouter des images : Incluez un « image_picker » dans le schéma pour permettre aux utilisateurs de télécharger une image d'arrière-plan. Pour en savoir plus, consultez la documentation sur les schémas de Shopify.
• Contenu dynamique : Utilisez les boucles Liquid pour afficher les produits ou les collections de manière dynamique.
• Style : Ajustez les polices, les couleurs ou le remplissage de la <style>section en fonction de votre marque.

‍

Pour des idées de sections avancées, explorez notre guide des sections Shopify.

‍

Conseils de dépannage

• La section ne s'affiche pas ? Assurez-vous que la section est ajoutée dans le personnalisateur de thème et attribuée à la bonne page.
• Des erreurs de code ? Validez votre syntaxe Liquid à l'aide d'outils tels que Shopify Theme Check.
• Pas réactif ? Ajoutez des requêtes multimédia à la <style>section relative à la compatibilité mobile.

‍

Conclusion

La création d'une section personnalisée dans Shopify est un moyen efficace de personnaliser votre boutique et d'engager les clients en 2025. Avec le code Liquid fourni, vous pouvez ajouter une bannière promotionnelle en quelques minutes et la personnaliser en fonction de votre marque. Pour plus de conseils de personnalisation de Shopify, consultez notre Guide des sections Shopify ou explorez les ressources de développement de thèmes de Shopify.

Commencez à créer votre section personnalisée dès aujourd'hui et faites passer votre boutique Shopify au niveau supérieur !