Thème Shopify & Développement : Architecture

Architecture d’un thème Shopify (dossiers et fichiers)

On a vu dans l’article précédent qu’un thème Shopify contrôle l’organisation, les fonctionnalités et le style d’une boutique. Pour visualiser et modifier les fichiers sources d’un thème, Shopify dispose d’un éditeur de code auquel vous pouvez accéder en allant dans Boutique en ligne > Thèmes, et en cliquant sur Actions > Modifier le code. Vous accédez alors à tous les dossiers et fichiers qui composent le thème.

Vous pouvez voir que tout le code est organisé à l’aide d’une structure de répertoires spécifiques aux thèmes Shopify. La structure des dossiers sur Shopify est toujours la même, peu importe le thème que vous utilisez. Il est composé de 7 dossiers : Layout, Templates, Sections, Snippets, Assets, Config et Locales. Il n’y a pas de sous-répertoires dans les répertoires de niveau supérieur, et tous les répertoires supplémentaires inclus dans un thème Shopify sont supprimés lors du téléchargement vers Shopify.

Quand aux fichiers de thème, leur rôle dépend du répertoire dans lequel ils se trouvent mais ils peuvent globalement être classés en 3 catégories :

• Les fichiers visuels et fonctionnels – Ces fichiers contrôlent la mise en page et les fonctionnalités d’un thème. Ils se basent sur le langage Liquid pour générer le balisage HTML qui compose les pages de la boutique.
• Les fichiers support – Ces fichiers sont des ressources, des scripts, des feuilles de style ou des fichiers de paramètres qui sont appelés ou consommés par d’autres fichiers du thème.
• Les fichiers de configuration – Ces fichiers utilisent JSON pour stocker les données de configuration qui peuvent être personnalisées à l’aide de l’éditeur de thème.

Les thèmes Shopify contiennent donc les dossiers suivants :

• Le dossier Layout

Le premier répertoire est le dossier Layout qui va contenir la structure de votre thème Shopify. Les fichiers Layout constituent la base du thème, à travers lesquels tous les templates sont rendus. Ils sont notamment utiles pour afficher les éléments constants du thème, comme le header et le footer.

Pour le thème Dawn, il y a 2 fichiers, le fichier password.liquid qui est tout simplement la page d’attente quand le site est fermé et protégé par un mot de passe et le fichier theme.liquid qui est le point de départ de votre boutique avec toute la structure HTML de base, votre en-tête et votre pied de page.

• Le dossier Templates

Le dossier Templates contient tous les templates ou modèles en français des pages qui sont disponibles, c’est-à-dire le squelette de toutes les pages existantes dans la boutique. Depuis la mise à jour avec le Online Store 2.0, ces fichiers peuvent être au format JSON ou Liquid. 

Concernant les templates Liquid, ce sont des fichiers possédant du contenu HTML classique et dynamisé par le langage de Shopify, le Liquid.

Quant aux templates JSON, ce sont des fichiers de données qui stockent une liste de sections à afficher, ainsi que leurs paramètres associés. Ce type de template offre 2 avantages : D’une part, les sections peuvent ainsi être ajoutées, supprimées ou réorganisées facilement via l’éditeur de thème. D’autre part, les données sont stockées directement dans le template, et non plus dans le fichier de données principal – le fichier settings_data.json que nous verrons par la suite – ce qui améliore les performances de l’éditeur de thème.

Attention, un template ne peut exister qu’en tant que fichier JSON ou Liquid, pas les deux. Par exemple, si product.liquid existe déjà, vous ne pouvez pas créer product.json.

• Le dossier Sections

Les sections sont des modules de contenu réutilisables qui peuvent être personnalisés et réorganisés directement depuis l’éditeur de thème. Pour ce faire, les sections disposent d’une balise Liquid spécifique {% schema %} qui permet de définir des objets JSON pour créer des paramètres accessibles via l’éditeur de thème.

Les sections peuvent être utilisées de plusieurs manières : 

• La première est de les inclure dans un template JSON comme on l’a vu juste avant
• La seconde est d’utiliser la balise Liquid {% section %} dans un fichier .liquid. Par exemple, si vous avez un fichier /sections/header.liquid qui contient l’en-tête de votre thème, vous pouvez inclure cette section dans /layout/theme.liquid afin que l’en-tête soit rendu sur toutes les pages de votre boutique : {% section ‘header’ %}
• Enfin la troisième manière utilisée dans certains cas précis est de passer par l’API de rendu des sections

Voilà pour une brève présentation des sections, je couvrirai plus en profondeur cette brique importante d’un thème Shopify dans un autre article.

• Le dossier Snippets

Les snippets, comme leur nom l’indique, sont des morceaux de code qui peuvent être réutilisés dans différents fichiers Liquid des dossiers Layout, Templates ou Sections au sein d’un thème Shopify. Ils sont également utiles pour produire du code plus propre et plus lisible en créant un snippet avec votre bout de code et en l’incluant dans le fichier Liquid avec la balise {% render %}.

• Le dossier Assets

Ensuite, on a le dossier assets qui regroupe tous les fichiers images, CSS et javascript utilisés par les fichiers Layout, Templates et Sections pour définir le style du thème Shopify.

• Le dossier Config

Le dossier Config, quant à lui, contient deux fichiers JSON de configuration. Le premier fichier – settings_data.json – contient toutes les valeurs enregistrées des paramètres globaux du thème. Le second fichier – settings_schema.json – contrôle lui l’organisation et le contenu de ces paramètres de thème éditables depuis l’éditeur de thème.

• Le dossier Locales

Enfin le dossier Locales contient tous les fichiers de traduction pour traduire votre thème dans différentes langues. Ces fichiers de paramètres linguistiques contiennent un ensemble de traductions pour chacun des textes utilisés dans le thème Shopify.

Comment un thème Shopify construit une page de la boutique

Après ce rapide tour d’horizon de l’architecture d’un thème Shopify, on va maintenant voir comment ces fichiers interagissent entre eux pour construire les pages de votre boutique.

Si on analyse les sites e-commerce, que ce soit un géant comme Amazon ou de plus petites boutiques Shopify ou d’autres CMS, on peut remarquer qu’ils ont tous une structure commune.

Ils commencent tous par une en-tête ou header contenant le logo de la marque, le menu de navigation et très souvent un champ de recherche, vient ensuite le contenu de page qui sera dynamique en fonction de votre navigation sur le site (le contenu de la page d’accueil d’Amazon a été raccourci sur l’image ci-dessous par souci de schématisation), et enfin en bas de page, le pied de page ou footer qui contient des menus de navigation secondaires et des informations complémentaires.

Toutes les boutiques partagent donc cette même même mise en page : header, contenu dynamique et footer avec des header et footer présents de manière constante sur l’ensemble du site.

Les layouts

Voyons maintenant comment cette structure est mise en place dans un thème Shopify. Comme expliqué brièvement un peu plus haut, tout part du dossier Layout, et plus précisément du fichier theme.liquid qui est le point de départ de votre boutique avec toute la structure HTML de base, la balise <html> qui englobe le tout, la balise <head> avec toutes les métadonnées du site et la balise <body> qui contient tout le visuel de la boutique.

Concernant la balise <head>, elle contient donc toutes les métadonnées de la boutique, mais également très souvent du CSS, des imports de fichiers Javascript et de polices de caractères et aussi un objet Liquid {{ content_for_header }} qui inclut des scripts Shopify et configurés dans le backend de Shopify tels que Google Analytics, Shopify Analytics, les applications Shopify, etc.

Ensuite, concernant la balise <body>, la partie intéressante est :

<body>
...
{% section 'header' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
    {{ content_for_layout }}
</main>
{% section 'footer' %}
…
</body>

Il s’agit là exactement de la structure commune aux sites e-commerce : l’en-tête appelée avec la section Header, le contenu de page dynamique avec la balise <main> et l’objet Liquid {{ content_for_layout }} et enfin le pied de page appelée avec la section Footer.

Si vous ajoutez du contenu au-dessus de la section Header, il sera affiché en haut de votre site et sur chacune des pages. C’est par exemple le cas dans le thème Dawn avec l’appel de la section {% section ‘announcement-bar’ %} qui comme son nom l’indique permet d’afficher une barre d’annonce en haut de page au-dessus de l’en-tête.

On va maintenant s’attarder sur l’objet {{ content_for_layout }} qui permet de dynamiser le contenu du site. Ainsi, tout ce qui change sur les pages à l’exception du header et du footer qui sont fixes, est géré par cet objet {{ content_for_layout }}. Il s’appuie sur le dossier Templates et tous ses modèles de page pour rendre dynamiquement le contenu en fonction de la page visitée. Par exemple, si vous visitez une page collection, le template collection.json sera rendu.

Les templates

Chaque thème Shopify doit donc inclure différents types de templates pour afficher différents types de contenu, tels que la page d’accueil, les collections, les produits, etc… Vous pouvez également créer plusieurs templates pour le même type de page afin de permettre des variations au sein de la boutique en ligne. Vous pouvez par exemple avoir plusieurs templates de page produit si vous souhaitez présenter certains produits différemment d’autres.

Comme je l’ai abordé plus haut, depuis la mise à jour du Online Store 2.0, un template peut maintenant être un objet JSON et stocker une liste de sections à afficher, ainsi que leurs paramètres associés. Ces sections sont des modules de contenu réutilisables qui peuvent être personnalisés et réorganisés directement depuis l’éditeur de thème.

Si on prend par exemple un template simple comme collection.json, on peut voir qu’il utilise deux sections, banner de type main-collection-banner et product-grid de type main-collection-product-grid. 

{
  "sections": {
    "banner": {
      "type": "main-collection-banner",
      "settings": {
        "show_collection_description": false,
        "show_collection_image": false
      }
    },
    "product-grid": {
      "type": "main-collection-product-grid",
      "settings": {
        "products_per_page": 16,
        "image_ratio": "adapt",
        "show_secondary_image": true,
        "add_image_padding": false,
        "show_vendor": false,
        "enable_filtering": true,
        "enable_sorting": true
      }
    }
  },
  "order": [
    "banner",
    "product-grid"
  ]
}

Maintenant, si on va dans l’éditeur de thème et qu’on sélectionne le template de la page collection, on peut voir sur la gauche l’ensemble des sections utilisées sur la page collection : Les sections Barre d’annonces, En-tête et Pied de page visibles sur toutes les pages et contenues dans Layout/theme.liquid et les sections Bannière de collection et Grille de produit qui correspondent aux deux sections définies dans le fichier de template collection.json

Même si ça n’a pas vraiment de sens, on va maintenant pour l’exemple ajouter une section Formulaire de contact au template collection depuis l’éditeur de thème et enregistrer. 

Et bien, si vous repartez voir le fichier collection.json, vous allez retrouver une nouvelle section de type contact-form qui correspond au formulaire de contact qu’on a ajouté au template collection.

{
  "sections": {
    "banner": {
      "type": "main-collection-banner",
      "settings": {
        "show_collection_description": false,
        "show_collection_image": false
      }
    },
    "16330235404d511413": {
      "type": "contact-form",
      "settings": {
      }
    },
    "product-grid": {
      "type": "main-collection-product-grid",
      "settings": {
        "products_per_page": 16,
        "image_ratio": "adapt",
        "show_secondary_image": true,
        "add_image_padding": false,
        "show_vendor": false,
        "enable_filtering": true,
        "enable_sorting": true
      }
    }
  },
  "order": [
    "banner",
    "16330235404d511413",
    "product-grid"
  ]
}

Les sections

Vous comprenez ainsi toute la puissance des sections et la possibilité de créer ou modifier des templates en utilisant toutes les sections disponibles dans le thème. Et vous vous rendez également compte que la majorité des modifications ou ajouts de code se fera au niveau des sections pour ensuite pouvoir les utiliser dans les templates.

D’autant plus que les sections ont un autre avantage, elles peuvent fournir des options de personnalisations grâce à la balise Liquid {% schema %}. En effet, si on prend la première section définie dans le template collection.json, qui est main-collection-banner, on trouve un objet JSON dans la balise schema.

{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label",
      "info": "t:sections.main-collection-banner.settings.show_collection_image.info"
    }
  ]
}
{% endschema %}

Et bien, cet objet JSON permet de définir les options de personnalisation pour la section Bannière de collection dans l’éditeur de thème.

Ainsi, si vous modifiez une section et souhaitez ajouter des options de personnalisation, il vous suffit d’ajouter ces paramètres dans l’objet {% schema %} et vous pourrez y accéder grâce aux paramètres de section – section.settings.id – id étant l’identifiant du paramètre défini dans l’objet {% schema %}.

Comme je l’ai dit auparavant, je reviendrai plus en détail sur le fonctionnement et la création de section dans un autre article.

Les snippets

Maintenant, j’aimerais aborder une dernière chose très utilisée et très pratique dans un thème Shopify, les snippets. Il s’agit simplement de morceaux de code réutilisables que vous pouvez insérer dans tous les fichiers Liquid. Les snippets sont inclus en utilisant le mot-clé render et le nom du snippet à inclure {% render ‘snippet’ %}.

Par exemple, dans le fichier Layout/theme.liquid, vous avez le snippet meta-tags qui est utilisé, et si nous regardons dans le dossier snippets, vous pouvez trouver le fichier meta-tags.liquid qui inclut tout le code qui est rendu. Il s’agit donc d’un moyen d’organiser votre code, surtout si vous réutilisez le code à plusieurs reprises pour différentes sections.

Voici donc un aperçu rapide du fonctionnement d’un thème. Pour résumer, quand vous voulez apporter une modification à votre thème, commencez par le haut de la structure. 

Posez vous la question si c’est une modification qui sera présente sur toutes les pages, si oui vous allez probablement modifier un fichier Layout et notamment theme.liquid.

Si la modification s’applique spécifiquement à certaines pages, vous allez partir du template correspondant, voir les sections utilisées par ce template, créer une nouvelle section ou chercher la section à modifier dans le dossier Sections.

Rappelez vous également des mots clés de rendu, si vous tombez sur une balise {% section %}, il s’agit d’une section et si vous tombez sur une balise {% render %}, il s’agit d’un snippet.

Réaliser une modification dans un thème Shopify

Pour finaliser cet article, on va maintenant réaliser une modification concrète d’un thème Shopify qui n’est pas faisable directement depuis l’éditeur de thème. On va voir comment identifier où modifier le code et comment effectuer et tester la modification.

Alors pour l’exemple, on va voir comment ajouter l’option d’afficher ou cacher le titre de la collection sur la page collection. Par défaut sur le thème Dawn, il est possible d’afficher ou cacher la description ou l’image de la collection mais pas le titre, nous allons donc voir comment ajouter cette simple personnalisation.

La première étape est d’identifier le fichier à modifier pour apporter cette personnalisation à la page collection. On ouvre donc une page collection directement dans l’éditeur de thème puis on ouvre l’outil d’inspection (en faisant clic droit puis inspecter sur Chrome). On découvre alors tout le contenu HTML de la page et pour nous éviter de chercher le bon élément dans tout ce code, Chrome offre un outil très pratique de sélection d’élément dans la page. On sélectionne donc l’outil et on clique sur le titre de la collection. 

On peut voir dans le code HTML que le titre de la collection est l’élément H1 suivant :

<h1 class="collection-hero__title">HOMME</h1>

Il est imbriqué dans plusieurs DIV et en remontant les DIV parentes, on arrive sur une DIV ayant un identifiant commençant par shopify-section. Si on regarde les paramètres de cette DIV, on y retrouve le nom de la section dans notre thème Shopify, et il s’agit de la section main-collection-banner.

On sait désormais qu’il faut apporter des modifications à la section main-collection-banner pour réaliser la personnalisation souhaitée. Et si on ouvre ce fichier dans le dossier Sections, on retrouve l’élément H1 avec la classe ‘collection-hero__title’, il suffit donc maintenant d’entourer cet élément avec une condition IF en Liquid qui va se baser sur le paramètre ‘show_collection_title’ de la section et que nous allons créer juste après.

<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %}">
  <div class="collection-hero__inner page-width">
    <div class="collection-hero__text-wrapper">
      {%- if section.settings.show_collection_title -%}
        <h1 class="collection-hero__title">
          <span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
          {{- collection.title | escape -}}
        </h1>
      {%- endif -%}

      {%- if section.settings.show_collection_description -%}
        <div class="collection-hero__description rte">{{ collection.description }}</div>
      {%- endif -%}
    </div>

    {%- if section.settings.show_collection_image and collection.image -%}
      <div class="collection-hero__image-container media">
        <img srcset="{%- if collection.image.width >= 165 -%}{{ collection.image | img_url: '165x' }} 165w,{%- endif -%}
          {%- if collection.image.width >= 360 -%}{{ collection.image | img_url: '360x' }} 360w,{%- endif -%}
          {%- if collection.image.width >= 535 -%}{{ collection.image | img_url: '535x' }} 535w,{%- endif -%}
          {%- if collection.image.width >= 720 -%}{{ collection.image | img_url: '720x' }} 720w,{%- endif -%}
          {%- if collection.image.width >= 940 -%}{{ collection.image | img_url: '940x' }} 940w,{%- endif -%}
          {%- if collection.image.width >= 1070 -%}{{ collection.image | img_url: '1070x' }} 1070w{%- endif -%}"
          src="{{ collection.image | img_url: '533x' }}"
          sizes="(min-width: 1100px) 535px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
          alt="{{ collection.title | escape }}"
          loading="lazy"
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
        >
      </div>
    {%- endif -%}
  </div>
</div>

Maintenant que la condition est en place, il faut créer le paramètre ‘show_collection_title’ pour la section. Pour ce faire, on ajoute un objet dans le JSON de la balise {% schema %} comme ci-dessous.

{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_title",
      "default": true,
      "label": "Afficher le titre de la collection"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label",
      "info": "t:sections.main-collection-banner.settings.show_collection_image.info"
    }
  ]
}
{% endschema %}

Pour le label du paramètre, j’ai indiqué directement le texte en français pour plus de simplicité. Il est sinon possible de définir une traduction comme pour les autres paramètres mais il faudra alors aller ajouter cette traduction dans les fichiers de traduction comme fr.schema.json dans le dossier Locales. Vous recherchez le nom de la section – main-collection-banner – et vous trouverez toutes les traductions correspondantes à cette section.

Et voilà, vous pouvez maintenant afficher ou cacher le titre de la collection directement depuis l’éditeur de thème.

On arrive à la fin de cet article dans lequel nous avons couvert l’ensemble du fonctionnement d’un thème Shopify. Dans le prochain article de cette série, nous verrons plus en profondeur le langage de templating de Shopify : le Liquid.