01Premier choix
Natif Shopify
Moins de dépendances, meilleure intégration au thème et administration plus simple.
Quand la plateforme le permet
Développement Shopify · Liquid · EXPERAISE, Teo Comyn
Développement Shopify Liquid. Du sur-mesure qui reste propre.
Sections natives, logique métier et intégrations : EXPERAISE développe uniquement ce que votre boutique doit vraiment savoir faire, avec un code lisible par les équipes qui vivront avec.
- Sur devisAprès un appel de cadrage
- Shopify 2.0Sections, blocs et JSON templates
- 1 appelDe 30 minutes, offert
+60 marques accompagnées depuis 2019
01 · En bref
Un code natif, proportionné au besoin.
Liquid est le langage des thèmes Shopify. Le développement sur mesure ajoute à un thème une section, un composant ou une règle que ni le thème ni une application ne couvrent proprement. EXPERAISE les construit de façon native, lisible et documentée.
- Qui
- EXPERAISE, Teo ComynAgence web basée près d'Arras, qui travaille à distance partout en France.
- Quoi
- Sections, logique, intégrationsDéveloppement Liquid sur Shopify : thème, composants, métachamps, extensions et API, au plus simple.
- Combien
- Sur devisAucun tarif fixe : le prix dépend du périmètre. Il est chiffré après l'atelier de cadrage.
- Comment
- Un atelier, puis du code natifOn part du besoin, on choisit le point d'extension Shopify le plus simple, on construit et on documente.
02 · Le choix technique
Natif, app, Function ou headless ?
La meilleure architecture n'est pas la plus impressionnante. C'est celle que votre équipe peut exploiter, mesurer et faire évoluer.
02Accélérateur
Application
Une app est pertinente si elle est stable, proportionnée et moins risquée qu'un développement dédié.
Quand acheter est plus rationnel
03Logique serveur
Functions et extensions
Promotions, validations et extensions s'appuient sur les points d'extension officiels de Shopify.
Quand les règles dépassent le thème
04Architecture découplée
Hydrogen et API
Réservé aux organisations dont les besoins, l'équipe et la roadmap compensent la complexité supplémentaire.
Quand le headless est justifié
03 · Capacités techniques
Du thème à la logique métier.
Chaque développement répond à un usage clair et s'intègre à la roadmap de la boutique sans multiplier les dépendances.
01
Sections et composants Liquid
Des modules natifs et réutilisables, conçus pour que le marketing puisse modifier le contenu sans casser l'expérience.
- Sections
- Snippets
- JSON templates
- App blocks
02
Metaobjects et métachamps
Une modélisation propre des contenus, guides, tableaux et éléments récurrents : l'équipe les modifie sans toucher au code.
- Metaobjects
- Metafields
- Contenu dynamique
- Merchandising
03
Logique panier, promotions et extensions
Seuils, remises et cadeaux rendus compréhensibles dans le panier ; Functions et extensions Shopify quand la règle dépasse le thème.
- Cart drawer en Liquid
- Shopify Functions et Checkout UI, selon le besoin
- Validations
- Logique panier
04
API et intégrations proportionnées
Connexion aux outils utiles de votre stack, avec une attention particulière portée aux erreurs, aux dépendances et à la maintenance.
- Storefront API
- Admin API
- Webhooks
- CRM et ERP
04 · Du vrai code
Du code réel, pas une maquette.
Trois extraits publics : la section qui affiche cette page, son schéma côté éditeur, et la sortie d'un composant livré pour un client.
01 · Section Shopify 2.0
Le code de la page que vous lisez.
Cette page est affichée par une section Liquid d'EXPERAISE. Elle boucle sur des blocs, injecte des images responsives et laisse l'éditeur de thème repérer chaque bloc : le marketing modifie le contenu sans toucher au code.
Voici l'extrait qui affiche la galerie de captures plus bas dans la page.
- Une boucle sur les blocs, filtrés par type
- Images responsives avec image_url et image_tag
- shopify_attributes pour l'éditeur de thème
- Aucune application nécessaire
<div class="sp-gal"> {%- for b in shots -%} <figure class="sp-gal__f{% if b.settings.size == 'wide' %} sp-gal__f--wide{% endif %} sv-rv" {{ b.shopify_attributes }}> <div class="sv-frame sv-frame--flat"> <div class="sv-frame__bar" aria-hidden="true"><i></i><i></i><i></i><span>{{ b.settings.label | escape }}</span></div> {{ b.settings.image | image_url: width: 1200 | image_tag: loading: 'lazy', widths: '480, 720, 1000, 1200', sizes: '(min-width: 1100px) 38vw, (min-width: 700px) 46vw, 92vw', class: 'sv-frame__img', alt: b.settings.alt }} </div> {%- if b.settings.caption != blank -%}<figcaption class="sp-gal__cap">{{ b.settings.caption | escape }}</figcaption>{%- endif -%} </figure> {%- endfor -%}02 · Le schéma, côté éditeur
Ce que l'équipe édite, sans toucher au Liquid.
Chaque réglage déclaré dans le schéma devient un champ de l'éditeur de thème : une image, un texte, un choix. L'équipe remplit, le code reste intact.
Voici le bloc « capture de la galerie », tel qu'il est déclaré.
- Types de réglages natifs : image, texte, choix
- Blocs répétables et réordonnables
- Libellés lisibles pour l'équipe
- Une valeur par défaut pour chaque choix
{ "type": "shot", "name": "Capture de la galerie", "settings": [ { "type": "image_picker", "id": "image", "label": "Capture (16:10)" }, { "type": "text", "id": "label", "label": "Étiquette dans la barre" }, { "type": "text", "id": "alt", "label": "Texte alternatif" }, { "type": "text", "id": "caption", "label": "Légende" }, { "type": "select", "id": "size", "label": "Taille", "default": "normal", "options": [{ "value": "normal", "label": "Normale" }, { "value": "wide", "label": "Grande (2 colonnes, 2 lignes)" }] } ]}03 · Composant livré pour un client
Un composant hreflang piloté par métachamps.
Pour Nutripure, EXPERAISE a livré un composant hreflang piloté par des métachamps Shopify : les correspondances entre les versions du produit sont renseignées une à une, et aucun lien alternate n'est généré sans équivalent renseigné.
Voici la sortie réelle dans le code de deux fiches produit : une fiche disponible en trois langues, une fiche sans équivalent italien.
- Correspondances pilotées par métachamps
- Aucun alternate généré sans équivalent renseigné
- Guide d'administration pour maintenir les correspondances
- Chargement différé de Contentsquare, livré avec le thème
<!-- /products/collagen-bar --><link rel="alternate" hreflang="en" href="https://www.nutripure.com/products/collagen-bar"><link rel="alternate" hreflang="es" href="https://www.nutripure.com/es-es/products/barrita-colageno"><link rel="alternate" hreflang="it" href="https://www.nutripure.com/it-it/products/barrette-collagene"><link rel="alternate" hreflang="x-default" href="https://www.nutripure.com/products/collagen-bar"><!-- /products/carnipure-carnitine --><link rel="alternate" hreflang="en" href="https://www.nutripure.com/products/carnipure-carnitine"><link rel="alternate" hreflang="es" href="https://www.nutripure.com/es-es/products/carnitina"><link rel="alternate" hreflang="x-default" href="https://www.nutripure.com/products/carnipure-carnitine">05 · Le panier
Un panier en Liquid, lu de près.
Le panier de Maison Jearom, livré en Liquid avec sa barre de progression : cinq éléments, visibles sur la capture.
- 1
La barre de progression
Elle indique ce qu'il reste à ajouter pour la livraison offerte en point relais.
- 2
Le produit, sa quantité
La quantité se modifie et le produit se retire sans quitter la page.
- 3
Le code promo, replié
Le champ du code promo reste caché tant qu'on n'en a pas besoin.
- 4
Le sous-total et la commande
Le total et le bouton pour finaliser sont toujours visibles en bas du tiroir.
- 5
La réassurance
Le stock, le délai d'expédition annoncé par la marque et les moyens de paiement.
Capture de maisonjearom.com du 22 octobre 2026, avec un produit ajouté au panier en visiteur anonyme (aucune commande). Les visuels et les textes appartiennent à Maison Jearom. Étude de cas : le cart drawer et la barre de progression ont été livrés en Liquid.
06 · Le résultat
Des boutiques où le sur-mesure se voit à peine.
Six pages de boutiques accompagnées par EXPERAISE : le code disparaît derrière l'expérience.
Captures du 22 octobre 2026. La part d'EXPERAISE dans chaque boutique est décrite dans son étude de cas : tout le code de ces pages n'est pas le nôtre. Les visuels et les textes appartiennent aux marques.
07 · Le travail réel
Ce que le Liquid a livré, projet par projet.
Six études de cas : ce qui a été développé, tel que décrit dans chaque dossier, sans chiffre de ventes que nous ne pouvons pas sourcer.
LiquidShopify GrowthSoins capillaires premium
Maison Jearom
Un panier repris en Liquid et des composants dédiés à l'écrin et aux recharges, livrés par lots contrôlés sur le thème publié.
- Cart drawer et barre de progression livrés en Liquid
- Composants Liquid dédiés à l'écrin et aux recharges
- Sauvegarde avant modification, test mobile et relecture distante après déploiement
Étude de cas, baseline du 27 août 2026. Aucun gain attribué.
Lire l'étude de cas
Sur mesureShopify 2.0Tapis et mobilier de luxe
Sybille de Tavernost
Un thème Shopify 2.0 sur mesure, avec des sections Liquid dédiées, pensé pour la performance mobile et un SEO technique solide dès le lancement.
- Thème Shopify 2.0 custom
- Sections Liquid sur mesure
- Formation de l'équipe interne
Étude de cas EXPERAISE. Résultats qualitatifs, aucun chiffre publié.
Lire l'étude de cas
SEO techniqueShopify MarketsNutrition sportive
Nutripure
Quatre briques SEO livrées dans le thème : gestion hreflang, BreadcrumbList, FAQPage et robots.txt, avec un chargement différé de Contentsquare.
- Composant hreflang basé sur des métachamps Shopify
- BreadcrumbList et FAQPage en JSON-LD
- Balises Hn de 129 à 68 sur les produits et de 64 à 8 sur les collections, dans le contrôle documenté
Étude de cas, mission SEO 2026. Livrables, pas un uplift attribué.
Lire l'étude de cas
MétachampsShopifyCosmétique bio
On The Wild Side
Des fiches produit retravaillées, avec un rituel complémentaire proposé sous les bénéfices et piloté par un champ personnalisé.
- Rituel associé piloté par métachamp
- Cross-sell « Complétez votre routine »
- Fiches produit et parcours mobile retravaillés
Étude de cas EXPERAISE. Aucun résultat chiffré annoncé.
Lire l'étude de cas
PerformanceShopify PlusMode et sneakers
Second Step
Un thème custom Shopify 2.0, des assets optimisés et des redirections 301 complètes, pour une boutique plus rapide qui préserve ses URL.
- Thème Shopify 2.0 sur mesure
- Assets compressés et lazy loading
- Redirections 301 complètes
Étude de cas EXPERAISE. Résultats qualitatifs, aucun chiffre publié.
Lire l'étude de cas
Refonte 2.0Shopify PlusMaison et linge
Le Monde Sauvage
Une refonte complète en Shopify 2.0 d'une boutique au catalogue large, avec des templates de listing scalables et la préservation du SEO existant.
- Refonte Shopify 2.0 complète
- Templates de listing scalables
- Redirections 301 et performance mobile
Étude de cas EXPERAISE. Résultats qualitatifs, aucun chiffre publié.
Lire l'étude de casAperçu de projets accompagnés par EXPERAISE. Le périmètre est précisé pour chaque projet ; aucun résultat n'est garanti.
08 · Quality gate
Livrer du code que l'on peut reprendre.
La qualité ne repose pas sur une promesse abstraite : elle se vérifie dans la structure, les tests, la documentation et la transmission.
Liquid et HTML
Structure valide, composants réutilisables et logique lisible.
Responsive
Parcours critiques contrôlés du mobile au grand écran.
Accessibilité
Sémantique, focus, clavier, contrastes et mouvement réduit.
Performance
Poids, chargement, scripts et images vérifiés avant livraison.
Non-régression
Templates et fonctions critiques testés sur le périmètre défini.
Transmission
Paramètres, limites et consignes documentés pour votre équipe.
Optimisation de la vitesse Shopify Headless et Hydrogen API et intégrations Shopify Thème Shopify sur mesure
Ces contrôles décrivent la méthode d'EXPERAISE avant livraison. Ils portent sur le périmètre défini au devis.
09 · Parcours
Du besoin à la documentation.
Cinq étapes. Les délais dépendent du périmètre : ils sont précisés après l'atelier fonctionnel et l'audit du thème, jamais avant.
-
Besoin fonctionnel
Règles, équipe, données, volumétrie : le besoin est écrit avant la première ligne de code.
Sortie : un périmètre écrit
-
Architecture proportionnée
Le plus natif possible. Le sur-mesure seulement là où il crée de la valeur.
Sortie : le choix natif, app, Function ou headless
-
Build Liquid natif
Sections, snippets, templates et blocs : un code lisible par les équipes qui vivront avec.
Sortie : un thème administrable
-
QA critique
Parcours critiques, responsive, accessibilité, performance : contrôlés avant la mise en ligne.
Sortie : la liste de contrôle
-
Delivery documentée
Paramètres, limites et consignes : documentés pour votre équipe.
Sortie : une transmission
10 · Après la mise en ligne
Un thème vivant, sans dette invisible.
Correctifs, évolutions et surveillance des intégrations peuvent continuer au ticket ou dans une roadmap régulière.
Livrer
Recette et documentation
- Recette
- Mise en production
- Documentation pour votre équipe
Observer
Observer, puis prioriser
- Erreurs, usages, performance et retours de l'équipe
- Correctifs utiles avant nouvelles fonctionnalités
Faire évoluer
Des itérations compatibles
- Évolutions compatibles avec le système existant
- Au ticket ou dans une roadmap régulière
11 · Mobile first
Du Liquid pensé pour le mobile.
Dix écrans de boutiques accompagnées, vus sur téléphone : le code reste invisible, l'expérience reste fluide.
Boutiques accompagnées par EXPERAISE, vues sur téléphone.
-
Maison Jearom : fiche rituel
-
Maison Jearom : fiche shampoing
-
Maison Jearom : l'écrin
-
Sybille de Tavernost : fiche produit
-
Sybille de Tavernost : personnalisation
-
On The Wild Side : fiche produit
-
On The Wild Side : routine
-
On The Wild Side : rituels
-
Maison Jearom : rituels
-
Sybille de Tavernost : collection
12 · Pour qui
Pour qui développer en Liquid ?
Équipe marketing, logique métier précise ou projet multi-marchés : le besoin change, la méthode reste la même.
13 · Tarif
Sur devis, après un atelier de cadrage.
Développement Liquid
Sur devis
Le prix dépend du périmètre : une section isolée et un module connecté à plusieurs systèmes n'impliquent pas la même charge.
- Appel de cadrage de 30 minutes, offert
- Un atelier fonctionnel : le besoin, les règles, les contraintes
- Le choix de l'architecture : natif, app, Function ou headless
- Développement, recette et documentation
- Une proposition chiffrée à la suite de l'atelier
- Appel offert
- Périmètre clarifié avant devis
- Architecture proportionnée
Délais, compatibilité avec votre thème, propriété du code et maintenance sont précisés dans la proposition.
Et pour aller plus loin
Avancer chaque mois
Growth Partner : site, marque et acquisition, dès 790 € HT par mois, sans engagement.
Une boutique à refaire ?
Refonte Shopify : reconstruire l'expérience sans perdre l'acquis.
Une boutique à créer ?
Création de site Shopify : de la marque à la mise en ligne.
14 · Questions
Avant d'ouvrir le chantier.
Une question technique ?
Écrivez sur WhatsApp ou réservez un appel de 30 minutes, offert.
Faut-il privilégier Liquid ou React pour une boutique Shopify ?
Pour un thème Online Store classique, Liquid reste la voie native et généralement la plus simple à exploiter. React et Hydrogen deviennent pertinents pour une architecture headless réellement justifiée par le produit, l'organisation et la roadmap. Voir la page headless et Hydrogen.
Quel délai prévoir pour un développement Liquid sur mesure ?
Une section isolée et un module connecté à plusieurs systèmes n'impliquent pas la même charge. Le délai est défini après l'atelier fonctionnel, l'audit du thème et l'identification des tests nécessaires. Aucun délai n'est annoncé avant.
Le développement sera-t-il compatible avec mon thème Shopify ?
Le thème, sa version et ses personnalisations sont vérifiés avant le développement, y compris lorsqu'il a été écrit par quelqu'un d'autre. Les patterns Shopify 2.0 facilitent l'intégration, mais un thème ancien ou fortement modifié peut demander une remise à niveau ciblée. Les modalités de propriété du code et de maintenance sont précisées dans la proposition.
Proposez-vous la maintenance après la livraison ?
Oui. Les correctifs, évolutions et contrôles d'intégrations peuvent être traités au ticket ou dans une roadmap régulière, selon le rythme de votre équipe et la criticité du périmètre.
Quand faut-il remplacer une application par du Liquid natif ?
Lorsque l'application ajoute surtout du poids, limite l'expérience ou facture une fonction simple que le thème peut gérer proprement. Nous comparons toujours coût, risque, maintenance et autonomie avant de recommander un remplacement.
Peut-on voir du code que vous avez écrit ?
Oui. Cette page est affichée par une section Liquid d'EXPERAISE dont des extraits figurent plus haut, et la sortie d'un composant livré pour Nutripure y est montrée telle qu'elle apparaît dans le code. Les études de cas décrivent ce qui a été développé pour chaque boutique.
Autres études de cas
Les projets derrière ces extraits.
Chaque étude de cas décrit ce qui a été fait, sans chiffre de ventes que nous ne pouvons pas sourcer.
Construisons la solution la plus simple qui fonctionne.
Décrivez le contexte, le comportement attendu et les contraintes : nous proposerons un périmètre et une architecture durable.