L'Arc des Étoiles.
Awakening the stars that shine within everyone
Year.
2026
Mission.
This project involves developing a headless e-commerce application for L’Arc des Étoiles, a psychology practice. The application is designed to offer a seamless user experience. The front-end is built with Shopify Hydrogen, while all product catalog, client, order, and content management relies on Shopify.
Visitors can browse the site, discover the services offered, explore an immersive gallery, and purchase different types of products: physical items, digital content, and print-on-demand books through Lulu integration.
One of the key aspects of the project lies in editorial content management. This is entirely driven via the Shopify admin using metaobjects and queries to the Storefront API, allowing page structures and texts to evolve easily without code intervention. This approach ensures flexibility, administrative autonomy, and a custom public interface.
Content Management.
The public interface is entirely built from structured data in Shopify. The different sections of the pages (home, about, services, etc.) are defined via metaobjects, allowing a clear separation between the site structure (managed in React / Hydrogen) and editorial content, modifiable from Shopify.
Each type of content (titles, rich text, images, specific fields) is dynamically retrieved via the Storefront API, then injected into dedicated React components. This approach allows the site's content to evolve continuously without technical intervention.
In addition, SEO metadata (titles, descriptions, Open Graph images) is also populated from these same structures, ensuring consistency between the displayed content, search engine optimization, and social media sharing.
Finally, server-side rendering (SSR) is optimized with appropriate caching strategies: editorial content benefits from long-term caching with revalidation, while more sensitive data (products, prices, stock) are refreshed more frequently to ensure accuracy.
Multiple Product Types Supported.
The shop includes different products with different fulfillment logics, while maintaining a unified shopping experience for the user.
Multiple Product Types Supported.
The shop includes different products with different fulfillment logics, while maintaining a unified shopping experience for the user.
01
Physical Products
Physical items are managed traditionally via Shopify, with their product pages, variants, and shipping rules. The cart automatically consolidates quantities, prices, and associated fees before checkout.
02
Digital Content
Digital products follow the same purchase flow as physical products. Once payment is completed, access to content or file downloads is automatically delivered according to the configuration defined in the Shopify admin.
03
Print-on-demand Books
Integration with Lulu allows for book printing on demand. This approach eliminates traditional stock management and allows books to be produced only after an order, reducing unsold stock and logistical constraints.
Checkout Process.
The purchase journey connects the Hydrogen-developed storefront to the secure Shopify checkout, while integrating necessary logistical tools for order fulfillment.
Stack.
The project uses the Hydrogen framework to build a decoupled (Headless) e-commerce experience, connected directly to the Shopify Storefront API. The application relies on React Router v7 in SSR (Server-Side Rendering) mode to ensure instant content display and smooth management of structured data.
TypeScript
React
Shopify
Hydrogen
React Router (v7)
Tailwind CSS
Radix UI
Embla Carousel
GraphQL
Vite