For Matière Première, at Axome
Redesign, boxes and gifts with Shopify Functions
Redesign and custom features for a perfume house: build-your-own boxes, free gifts and samples handled by Shopify Functions, a cart drawer that separates paid and free items.
The brief
Let a perfume house sell build-your-own boxes and give away gifts and samples under business rules, from the cart to checkout.
The challenge
A box has to become separate order lines, with only the first one carrying the price. Free gifts and samples follow a host of rules depending on the cart: 2 samples, 2 samples and 1 gift product, 2 plus 2 to choose, and so on. At checkout, cart validation and an extension block any free line that breaks these rules.
What I built
- Build-your-own boxes, 6 ml and 1.5 ml: vial picker and a Cart Transform Function that splits the line.
- Additions to the existing sample engine: non-stackable free gift, bonus sample, exclusion lists.
- Time-limited gifts with dates set in the theme settings, made free by a discount Function.
- Cart validation and checkout extension: no free line without a sample, gift or box property.
- Cart drawer: paid items on top, free gifts and samples grouped below.
- Product pages with a complex design: media in the background, product details laid over them.
- Product cards: an animation when the collection loads, the ingredient revealed on hover.
- News page: the brand's articles in an editorial layout.
- Reworked menu, GSAP image zoom, Lenis scrolling, related products in Swiper.
Built at Axome, as part of a team: "What I built" describes my part. Design by an Axome designer. The store and the Matière Première brand belong to their owner.
Next project
