Tous les projets

Pour Matière Première, chez Axome

Refonte, coffrets et cadeaux en Functions

Refonte et évolutions métier pour une maison de parfums : coffrets composables, cadeaux et échantillons offerts gérés par des Shopify Functions, tiroir panier qui sépare articles payants et offerts.

95–99 PageSpeed sur ordinateur Score de performance PageSpeed des fiches produit, mesuré sur ordinateur.
4 extensions checkout Extensions de l'app checkout créées par moi : Cart Transform des coffrets, remise cadeaux, validation du panier et son extension.
Défilement de la page d'accueil Matière Première
Client
Matière Première
Agence
Axome (Groupe EDG)
Mon rôle
Développeur Shopify
Équipe
Une équipe de 3 développeurs avec un chef de projet.
Année
2024 – 2026
Stack
Dawn, Liquid, TypeScript, Shopify Functions, Checkout UI extensions, GSAP, Swiper

Le brief

Permettre à une maison de parfums de vendre des coffrets composables et d'offrir cadeaux et échantillons selon des règles métier, du panier jusqu'au checkout.

Le défi

Un coffret doit être éclaté en lignes de commande distinctes, dont seule la première porte le prix. Les cadeaux et échantillons offerts suivent une foule de règles selon le panier : 2 échantillons, 2 échantillons et 1 produit cadeau, 2 plus 2 à choisir, etc. Au checkout, une validation du panier et une extension bloquent toute ligne gratuite qui enfreint ces règles.

Ce que j'ai développé

  • Coffrets composables 6 ml et 1,5 ml : sélecteur de flacons et Function Cart Transform qui éclate la ligne.
  • Extension du moteur d'échantillons existant : produit offert non cumulable, échantillon bonus, listes d'exclusion.
  • Cadeaux à durée limitée, avec des dates définies dans les réglages du thème, rendus gratuits par une Function de remise.
  • Validation du panier et extension checkout : pas de ligne gratuite sans propriété échantillon, cadeau ou coffret.
  • Tiroir panier : articles payants en haut, produits et échantillons offerts regroupés en dessous.
  • Fiches produits au design complexe : médias en fond, infos produit posées par-dessus.
  • Cartes produits : animation au chargement de la collection, ingrédient révélé au survol.
  • Page Actualités : les articles de la marque en mise en page éditoriale.
  • Menu retravaillé, zoom d'image GSAP, défilement Lenis, produits associés en Swiper.

Réalisé chez Axome, en équipe : "Ce que j'ai développé" décrit ma part. Maquettes conçues par un designer d'Axome. La boutique et la marque Matière Première appartiennent à leur propriétaire.

Coffret à composer : 6×6 ml, puis 3×6 ml, rempli et ajouté au panier
Les flacons remplissent le coffret 6×6 ml, puis le 3×6 ml ; dans le panier, la photo du coffret montre les échantillons choisis.
3 écrans mobiles : coffret vide, coffret rempli et tiroir panier
Sur mobile : coffret vide, coffret rempli, puis tiroir panier qui sépare articles payants et offerts.
Page Actualités : les articles de la marque, avec leur date et un grand visuel
La page Actualités : chaque article avec sa date, son thème et un grand visuel, dans une mise en page éditoriale épurée.
Page collection, son animation et ses survols, puis une fiche parfum
La page collection s'anime au chargement et révèle chaque ingrédient au survol ; la fiche parfum pose ses infos sur des médias plein écran.