Free course advice: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Register now →
Raymond Templier (1891–1968), pioneer of modern jewelry, remains one of the defining figures of the Art Deco avant-garde. Born into a family of Parisian jewelers, he rejected ornaments for geometry, symmetry and balance. He created pieces that transcended decoration and became pure expressions of form and light.
His compositions – intersecting circles, polished surfaces and contrasting materials such as platinum, onyx and lacquer – embodied a radical vision: jewelry as architecture in miniature.
As a founding member of the Union des Artistes Modernes (UAM) alongside figures such as Le Corbusier and Charlotte Perriand, he championed a new aesthetic based on functionality and artistic integrity. His legacy continues to influence contemporary designers who see jewelry as both an art and design object.
Design
Now that the Templier family is re-releasing a selection of its most emblematic creations, they have entrusted us with the design and development of the Maison’s new Shopify website – a project conceived as both gallery and archive, bridging the gap between digital experience and artistic legacy.
The redesign is based on a new visual identity and art direction that reinterprets the brand’s heritage through a contemporary lens. Instead of relying on the known opposition of tradition versus modernitythe project seeks a timeless modernist balance – a contemporary form that breathes the spirit of its origins without imitation.
The site is structured as a virtual gallery, where each jewel is treated as a work of art: photographed with understated elegance, revealing the play of volumes, materials and reflections. The photographic direction embraces movement and uses slow, deliberate shifts in perspective to underline the architectural character of Templier’s compositions: solid yet fluid, rational yet sensual.
In dialogue with these images, the interface unfolds with choreographed transitions of refractions that reflect the architectural essence of Templier’s work. Scrolling feels smooth and continuous; pages flow into one another through revelations, soft blurs, and shifting reflections—a visual rhythm that echoes the circular motifs and play of light that defined the jeweler’s modernist language.
The result is a digital environment that honors Templier’s legacy through restraint, clarity and emotion – a contemporary translation of his belief that modern beauty lies not in ornament, but in the purity of form and the harmony of movement.
Tech stack and architecture
Quentin: As a developer on this project, my role was to develop a customizable e-commerce platform, working closely with the design and customer teams.
The site is built on Shopify (native liquid templates) with a custom theme developed by JC Suzanne, based on Dawn. To improve the user experience, we’ve added a modern front-end layer to this custom theme:
- piecesjs as a lightweight JavaScript framework to manage native web components
- GAP for smooth and high-performance animations
- Soft for scroll management
- Wave for page transitions
This setup ensures maintainability, flexibility, and strong performance on all devices.
Customizable editorial pages
We built a customizable system using Shopify’s sections that allows the customer to build editorial pages exactly the way he or she wants. Each page is composed of a custom library of sections, with the ability to add blocks, reorder them, and view the visual result in real time as you fill in fields. This approach preserves the design system while providing full editorial control and modularity.
The hero section of this template also allows the client to play creatively with patterns while always respecting the overall design system. The page is built so that the customer can update and manage content directly from the Shopify admin, using custom blocks and dynamic sections. This gives the client editorial control and creative flexibility without compromising the visual consistency of the site.
Page entry animations
Special attention was paid to the entrance animations for each page, with transitions designed to match the atmosphere of the hero section. One of the most fun to develop was the product page animation, which has a mirror effect that adds a distinctive and dynamic reveal when users land on the page.
Loader animation
Another cool element is the custom loading animation, built with GSAP to introduce the brand through motion. The idea behind this charger was to remain discreet while subtly emphasizing the quality of the customer’s products. The animation sets the tone for the site experience without overwhelming the user.
Choosing the right architecture
At Index, we evaluate native Shopify (Liquid) versus headless at the start of every project. In most cases, native already gives us the front-end freedom we need. For us, headless is reserved for specific limitations or integrations.
For Templier, native was the right choice: faster to build, stable and secure, while maintaining full creative control over the experience. We use a boilerplate that improves with each project and allows us to push the front end: piecejs for web components, Swup for page transitions, GSAP for animations and PostCSS/Tailwind for styles. A traditional, well-performing store that is easy to maintain.
#Geometry #Motion #ShopifyPowered #Digital #Tribute #Modernist #Vision #Raymond #Templier #Codrops