Aura Fragrances: Premium Shopify Liquid Architecture
A ground-up Shopify 2.0 rebuild for a luxury fragrance brand: a 98 Lighthouse score, a frictionless AJAX checkout, and full drag-and-drop content control for the merchant’s team.
The Challenge
The merchant was constrained by a rigid, slow-loading template that diluted their luxury brand aesthetic. They needed a highly customizable, lightning-fast storefront that felt like a high-end boutique. Crucially, the marketing team needed the ability to update dynamic product details (like specific fragrance notes and ingredients) on the fly, without ever having to touch the codebase.
The Solution (UX & Code)
- Design System Integration: Implemented a strict 8-point mathematical spacing system and a premium typography scale (Playfair Display & Inter) directly into the theme’s global CSS for a flawless, high-end visual rhythm.
- Modular Architecture: Engineered native Shopify 2.0 “Sections Everywhere” architecture, giving the merchant complete drag-and-drop control to build custom landing pages natively in the Shopify Editor.
- Cognitive Load Reduction: Utilized the Law of Proximity to redesign the product grid and navigation, eliminating visual clutter and guiding the user’s eye directly to the “Add to Cart” action.
The Key Build: Dynamic Metafields & the AJAX Cart Drawer
To give the merchant total autonomy, I rebuilt the product data architecture using advanced Shopify Metafields. This allows the client to seamlessly input unique fragrance notes, material care, and shipping times for each individual product from their admin dashboard.
To pair with this seamless backend, I developed a custom AJAX Cart Drawer. Instead of forcing users to load a separate, clunky cart page, the drawer slides out instantly—reducing checkout friction, keeping the user in the shopping experience, and dramatically increasing conversion rates.
The Visual Details
The Impact
98 Lighthouse Score
Achieved through scoped CSS, deferred JavaScript, and hyper-optimized Liquid loops.
Frictionless Handoff
Reduced the path-to-purchase by eliminating the traditional cart page step.
Full Merchant Autonomy
The client can now build, edit, and launch new campaigns natively without developer assistance.