Comment créer une section Shopify personnalisée de A à Z (Guide étape par étape)

La version 2.0 de la boutique en ligne de Shopify a transformé la façon dont les marchands personnalisent leurs boutiques. Avec les sections personnalisées, vous pouvez créer des composants réutilisables et flexibles que les marchands peuvent ajouter, supprimer et personnaliser directement depuis l'Éditeur de thème, sans avoir à modifier le code à chaque fois.

Que vous créiez une bannière principale, une section FAQ, une galerie d'images, un carrousel de témoignages ou une présentation de produits, la maîtrise du développement des sections Shopify est une compétence essentielle pour tout développeur Shopify.

Dans ce guide, nous allons parcourir l'intégralité du processus de création d'une section Shopify personnalisée à partir de zéro en utilisant Liquid, HTML, CSS, JavaScript et les paramètres de schéma de Shopify.

Pourquoi créer des sections Shopify personnalisées ?

Les sections personnalisées offrent plusieurs avantages :

• Une plus grande flexibilité de conception
• De meilleures performances de la boutique par rapport à de nombreuses applications tierces
• Une personnalisation plus facile pour les marchands
• Des composants réutilisables sur plusieurs pages
• Une expérience utilisateur et des taux de conversion améliorés

Pour les agences et les développeurs Shopify, les sections personnalisées permettent également de créer des boutiques uniques qui se démarquent de la concurrence.

Comprendre les sections Shopify

Une section Shopify est un bloc de contenu modulaire qui peut être personnalisé via l'Éditeur de thème.

Voici quelques exemples courants :

• Bannières principales
• Produits mis en avant
• Témoignages
• FAQ
• Galeries d'images
• Sections vidéo
• Présentations de collections
• Bannières promotionnelles

Avec la version 2.0 de la boutique en ligne, les sections peuvent être utilisées sur presque toutes les pages, rendant la personnalisation de la boutique plus puissante que jamais.

Étape 1 : Créer un nouveau fichier de section

Accédez à :

Boutique en ligne → Thèmes → Modifier le code → Sections

Créez un nouveau fichier nommé :

custom-hero.liquid

Ce fichier contiendra le balisage, le style, les paramètres et les fonctionnalités de votre section.

Étape 2 : Créer le balisage de la section

Ajoutez le code Liquid suivant :

<div class="ck-hero">
  <div class="ck-container">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.description }}</p>

    <a href="{{ section.settings.button_link }}" class="ck-button">
      {{ section.settings.button_text }}
    </a>
  </div>
</div>

Cela permet de contrôler le contenu de manière dynamique via l'Éditeur de thème.

Étape 3 : Ajouter le style

.ck-hero {
  padding: 100px 20px;
  text-align: center;
}

.ck-hero h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.ck-button {
  display: inline-block;
  padding: 14px 28px;
  text-decoration: none;
}

L'utilisation d'un préfixe personnalisé tel que ck- aide à éviter les conflits CSS avec les thèmes et les applications.

Étape 4 : Créer les paramètres de l'Éditeur de thème

Ajoutez la section de schéma :

{% schema %}
{
  "name": "Bannière principale CK",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Titre"
    },
    {
      "type": "textarea",
      "id": "description",
      "label": "Description"
    }
  ],
  "presets": [
    {
      "name": "Bannière principale CK"
    }
  ]
}
{% endschema %}

Ces paramètres apparaissent automatiquement dans l'Éditeur de thème de Shopify.

Étape 5 : Ajouter des blocs dynamiques

Les blocs permettent aux marchands de créer plusieurs éléments de contenu sans coder.

Exemple :

{% for block in section.blocks %}
  <div class="testimonial">
    <h3>{{ block.settings.name }}</h3>
    <p>{{ block.settings.review }}</p>
  </div>
{% endfor %}

Parfait pour :

• Témoignages
• FAQ
• Membres de l'équipe
• Fonctionnalités
• Galeries d'images

Étape 6 : Ajouter des fonctionnalités interactives

Pour les carrousels, accordéons, onglets et animations :

document.addEventListener('DOMContentLoaded', () => {
  console.log('Section personnalisée chargée');
});

Pour les projets plus importants, déplacez le JavaScript dans un fichier d'actif dédié.

Bonnes pratiques de développement des sections Shopify

Gardez les sections modulaires

Concevez chaque section pour un usage unique et évitez de combiner trop de fonctionnalités dans un seul composant.

Optimisez les images

Utilisez les filtres d'image de Shopify :

{{ image | image_url: width: 1200 | image_tag }}

Rendez tout responsive

Testez toujours sur ordinateur, tablette et appareil mobile.

Utilisez des paramètres pertinents

Organisez clairement les paramètres afin que les marchands puissent personnaliser facilement les sections.

Misez sur les performances

Minimisez le JavaScript inutile et optimisez les ressources pour un chargement plus rapide.

Quelques mots en conclusion

Les sections Shopify personnalisées constituent la base du développement moderne de thèmes Shopify. En maîtrisant Liquid, les paramètres de schéma, le design responsive et les composants réutilisables, les développeurs peuvent créer des expériences de boutique hautement flexibles que les marchands peuvent gérer facilement.

Chez CodeKanon, nous créons des sections Shopify personnalisées, des personnalisations de thèmes et des applications Shopify qui aident les marchands à créer des boutiques plus rapides, plus engageantes et axées sur la conversion.

Besoin d'aide avec le développement Shopify ? Contactez CodeKanon pour donner vie à votre prochain projet Shopify.