Shopify thèmes et personnalisation : guide pratique

Lecture : 13 minutes · Niveau : intermédiaire · Mise à jour : avril 2026

Un thème Shopify standard ne ressemble jamais à un site sur-mesure d’agence. Pour différencier sa boutique sans tomber dans la dépendance à un développeur pour chaque modification, il faut maîtriser le système de thèmes Online Store 2.0 : sections, blocks, metafields, Theme Editor. Ce guide montre comment personnaliser efficacement, sans casser ce qui marche.

Voir aussi → Shopify pour PME en Afrique : guide complet.

1. Choisir un thème de base

Thèmes officiels gratuits

Shopify maintient une dizaine de thèmes gratuits officiels (Dawn, Refresh, Sense, Crave, Studio, Taste, Origin, Spotlight, Colorblock, Publisher). Tous sont Online Store 2.0, performants, accessibles, bien maintenus.

Recommandation pour démarrer : Dawn. C’est le thème de référence Shopify, utilisé comme base par de nombreux thèmes premium. Documentation abondante, communauté active.

Thèmes payants

Vendus généralement en achat ponctuel (vérifier les prix actuels sur le Theme Store Shopify, qui varient selon le thème). Plus de sections custom, parfois plus rapide à personnaliser visuellement, support officiel du créateur.

Quand justifié : besoin spécifique (mode/lifestyle avec galerie immersive, marketplace multi-vendeur, B2B avec catalogue très complexe). Vérifier la documentation, les avis, le score Lighthouse, le support.

Critères de choix

Performance : score Lighthouse > 70 mobile minimum
Online Store 2.0 : éviter les anciens thèmes (1.0)
Sections riches : nombre et qualité des sections fournies
Documentation : claire, à jour
Support : actif, réactif aux questions
Avis : 4.5+ avec volume significatif

2. Online Store 2.0 : architecture moderne

OS 2.0 (lancé en 2021) a révolutionné les thèmes Shopify :

JSON templates : structure de page configurable via JSON, plus rigide qu’avant
Sections everywhere : sections réutilisables sur toutes les pages (avant, limitées à la home)
App blocks : apps tierces s’intègrent via blocks dans les sections, sans toucher au thème
Metafields : structure de données custom par produit/collection/page
Performance améliorée : code plus léger, lazy loading natif

Tout nouveau projet en 2026 doit être sur OS 2.0. Les thèmes 1.0 sont en fin de vie.

Structure d’un thème OS 2.0

theme/
├── assets/              # CSS, JS, images
├── config/              # settings_schema.json
├── layout/              # theme.liquid (squelette HTML)
├── locales/             # traductions
├── sections/            # composants réutilisables
├── snippets/            # fragments inclus
└── templates/           # pages : product.json, collection.json, etc.

Les templates/*.json définissent quelles sections sont sur quelle page, dans quel ordre.

3. Theme Editor : personnaliser sans code

L’admin Shopify intègre un éditeur visuel : Online Store → Themes → Customize.

Capacités

Drag & drop des sections sur la page
Settings par section : couleurs, textes, images, blocs imbriqués
Preview multi-device : desktop, tablette, mobile
Themes settings globaux : palette de couleurs, typographies, header/footer
Multi-templates : éditer template produit pour différents produits, template page pour différentes pages

Limites

Pas tout est personnalisable (certaines sections sont rigides selon thème)
Les modifications profondes (CSS sur mesure, JS custom) demandent du code
Pas de versioning : chaque modification écrase l’ancienne

Pour des modifications importantes : dupliquer le thème (Actions → Duplicate) et travailler sur la copie. Publier seulement quand tout est prêt.

4. Sections et blocks

Les sections sont des composants réutilisables. Une section a son template Liquid, ses settings, et peut contenir des blocks répétables.

Anatomie d’une section

{# sections/featured-products.liquid #}
<div class="featured-products">
  <h2>{{ section.settings.title }}</h2>
  <div class="grid">
    {% for product in collections[section.settings.collection].products limit: section.settings.limit %}
      <div class="card">
        <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title }}">
        <h3>{{ product.title }}</h3>
        <p>{{ product.price | money }}</p>
      </div>
    {% endfor %}
  </div>
</div>

{% schema %}
{
  "name": "Produits en vedette",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Titre",
      "default": "Nos produits"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection à afficher"
    },
    {
      "type": "range",
      "id": "limit",
      "label": "Nombre de produits",
      "min": 2,
      "max": 12,
      "default": 4
    }
  ],
  "presets": [
    {
      "name": "Produits en vedette"
    }
  ]
}
{% endschema %}

Le {% schema %} définit les settings éditables dans le Theme Editor. La section est ensuite sélectionnable depuis l’éditeur visuel.

Blocks

Pour des éléments répétables dans une section (cartes, témoignages, étapes) :

{% for block in section.blocks %}
  {% case block.type %}
    {% when 'testimonial' %}
      <blockquote>{{ block.settings.text }}</blockquote>
    {% when 'image' %}
      <img src="{{ block.settings.image | image_url }}" alt="">
  {% endcase %}
{% endfor %}

{% schema %}
{
  "name": "Témoignages",
  "blocks": [
    {
      "type": "testimonial",
      "name": "Témoignage",
      "settings": [
        { "type": "text", "id": "text", "label": "Citation" }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" }
      ]
    }
  ],
  "max_blocks": 8
}
{% endschema %}

Le marchand ajoute les témoignages dans le Theme Editor, sans toucher au code.

5. Liquid : le langage de templates Shopify

Liquid est créé par Shopify, syntaxe inspirée de Jinja/Twig.

Variables et output

{{ product.title }}
{{ product.price | money }}
{{ 'collections/all' | url }}
{{ "Hello world" | upcase }}
{{ product.description | strip_html | truncate: 200 }}

Le | chaîne des filtres. Liquid en a une centaine.

Tags de contrôle

{% if product.available %}
  En stock
{% else %}
  Rupture de stock
{% endif %}

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

{% case product.type %}
  {% when 'shirt' %}
    Vêtement
  {% when 'shoes' %}
    Chaussure
  {% else %}
    Autre
{% endcase %}

{% assign discount = product.compare_at_price | minus: product.price %}

Filtres essentiels

money, money_with_currency, money_without_currency : formatage prix
image_url: width: X, image_tag : URLs et tags d’images optimisés
url, link_to : URLs et liens
escape, strip_html, truncate : sécurité et formatage
default : valeur par défaut si vide
t : traduction depuis les locales

Templates par défaut vs custom

Pour un même type (product), créer plusieurs templates :

templates/product.json : défaut
templates/product.featured.json : pour produits vedettes
templates/product.lookbook.json : pour mode/lifestyle

Le marchand assigne le template depuis la fiche produit dans l’admin.

6. Metafields pour données custom

Les metafields ajoutent des champs custom à n’importe quelle entité Shopify (produit, collection, client, commande).

Configuration

Settings → Custom data → Products → Add definition

Définir un metafield : type (text, number, date, list, file, json…), nom, namespace, conditions de validation.

Usage dans Liquid

{# Metafield défini : product.metafields.specs.materials = "coton bio" #}

<dl>
  <dt>Matériaux</dt>
  <dd>{{ product.metafields.specs.materials }}</dd>
</dl>

{# Metafield list_string #}
{% for ingredient in product.metafields.recipe.ingredients.value %}
  <li>{{ ingredient }}</li>
{% endfor %}

Cas d’usage typiques

Spécifications techniques produit (matériaux, dimensions, certifications)
Recettes pour produits alimentaires
Notice d’utilisation plus longue
Galerie de couleurs ou variantes complexes
Date de péremption ou garantie
Country of origin, certifications éthiques

Les metafields évitent d’inventer des structures bricolées dans la description ou les tags.

7. Personnalisations CSS et JS

CSS additionnel

Settings du thème → Theme settings → Custom CSS. Pour des ajustements légers :

.product-card { border-radius: 16px; }
.btn-primary { background: #f4691b; }
@media (max-width: 768px) {
  .header { padding: 0.5rem; }
}

Pour des personnalisations plus profondes : éditer directement les fichiers CSS dans assets/.

JavaScript custom

Ajouter dans assets/custom.js puis l’inclure dans layout/theme.liquid :

<script src="{{ 'custom.js' | asset_url }}" defer></script>

Pour des intégrations tierces (chat, analytics non couverts par les apps), ajouter le snippet dans le layout ou via un metafield JSON.

Attention performance

Chaque ajout JS/CSS pèse sur la performance. Mesurer avant et après avec Lighthouse. Privilégier les apps qui chargent à la demande, ou intégrer via le tag manager Google plutôt qu’en dur.

8. Performance et Core Web Vitals

Shopify expose un score « Online Store Speed » dans l’admin (basé sur Lighthouse).

Optimisations principales

Thème Online Store 2.0 récent
Images compressées et bien dimensionnées : utiliser image_url: width: X plutôt que charger une image 4000px sur une carte 400px
Lazy loading natif : loading="lazy" sur les images hors viewport
Réduire les apps : auditer régulièrement et désinstaller les inutilisées
Réduire les sections sur la home : trop de sections = trop de JS/CSS

Limites

Shopify ne permet pas tout : on ne contrôle pas le CDN, certains scripts Shopify sont incompressibles. Le score 100 est rarement atteignable. Cible réaliste : 70-85 mobile, 85-95 desktop.

Monitoring

Configurer Google Search Console + PageSpeed Insights API pour suivre les Core Web Vitals dans le temps. Voir SEO entreprise Afrique de l’Ouest.

9. Workflow Git pour thèmes

Pour les équipes qui personnalisent sérieusement un thème : intégration Git.

Shopify CLI

npm install -g @shopify/cli @shopify/theme

shopify theme dev --store=ma-boutique
# Modifier les fichiers en local, preview en direct

shopify theme push --unpublished --json
# Pousser sur Shopify dans un thème non publié

shopify theme pull
# Récupérer les modifications faites sur Shopify dans le thème

Workflow avec Git

git clone <thème>
git checkout -b feature/nouveau-design
# modifications
git commit
git push
# review en PR
# merge → CI déploie sur Shopify

Pour les boutiques sérieuses : un thème versionné dans Git, déploiement via CI/CD (GitHub Actions tutoriel) protège contre les modifications accidentelles via Theme Editor en production.

Theme Check

Linter officiel Shopify pour Liquid :

shopify theme check

Détecte les performances issues, accessibilité, conventions Liquid. À intégrer en CI.

10. FAQ

Dawn ou un thème payant pour démarrer ?

Dawn est suffisant pour la grande majorité des boutiques. Démarrer avec Dawn, basculer vers payant uniquement si besoin spécifique non couvert. Cela évite de payer pour des fonctionnalités qu’on n’utilisera pas.

Faut-il toujours dupliquer le thème avant modification ?

Oui pour les modifications de code. Pour des changements via Theme Editor : Shopify garde un historique récent (mais pas illimité), donc on peut souvent revenir en arrière.

Apps qui ralentissent le site, comment identifier ?

Lighthouse en mode mobile, onglet « Network ». Identifier les scripts externes qui chargent. Désinstaller les apps inutilisées (chaque app charge généralement du JS, même non utilisé).

Modifier un thème payant casse-t-il les mises à jour ?

Oui souvent. Les mises à jour du créateur écrasent les modifications custom. Pour préserver : noter les modifications, ré-appliquer après update, ou éviter de modifier le code et utiliser CSS additionnel + apps quand possible.

Multilangue : un thème par langue ou un thème global ?

Un thème global avec Shopify Markets. Les locales gèrent la traduction des textes UI, les metafields gèrent les descriptions traduites. Plus simple à maintenir qu’un thème par langue.

Comment ajouter une fonctionnalité non couverte par le thème ?

Trois options par ordre de complexité : (1) Chercher une app qui le fait ; (2) Ajouter une section/snippet custom dans le thème ; (3) Si vraiment custom : développer en Liquid + JS, ou via une app embedded.

Liquid est-il difficile à apprendre ?

Pour quelqu’un qui connaît HTML : facile. Pour un développeur : Liquid s’apprend en quelques jours. La doc Shopify est excellente, et la plupart des cas sont des variations de patterns connus.

Sommaire

1. Choisir un thème de base

Thèmes officiels gratuits

Thèmes payants

Critères de choix

2. Online Store 2.0 : architecture moderne

Structure d’un thème OS 2.0

3. Theme Editor : personnaliser sans code

Capacités

Limites

4. Sections et blocks

Anatomie d’une section

Blocks

5. Liquid : le langage de templates Shopify

Variables et output

Tags de contrôle

Filtres essentiels

Templates par défaut vs custom

6. Metafields pour données custom

Configuration

Usage dans Liquid

Cas d’usage typiques

7. Personnalisations CSS et JS

CSS additionnel

JavaScript custom

Attention performance

8. Performance et Core Web Vitals

Optimisations principales

Limites

Monitoring

9. Workflow Git pour thèmes

Shopify CLI

Workflow avec Git

Theme Check

10. FAQ

Dawn ou un thème payant pour démarrer ?

Faut-il toujours dupliquer le thème avant modification ?

Apps qui ralentissent le site, comment identifier ?

Modifier un thème payant casse-t-il les mises à jour ?

Multilangue : un thème par langue ou un thème global ?

Comment ajouter une fonctionnalité non couverte par le thème ?

Liquid est-il difficile à apprendre ?

Articles liés (cluster Shopify)

Confiez-nous la Création de Votre Site Web

Articles Similaires

Shopify SEO et performance : guide complet 2026

PrestaShop modules essentiels : guide pratique 2026

Gestion des retours e-commerce : politique et processus