Näak, nutrition et hydratation ultra-trail

Développement du thème Shopify Plus sur-mesure · Theme custom Shopify Plus + Cart Transform

Contexte

Näak avait un thème acheté, pas pensé pour une marque vendue sur plusieurs continents et partenaire de l’UTMB® World Series. Le client est venu me chercher directement pour reprendre le thème ; j’ai recommandé Substance pour la direction artistique, le développement restant sur un seul développeur pendant que l’équipe Näak gère le contenu et le Shopify au quotidien.

Le chantier a dépassé le thème : revoir la stratégie produit avec l’équipe (arrêt de la vente à l’unité, hausse du panier moyen, mise en place des abonnements), reconstruire un thème Shopify Plus sur-mesure, puis migrer le marché Europe vers l’Amérique du Nord avec des scripts dédiés (produits, images, thème, metafields, metaobjects).

Cinq marchés sont actifs aujourd’hui, avec une couverture mondiale visée pour septembre 2026. Résultat après refonte : LCP amélioré de 38 % (1 632 ms), INP amélioré de 15 % (88 ms).

Objectifs & livrables

Refonte de la stratégie produit

Arrêt de la vente à l’unité, paliers de quantité pour augmenter le panier moyen, mise en place des abonnements.

Panier natif unifié

Un seul bus d’événements pour le drawer, la page panier et la bulle du header, sans re-render complet.

Paliers cadeaux natifs

Cart Transform et configuration de rewards pour offrir des produits selon le seuil du panier, sans app tierce.

Déploiement multi-marchés

Migration Europe vers Amérique du Nord (produits, images, thème, metafields, metaobjects), 5 marchés actifs, objectif mondial en 2026.

Paliers cadeaux

Rewards & Cart Transform

Barre de progression, ajout et retrait automatiques des cadeaux selon le seuil, mémorisation en session si le client retire un cadeau.

Marketing

Funnels & attribution

Pages funnel qui ajoutent plusieurs variantes d’un coup, avec un attribut de commande qui survit à l’éclatement des abonnements au checkout.

Fiche produit

PDP orientée conversion

Paliers de quantité, toggle abonnement avec remise affichée, sélecteur de saveur/format, bloc « souvent acheté avec ».

Panier

Drawer piloté par un seul bus d’événements

Ajax Cart API et Section Rendering API : seules les zones modifiées (lignes, résumé, upsell) sont patchées, sans recharger la page.

Sous le capot

Le thème repose sur un bus d’événements unique pour le panier (cart:updated, boilerplate:cart-drawer:open / close), avec l’Ajax Cart API et la Section Rendering API pour patcher le drawer sans recharger la page. Trois notions de « bundle » coexistent : abonnements Loop, bundles natifs Shopify pour l’affichage, et packs funnel/VSL qui ajoutent plusieurs variantes d’un coup pour l’attribution marketing.

Cart TransformRewards

01 / 05

Cart Transform : paliers cadeaux

Problème

Offrir un cadeau à partir d’un seuil de panier, sans le réafficher en boucle si le client vient de le retirer volontairement, et sans fausser le calcul du seuil avec les lignes de cadeaux elles-mêmes.

Approche

Une configuration de blocs « reward_tier » dans l’éditeur (seuil, variante, autorisation de suppression, affichage de la quantité) pilote une synchronisation exécutée après chaque mutation du panier. Le sous-total est recalculé hors lignes cadeaux. Si un seuil est atteint et la ligne cadeau absente, elle est ajoutée avec des marqueurs dédiés. Si le seuil est perdu, sa quantité repasse à 0. Si le client retire lui-même un cadeau, le palier est mémorisé en session pour ne pas le réajouter immédiatement. Une barre de progression dédiée affiche l’écart jusqu’au prochain palier, avec le même mécanisme pour le seuil de livraison gratuite.

Cart Transform : paliers cadeaux

Cart APISection Rendering

02 / 05

Panier événementiel

Problème

Éviter que trois surfaces panier différentes (drawer, page, bulle header) se désynchronisent après une mutation, sans multiplier les rechargements complets.

Approche

Toute mutation panier passe par l’Ajax Cart API. Chaque réponse déclenche un événement unique, et la Section Rendering API renvoie le HTML déjà rendu des sections concernées. Le JS ne patche que ce qui a changé : les lignes du drawer, le résumé des totaux, l’en-tête, le pied, l’upsell et les blocs de confiance. Si une réponse n’a pas de HTML de section, un repli recharge les sections via l’URL courante plutôt que de casser l’affichage. Résultat : un drawer toujours cohérent avec la page panier et la bulle du header, sans re-render complet ni flash de contenu.

Panier événementiel

BundlesAttribution

03 / 05

Trois bundles qui n’en sont pas

Problème

Trois mécaniques différentes portent le mot « bundle » sur ce projet, avec des besoins d’affichage et de suivi marketing incompatibles entre elles.

Approche

Les abonnements injectent leurs propres lignes dans le drawer, exclues du rendu standard pour éviter les doublons. Au checkout, l’abonnement éclate le bundle en lignes séparées, ce qui aurait cassé l’attribution marketing sans un attribut posé au niveau de la commande. Les bundles natifs Shopify ne servent qu’à l’affichage de la composition sur les cartes produit, sans logique panier propre. Les packs funnel, eux, ne sont pas des bundles Shopify : le thème ajoute plusieurs variantes d’un coup, avec des marqueurs d’attribution (landing page d’origine, statut « offert »). Le thème ne calcule aucune remise, l’abonnement et les promotions Shopify gèrent le prix au checkout ; le thème pose les marqueurs et orchestre l’interface.

Trois bundles qui n’en sont pas

Stratégie produitQuantity breaks

04 / 05

Refonte de la stratégie produit

Problème

Vendre à l’unité limitait le panier moyen et ne poussait pas la récurrence. Changer ça veut dire retoucher chaque fiche produit, pas seulement le thème.

Approche

Mise en place de paliers de quantité directement dans le formulaire produit, avec un contrôleur qui synchronise variante, prix, quantité et badge promo au changement de palier. L’abonnement est proposé par défaut à côté de l’achat unique, avec une remise affichée immédiatement. Le prix de l’abonnement est resynchronisé quand un palier de quantité est sélectionné, pour que l’abonnement et l’achat ponctuel restent cohérents sur le même produit. Ce chantier a touché l’ensemble du catalogue, pas seulement le thème : chaque fiche produit a dû être adaptée à la nouvelle stratégie plutôt que migrée telle quelle.

Refonte de la stratégie produit

MigrationMarkets

05 / 05

Migration Europe vers Amérique du Nord

Problème

Ouvrir un nouveau marché sans repartir de zéro ni copier à la main des centaines de références, tout en gardant une seule base de code thème.

Approche

Des scripts de migration reproduisent la structure du marché Europe vers le marché Amérique du Nord : produits, images, thème, metafields et metaobjects, dont les pages funnel gérées en metaobjects. Le thème reste unique ; ce sont les données et la configuration des marchés Shopify qui portent la différence entre régions. Cinq marchés sont actifs aujourd’hui, avec une couverture mondiale visée pour septembre 2026.

Migration Europe vers Amérique du Nord

Décisions

Pourquoi ces choix techniques

Le client est venu chercher mes compétences spécifiquement pour le thème. La direction artistique a été confiée à Substance, une agence que j’ai recommandée ; je reste seul sur le développement, l’équipe Näak gère le contenu et le Shopify au quotidien.

Client

Minh

CEO · Näak

« Le résultat est encore mieux qu’attendu. Un thème minimaliste et sportif. »

Suite

Un projet Shopify Plus multi-marchés similaire ?

Thème sur-mesure, Cart Transform, migration multi-marchés : construit pour tenir la charge à l’international.