Custom code Shopify : Comment ajouter du code personnalisé ?

Custom code Shopify : comment ajouter du code personnalisé à une boutique Shopify sans modifier inutilement son thème ni provoquer de problème après une mise à jour ? Shopify permet aujourd’hui de personnaliser une boutique de plusieurs façons : Custom Liquid, HTML, CSS personnalisé, JavaScript, snippets, édition directe du code du thème ou applications. Le choix de la bonne méthode dépend surtout de ce que vous souhaitez modifier et de votre niveau technique.

Contrairement à ce que certains tutoriels anglophones peuvent laisser penser, il n’est pas toujours nécessaire d’ouvrir le code du thème pour ajouter quelques lignes. Le Theme Editor propose déjà plusieurs possibilités, tandis que les applications Shopify peuvent prendre en charge certaines fonctionnalités sans modification directe des fichiers.

Voici donc les principales méthodes pour ajouter du custom code Shopify, de la plus simple à la plus avancée.

Custom code Shopify : quelles sont les possibilités ?

Le code d’un thème Shopify repose principalement sur Liquid, HTML, CSS, JavaScript et JSON. Liquid est le langage de template utilisé par Shopify pour générer du contenu dynamique à partir des données de la boutique. Les fichiers du thème sont organisés notamment dans les dossiers sections, snippets, templates, assets et layout.

Selon votre besoin, vous pouvez donc :

• ajouter du HTML ou du Liquid avec Custom Liquid ;
• modifier l’apparence avec le Custom CSS ;
• créer une section Shopify personnalisée ;
• modifier directement les fichiers du thème ;
• créer un snippet Liquid réutilisable ;
• installer une application Shopify ;
• utiliser un app block ou un app embed ;
• ajouter du JavaScript pour créer une interaction personnalisée.

Le meilleur choix n’est pas nécessairement celui qui demande le plus de code. Il s’agit plutôt de celui qui répond au besoin avec le moins de modifications possibles.

Custom Liquid / HTML : la méthode la plus simple

Pour ajouter rapidement du HTML ou du Liquid dans Shopify, la première solution à regarder est la section Custom Liquid disponible dans de nombreux thèmes modernes.

Depuis l’éditeur de thème, vous pouvez sélectionner la page concernée, cliquer sur Ajouter une section, puis choisir Custom Liquid lorsqu’elle est proposée.

Vous pouvez ensuite insérer votre code.

Par exemple :

<div class="message-personnalise">
  <h2>Livraison offerte</h2>
  <p>Profitez de la livraison gratuite dès 50 € d'achat.</p>
</div>

Cette méthode est particulièrement intéressante pour ajouter un petit bloc promotionnel, une information complémentaire, un badge, un élément HTML ou du Liquid dynamique.

La section Custom Liquid permet d’éviter d’aller directement modifier les fichiers du thème pour une petite personnalisation. Des ressources techniques récentes montrent également qu’elle peut être utilisée pour intégrer des éléments HTML, du Liquid ou certains scripts selon le besoin et le thème utilisé.

Et si je veux une vraie section Shopify personnalisée ?

Lorsque le bloc doit être plus complet, réutilisable et configurable depuis l’éditeur de thème, il est préférable de créer une section personnalisée Shopify avec son fichier Liquid et son {% schema %}.

C’est notamment utile si vous souhaitez donner au marchand la possibilité de modifier le titre, les images, les couleurs, les boutons ou d’autres paramètres directement depuis le Theme Editor.

J’ai justement consacré un tutoriel complet à cette technique :

Créer une section personnalisée Shopify avec Liquid et schema

Cette approche est plus structurée qu’un simple bloc Custom Liquid et convient particulièrement aux développements Shopify sur mesure.

Global Custom CSS : ajouter du CSS à toute la boutique

Si votre objectif est uniquement de modifier l’apparence de votre boutique, le Custom CSS Shopify peut être suffisant.

Shopify propose un champ Custom CSS dans les paramètres du thème. Il permet d’ajouter des règles CSS qui s’appliquent à l’ensemble de la boutique, à l’exception de la page de checkout. Il est également possible d’ajouter du CSS au niveau d’une section pour cibler uniquement cette partie de la page.

Par exemple :

.button {
  border-radius: 30px;
  font-weight: 600;
}

Pour ajouter un Global Custom CSS, le chemin indiqué par Shopify est généralement :

Boutique en ligne → Thèmes → Modifier le thème → Paramètres du thème → Custom CSS

Vous pouvez alors saisir vos règles CSS puis enregistrer.

Cette solution est très pratique pour modifier rapidement :

• les boutons ;
• les couleurs ;
• les marges et espacements ;
• les tailles de texte ;
• les bordures ;
• certains éléments responsive ;
• l’apparence de certaines sections.

Quelles sont les limites du Custom CSS Shopify ?

Le Custom CSS n’est pas un éditeur CSS totalement libre.

Shopify indique notamment une limite de 1 500 caractères pour le CSS global et de 500 caractères pour le CSS appliqué à une section. Certaines règles CSS, comme @import, ne sont pas autorisées dans ce contexte. Le Custom CSS ne s’applique pas non plus au checkout.

Pour une modification importante ou une architecture CSS plus complexe, l’édition des fichiers du thème peut donc devenir nécessaire.

Direct Code Editing : modifier directement le code Shopify

Lorsque les possibilités de l’éditeur de thème ne suffisent plus, Shopify permet de modifier directement le code du thème.

Vous pouvez accéder à cette interface depuis :

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

Le code editor Shopify affiche les différents fichiers du thème et permet notamment de modifier ou créer des fichiers Liquid, CSS, JavaScript ou autres fichiers pris en charge par l’architecture du thème.

Vous pouvez par exemple retrouver des fichiers comme :

layout/
  theme.liquid

sections/
  main-product.liquid

snippets/
  card-product.liquid

assets/
  base.css
  global.js

templates/
  product.json

L’architecture exacte dépend évidemment du thème utilisé.

Modifier theme.liquid

Le fichier theme.liquid est particulièrement important puisqu’il constitue le layout principal de nombreux thèmes.

On peut y retrouver la structure globale du document HTML ainsi que les appels nécessaires au chargement du thème.

Une modification à cet endroit peut donc avoir des conséquences sur l’ensemble de la boutique.

C’est pourquoi il faut éviter de considérer theme.liquid comme un simple endroit où coller n’importe quel code trouvé sur Internet.

Pour un petit code qui doit uniquement apparaître sur une page donnée, une section ou un snippet peut être beaucoup plus approprié.

Attention aux mises à jour du thème Shopify

L’édition directe du code est puissante, mais elle demande davantage de précautions.

Shopify recommande de dupliquer le thème avant de modifier son code, afin de disposer d’une copie de sauvegarde. Shopify précise également que des modifications incompatibles avec une mise à jour peuvent ne pas être conservées dans la nouvelle copie du thème.

Il faut donc éviter de considérer une modification directe comme totalement indépendante des futures évolutions du thème.

Avant de modifier un fichier important :

1. dupliquez le thème ;
2. identifiez précisément le fichier concerné ;
3. notez les modifications effectuées ;
4. testez le résultat sur la copie ;
5. vérifiez le rendu sur ordinateur et mobile ;
6. publiez seulement après validation.

L’éditeur Shopify dispose également de Theme Check, qui peut signaler certaines erreurs pendant l’édition du code.

Les snippets Shopify : réutiliser du code Liquid

Un snippet Shopify est un morceau de code Liquid réutilisable.

Les snippets sont stockés dans le dossier :

snippets/

Ils sont particulièrement utiles lorsqu’un même élément doit être utilisé à plusieurs endroits dans un thème.

Shopify décrit les snippets comme des morceaux réutilisables de code Liquid pouvant être rendus à différents endroits du thème. Contrairement aux sections, ils ne sont pas directement visibles comme des éléments que le marchand peut ajouter depuis le Theme Editor.

Imaginons que vous créez :

snippets/message-livraison.liquid

Vous pouvez y placer :

<div class="message-livraison">
  Livraison offerte dès 50 €.
</div>

Puis appeler ce snippet depuis un autre fichier Liquid :

{% render 'message-livraison' %}

Cette organisation évite de copier plusieurs fois le même code.

Si vous devez modifier le message plus tard, vous pouvez modifier le snippet plutôt que rechercher toutes les occurrences du code dans le thème.

Snippet ou section Shopify : quelle différence ?

La distinction est importante.

Une section est destinée à constituer un module visible et configurable dans l’éditeur de thème.

Un snippet est plutôt un morceau de code réutilisable appelé depuis d’autres fichiers Liquid.

Par exemple, une section peut contenir une présentation complète avec titre, image, bouton et plusieurs réglages.

Un snippet peut être utilisé pour centraliser un petit composant comme :

badge.liquid
price.liquid
icon.liquid
product-card.liquid
message.liquid

L’architecture officielle de Shopify sépare justement ces différents composants : sections, blocs et snippets ont chacun un rôle spécifique.

Ajouter du custom code Shopify avec une application

Une autre possibilité consiste à utiliser une application Shopify.

Cette solution est particulièrement intéressante lorsque la fonctionnalité recherchée existe déjà sous forme d’application.

Par exemple, vous pouvez utiliser une app pour ajouter :

• des avis clients ;
• des badges ;
• un système de recherche avancée ;
• des fonctionnalités marketing ;
• des pop-ups ;
• des fonctionnalités de conversion ;
• des intégrations externes ;
• certains widgets ;
• du tracking ou de l’analytics.

Shopify permet aux applications de s’intégrer au thème notamment grâce aux app blocks et aux app embeds. Certaines applications peuvent également injecter du code dans le thème.

App block ou app embed ?

Un app block permet de placer une fonctionnalité d’application à un emplacement précis d’une section compatible.

Vous pouvez par exemple avoir un bloc d’avis sous la description d’un produit.

Un app embed fonctionne différemment. Il peut ajouter une fonctionnalité globale, comme une bulle de chat, un élément flottant ou un script de tracking, sans occuper nécessairement une position dans la structure visuelle de la page.

Shopify précise également que les extensions de thème permettent aux applications d’ajouter des fonctionnalités sans demander au marchand de modifier directement les fichiers Liquid du thème.

Pour un commerçant qui ne souhaite pas toucher au code, une application peut donc être une solution beaucoup plus accessible.

Faut-il utiliser une app ou du code personnalisé Shopify ?

Cela dépend de votre besoin.

Si la fonctionnalité est complexe et existe déjà dans une application fiable, l’installation d’une app peut être pertinente.

Si vous avez besoin d’une petite modification très spécifique, quelques lignes de Liquid, CSS ou JavaScript peuvent être plus adaptées.

Il faut également prendre en compte les conséquences d’une application supplémentaire : abonnement éventuel, fonctionnalités inutilisées, scripts chargés sur la boutique, dépendance à un fournisseur externe et maintenance.

À l’inverse, développer une fonctionnalité sur mesure demande davantage de compétences techniques et de maintenance.

Le bon choix dépend donc de la fonctionnalité recherchée, du thème, du niveau de personnalisation et des contraintes de la boutique.

Comment ajouter du JavaScript personnalisé sur Shopify ?

Le JavaScript permet d’ajouter de l’interactivité à votre boutique.

Vous pouvez notamment l’utiliser pour créer :

• un accordéon ;
• une animation ;
• un slider ;
• une interaction personnalisée ;
• un comportement particulier sur le panier ;
• une validation côté navigateur ;
• un composant dynamique.

Pour une modification importante, il est préférable de placer le JavaScript dans un fichier adapté du dossier assets plutôt que de multiplier les scripts directement dans les templates.

L’architecture Shopify prévoit justement un dossier assets pour les ressources du thème, notamment les fichiers CSS et JavaScript.

Pour une petite interaction très localisée, une section personnalisée peut toutefois suffire.

L’objectif est surtout d’éviter de charger inutilement un gros script sur toutes les pages lorsque la fonctionnalité ne concerne qu’une seule partie de la boutique.

Comment choisir la bonne méthode pour ajouter du code Shopify ?

Voici une règle simple.

Vous voulez ajouter un petit bloc HTML ou Liquid ?
→ Utilisez Custom Liquid.

Vous voulez créer un module configurable depuis l’éditeur ?
→ Créez une section personnalisée Shopify.

Vous voulez modifier uniquement l’apparence ?
→ Commencez par le Custom CSS.

Vous devez réutiliser un morceau de Liquid à plusieurs endroits ?
→ Créez un snippet.

Vous devez modifier profondément le fonctionnement du thème ?
→ Utilisez le code editor.

La fonctionnalité existe déjà dans une application ?
→ Étudiez les apps Shopify, notamment les app blocks et app embeds.

Vous devez créer une interaction avancée ?
→ Envisagez du JavaScript personnalisé dans l’architecture du thème.

Cette approche permet d’éviter une erreur fréquente : utiliser l’édition directe du thème alors qu’une solution beaucoup plus simple existe déjà dans Shopify.

Comment ajouter du custom code Shopify sans casser sa boutique ?

La première précaution consiste à dupliquer le thème avant toute modification importante. Shopify recommande explicitement cette étape avant l’édition du code.

Ensuite, testez chaque modification séparément.

Évitez également de coller un code dont vous ne connaissez pas la fonction. Un extrait Liquid, CSS ou JavaScript peut dépendre d’un thème particulier ou d’une structure HTML précise.

Il est aussi préférable de limiter les modifications globales. Si un code concerne uniquement la fiche produit, inutile de le charger sur toutes les pages si vous pouvez le limiter à cet emplacement.

Enfin, vérifiez systématiquement :

• la page d’accueil ;
• les fiches produits ;
• les collections ;
• le panier ;
• la navigation ;
• le mobile ;
• les principaux navigateurs ;
• les performances de chargement.

Une personnalisation réussie n’est pas simplement une modification qui « fonctionne ». Elle doit également rester maintenable.

Custom code Shopify : quelle solution pour votre projet ?

Le custom code Shopify offre beaucoup plus de possibilités qu’une simple modification esthétique.

Avec Liquid, HTML, CSS et JavaScript, vous pouvez adapter une boutique à une identité visuelle particulière, créer des sections personnalisées, ajouter des composants spécifiques et améliorer l’expérience utilisateur.

Mais toutes les personnalisations ne nécessitent pas le même niveau de développement.

Pour une petite modification, Custom Liquid ou Custom CSS peut suffire. Pour une fonctionnalité réutilisable, une section ou un snippet est souvent plus propre. Pour une fonctionnalité déjà disponible, une application peut être plus rapide. Et pour un développement réellement sur mesure, l’édition du code du thème ou le développement Shopify personnalisé devient pertinent.

Si votre boutique nécessite une personnalisation avancée, une nouvelle section, une refonte du thème ou une fonctionnalité Shopify spécifique, vous pouvez également découvrir mes services de développement web.

L’objectif est de construire une solution adaptée à votre boutique plutôt que d’empiler des modifications difficiles à maintenir.

FAQ sur le custom code Shopify

Peut-on ajouter du code personnalisé sur Shopify ?

Oui. Shopify permet d’ajouter du code personnalisé avec Custom Liquid, Custom CSS, snippets, fichiers du thème, JavaScript ou applications selon le besoin. Les thèmes Shopify utilisent notamment Liquid, HTML, CSS, JSON et JavaScript.

Où mettre du code HTML dans Shopify ?

Pour un petit bloc, la section Custom Liquid de l’éditeur de thème est généralement la solution la plus simple. Pour une structure réutilisable et configurable, vous pouvez créer une section personnalisée.

Comment modifier le code d’un thème Shopify ?

Dans l’administration Shopify, rendez-vous dans Boutique en ligne → Thèmes → … → Modifier le code. Vous pourrez alors accéder aux différents fichiers du thème. Shopify recommande de dupliquer le thème avant toute modification importante.

Qu’est-ce qu’un snippet Shopify ?

Un snippet est un morceau de code Liquid réutilisable. Il est enregistré dans le dossier snippets puis appelé depuis les autres fichiers du thème avec la syntaxe render.

Quelle différence entre Custom Liquid et Liquid dans le code du thème ?

Custom Liquid permet d’ajouter rapidement du code depuis l’éditeur de thème, sans modifier directement un fichier. L’édition directe permet quant à elle de contrôler précisément l’architecture et le comportement du thème.

Le Custom CSS Shopify est-il global ?

Le Custom CSS ajouté dans les paramètres du thème peut s’appliquer à l’ensemble de la boutique, à l’exception du checkout. Shopify permet également d’ajouter du CSS au niveau d’une section.

Une application Shopify peut-elle ajouter du code ?

Oui. Une application peut notamment utiliser des app blocks ou des app embeds pour intégrer ses fonctionnalités au thème. Certaines applications peuvent également injecter du code directement dans le thème.

Faut-il savoir coder pour personnaliser Shopify ?

Pas nécessairement. L’éditeur de thème permet déjà de nombreuses personnalisations sans code. En revanche, pour modifier Liquid, JavaScript, créer des sections personnalisées ou intervenir directement dans les fichiers du thème, des connaissances techniques sont fortement recommandées.

Le code personnalisé Shopify disparaît-il lors d’une mise à jour ?

Certaines modifications manuelles peuvent ne pas être conservées dans une nouvelle copie du thème lors d’une mise à jour. Shopify recommande donc de travailler avec une copie du thème et de suivre les personnalisations effectuées.

Peut-on ajouter du code personnalisé sans installer d’application ?

Oui. Custom Liquid, Custom CSS, snippets et édition directe du thème permettent d’ajouter de nombreuses personnalisations sans installer d’application.