Tudé Fragrance
A live Shopify storefront for a handcrafted Pakistani perfume house, translating bespoke HTML designs into maintainable Liquid sections with a mobile-focused delivery pass.
At a glance
- Status
- Live client work
- Project year
- 2025
- Project duration
- 10 weeks
- Rivenhall role
- Shopify theme architecture · Liquid implementation · Performance tuning
- Named deliverables
- Bespoke storefront conversion · Responsive templates · Mobile delivery pass
- Audience
- Fragrance customers shopping a Pakistani perfume house, with mobile delivery prioritised.
- Constraints
- Editable Shopify content · Photography-led mobile experience
- Team / collaborators
- Rivenhall: Shopify architecture, Liquid implementation and performance tuning
- Client responsibilities
- Product catalogue and pricing · Approved brand copy and photography · Consolidated storefront approvals
- Success criteria
- Preserve the bespoke identity · Keep sections maintainable · Improve the mobile critical path
- Result
- Live Shopify storefront · Studio-run mobile PageSpeed test recorded 66 to 84 during tuning
- Before
- A bespoke HTML and CSS direction without an operable Shopify content system.
- After
- An editable Liquid storefront with responsive product and collection templates.
- Before / after source
- Narrative replace with approved before/after evidence.
- Client comment
Rivenhall translated the visual direction into a storefront that feels bespoke while remaining practical for our team to manage.
Client representative- Live site
- tudefragrance.com ↗
- Proof note
- Live storefront and studio test record · Studio-run mobile PageSpeed comparison during implementation
Historical tuning recordMobile PageSpeed: 66 → 84Retained studio test record
Current production testMobile 91 · Desktop 97Tested 20 August 2026 · Lighthouse 12 · Chrome · production URL · simulated mobile and desktop
Brief overview
Tudé is a handcrafted Pakistani perfume brand. The engagement was a tuned Shopify storefront: converting bespoke HTML designs into a maintainable Liquid theme the brand can run itself.
The screenshots here are the real, live storefront.
Problem & opportunity
A premium fragrance brand needs a storefront that feels considered on mobile, where most of its traffic lands, without the bloat a stock theme brings.
Strategy & structure
Convert hand-built HTML/CSS designs into clean Liquid sections so the brand keeps its bespoke look while staying editable in Shopify.
Prioritise mobile rendering and image discipline, since the storefront leans heavily on photography.
Design system
A warm, editorial luxury system: amber on cream, generous spacing, restrained motion.
Product and collection templates designed to keep imagery sharp without ballooning page weight.
Interaction details
- Scroll treatment
- Native page scrolling carries a restrained ink-on-cream treatment aligned with the storefront palette.
- Navigation behaviour
- Collection and product routes keep familiar shopping patterns immediate while supporting the editorial presentation.
- Motion
- Restrained transitions support hierarchy without competing with fragrance imagery or product detail.
- Responsive decisions
- The mobile path prioritises product imagery, clear purchasing routes and disciplined image delivery.
- Accessibility fallback
- Scrolling remains native across wheel, touchpad, pointer and keyboard input, with a simpler browser fallback where needed.
Decision path
Implementation decision
Bespoke interface to operable Shopify system
The central decision was translation rather than a stock-theme reskin: preserve the authored storefront direction while making its repeated commerce surfaces editable and strengthening the mobile delivery path.
Source
Bespoke HTML and CSS
Begin with the already-authored storefront direction instead of replacing it with a stock theme.
Structure
Reusable Liquid sections
Translate repeated storefront patterns into maintainable Shopify sections and templates.
Delivery
Mobile image discipline
Prioritise rendering and image delivery for a photography-led mobile experience.
Result
Live storefront
Keep the bespoke identity intact inside an editable, public Shopify implementation.
Record note · Reconstructed from retained implementation notes. The archive does not contain a dated architecture diagram.
Selected screens
Campaign & Creative
The full page
Scroll inside each frame to inspect the full page.
Technical implementation
Shopify theme work in Liquid, converted from bespoke HTML/CSS.
Performance tuning focused on the mobile critical path and image delivery.
Outcome
A studio-run mobile PageSpeed comparison recorded 66 before tuning and 84 after tuning.
Reflection
Tudé is the studio ecommerce lane in one project: a bespoke, brand-led look made fast and maintainable inside Shopify.
