Comment ajouter une section personnalisée sur Shopify

Ce qu’il vous faut

• Une boutique Shopify et l’autorisation de modifier son thème (propriétaire de la boutique, ou membre du personnel ayant accès aux Thèmes).
• Le code de la section : un fichier .liquid qui se termine par une balise {% schema %}. Écrivez-le vous-même, générez-le avec Klorr ou choisissez-en un sur la marketplace.
• Un thème Online Store 2.0, si vous voulez la section sur d’autres pages que la page d’accueil.

1. Dupliquez d’abord votre thème

   Dans votre interface administrateur Shopify, allez dans Boutique en ligne → Thèmes. À côté de votre thème actuel, ouvrez le menu … et choisissez Dupliquer. Travaillez sur la copie : votre boutique en ligne reste intacte jusqu’à ce que le résultat vous convienne.

2. Ouvrez l’éditeur de code

   Sur la copie, rouvrez le menu … et choisissez Modifier le code. Les dossiers du thème — layout, sections, snippets, assets et les autres — sont listés à gauche.

3. Créez le fichier de la section

   Dans le dossier sections, choisissez Ajouter une nouvelle section (dans le nouvel éditeur, le + à côté du dossier, puis Nouveau fichier). Nommez-la d’après ce qu’elle fait, par exemple countdown-banner. Shopify crée sections/countdown-banner.liquid avec un peu de code d’exemple.

4. Collez votre code et enregistrez

   Sélectionnez tout le contenu du nouveau fichier, remplacez-le par le code de votre section — y compris le bloc {% schema %} à la fin — et cliquez sur Enregistrer. Si Shopify affiche une erreur, les solutions sont plus bas.

5. Ajoutez-la dans l’éditeur de thème

   Revenez à Thèmes et cliquez sur Personnaliser pour la copie. Ouvrez la page voulue — accueil, fiche produit, collection — et cliquez sur Ajouter une section dans la barre latérale gauche. Votre section apparaît sous le nom indiqué dans son schema.

6. Configurez-la et publiez

   Remplissez les paramètres de la section — textes, images, couleurs —, faites-la glisser à sa place et cliquez sur Enregistrer. Quand l’aperçu vous convient, publiez la copie depuis la page Thèmes.

Une section complète à tester

Collez ceci dans un nouveau fichier de section pour voir tout le processus fonctionner. C’est un titre, une ligne de texte et un bouton, chacun modifiable dans l’éditeur de thème.

<div class="promo-{{ section.id }}">
  <h2>{{ section.settings.heading | escape }}</h2>
  <p>{{ section.settings.text | escape }}</p>
  {% if section.settings.button_label != blank %}
    <a href="{{ section.settings.button_link }}">{{ section.settings.button_label | escape }}</a>
  {% endif %}
</div>

{% style %}
  .promo-{{ section.id }} {
    padding: 48px 20px;
    text-align: center;
    background: {{ section.settings.background }};
  }
{% endstyle %}

{% schema %}
{
  "name": "Promo banner",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "Free shipping this week" },
    { "type": "text", "id": "text", "label": "Text", "default": "On every order over $50." },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Shop now" },
    { "type": "url", "id": "button_link", "label": "Button link" },
    { "type": "color", "id": "background", "label": "Background", "default": "#f1ecfb" }
  ],
  "presets": [{ "name": "Promo banner" }]
}
{% endschema %}

Générateur de schema →

Pourquoi ajouter une section sans application

• Aucun frais mensuel : la section fait partie de votre thème, pas d’un abonnement.
• Rien de plus à charger : le script d’une application peut s’exécuter sur chaque page ; le code d’une section ne s’exécute que là où se trouve la section.
• Elle reste quand les applications partent : désinstaller une application peut laisser des trous dans les pages qu’elle a créées. Un fichier de section reste jusqu’à ce que vous le supprimiez.

Voir aussi