Sanatan Riddhi
Year
'26
Tools
Figma, Shopify (Liquid), JavaScript, Git, Playwright
Role
Product Designer & Developer
A crystal and gemstone bracelet brand from Mumbai needed a premium online store before Navratri, its biggest buying moment. I designed it in Figma, then built it myself on Shopify: a custom design system, around 200 products, payments, shipping and launch
The Brand & the Brief
Sanatan Riddhi sells natural crystal bracelets chosen by intention: love, protection, career, wealth and mood. There are also ranges for the 12 zodiac signs, 9 numerology numbers, 7 chakras and 5 elements. The brand's line is Ancient Wisdom. Modern Wellbeing.
The founder wanted a store that felt like Indian spiritual heritage, not a generic jewellery template. It also had to be live for Navratri, the brand's biggest selling season.
My role
I was the only designer and developer. I worked from information architecture and Figma design through to the Shopify theme code, the product data, store setup, launch and client communication.
Constraints
A festival deadline: Navratri, with a few weeks of build time.
A large, messy catalogue: about 220 products in many families. Photos arrived in batches with inconsistent naming.
Approvals on WhatsApp: a non-technical founder and several stakeholders, with decisions arriving piecemeal.
Indian commerce needs: Razorpay payments, Shiprocket couriers, per-bracelet shipping, prepaid-only orders and made-to-order sizes.
Information Architecture
I planned a simple four-part site: Shop, About, Journal and Contact. The live site kept that skeleton but changed in four places as the catalogue and the client's plans became clearer.
What changed, and why
One "Collections" box became six Shop menu groups. The catalogue grew to around 200 products, so shoppers now browse by intention, chakra, zodiac, numerology, element or the Luxe range. On top of that, the Shop page has filters.
Journal moved to the footer. It had no posts at launch, and the founder wanted the top-level slot for a new gifting line.
The new line launched as "coming soon". The menu was ready before the products. Empty collections show a friendly coming-soon state instead of "no products match".
Cart and checkout became a drawer. Shoppers never leave the page they're browsing, and the
/cartpage just opens the drawer.
The search, 404 and policy pages weren't in the original plan. They're needed for payments approval and for selling on Meta, so I designed them from the existing system.
Design System
The goal was quiet luxury with a spiritual warmth: cream, blush and gold, grounded by deep forest green. I defined it once in Figma, then coded it once as CSS tokens. Every section reads from those tokens, so nothing drifts between design and build.
Colour
Base: a cream background, a warm beige for heroes and a blush accent.
Actions: forest green for buttons; gold for detail and the announcement ticker.
Gold for text: a darker gold for text, so it passes AA contrast. Brand gold on cream doesn't.
Intentions: five soft tints, one per intention (love, protection, career, wealth, mood). Shoppers can tell the categories apart at a glance.
Type
Cormorant Garamond for headings, for an editorial, heritage feel.
Manrope for body text and UI, for clarity at small sizes.
Self-hosted fonts: both are split into Latin and extended-Latin files, so the ₹ glyph loads only when it's needed and headings don't flash in a fallback font.
Components
24 custom icons, all drawn to one stroke style
Buttons, pills, tags, badges and product cards
A gold announcement ticker
Accessibility, built in from the start
AA contrast and 44px tap targets
Screen-reader labels on icon buttons
A reduced-motion version of the ticker
Focus handling in drawers
Decorative images hidden from screen readers
Key Screens
I designed every screen for phones first, down to a header that fits a 320px screen. Each screen is also fully editable by the founder in Shopify's theme editor.
Home
Before settling on a layout, I designed four directions for the home page hero and reviewed them with the founder. She chose Option 2, a split hero. The three directions that weren’t selected are below.
A split hero leads into Shop by intention: five tinted cards that scroll sideways on phones. Featured products and a gold quote band follow. Shoppers start from what they want in life, not from a stone name they may not know.
Mobile screen:
Shop and filters
On desktop, the filters sit in a sidebar. On phones they open as a bottom sheet, which you swipe down to close. Ticks you haven't applied are cleared when the sheet closes, so the results always match what's on screen. Removable chips, sorting and "Load more" all work without a page reload.
Product page
Price: a crossed-out MRP beside the selling price.
Pills: intention pills, and size pills for 8mm (in stock) or 10mm (made to order).
Info tabs: six tabs driven by product data: stone details, traditional associations, care, authenticity and a disclaimer.
Phones: a sticky Add to cart bar.
Cart drawer
A 440px drawer with an "added to your cart" strip and a quantity stepper. When it's empty, it points shoppers back to the intention collections instead of showing a dead end.
About and Contact
The About page is built from modular sections: hero, text, image and text, value cards, and a quote. Contact pairs a form with a WhatsApp card, because that's how this brand's customers actually reach out.
Behind the Build
I built the theme on Shopify's free Dawn theme, but restyled it rather than replacing it. Dawn already handles the hard platform work: cart logic, filters, search, checkout handoff and accessibility. On top of it, I rebuilt every visible page as about 25 custom sections that match the Figma.
Workflow
Local preview: Shopify CLI for a live preview, synced with the theme editor.
Client previews: an unpublished preview theme, so the founder and stakeholders could review on any device through share links without logging in.
Version control: Git, with one commit per build stage.
Setup guide: a living guide of 10 parts and about 47 numbered steps, each with a "check it worked" line. It doubled as the handover document.
AI-assisted tooling
I used AI as a pair programmer for the operational work that sits between design and launch. I set the rules, reviewed every output and made the calls.
CSV data scripts: Product data went in through Shopify's CSV import, one small focused file per fix. Prices, shipping weights and tax settings could each change without touching anything else. One file switched off tax on all 217 variants at once.
Photo matching: The client sent about 98 photo sets in mixed formats and inconsistent folder names. The pipeline:
matched each set to a product
flagged the ambiguous matches
caught duplicates by file fingerprint
built contact sheets for a visual check
exported 188 web-ready images
generated the import files that attached the photos and took 47 draft products live
Test harness: A mock server rendered each section, and a headless browser took desktop and phone screenshots. I reviewed both before every release, so layout bugs were caught before the client saw them.
Hard Problems
1. The cart bug that only appeared on Macs
Problem: Changing the quantity in the cart drawer threw an error, but only on Macs. Dawn's focus-trap code looked up the drawer by a class name my custom drawer didn't use. Mac browsers don't focus a button when you click it, so the lookup found nothing and the code failed.
Fix: I added the class Dawn expects, then tested it by simulating clicks that don't move focus.
Lesson: When you reskin a platform, its hidden assumptions become your bugs.
2. A product name that broke photo ordering
Problem: The sorting rule promoted any file with "main" in its name to the lead image. One stone, Sulemani Hakik, contains "main" inside its name, so a close-up became its hero photo.
Fix: The contact sheet caught it before launch, and I changed the rule to match whole words only.
Lesson: Automation is only as good as the visual check after it.
3. One policy from three sources
Problem: The Shipping & Returns policy arrived in three versions: a stakeholder's comments on my draft, the founder's own PDF, and her WhatsApp answers.
Fix: I merged them into one policy with no duplication. I also gave the client a short list of the contradictions still to settle. The main one was which bracelet sizes are sold directly.
Lesson: Writing the policy was the easy part. Getting everyone to one version was the real design work.
4. Making Shopify fit Indian commerce
Tax: GST didn't apply, but Shopify's India tax setting can't be switched off in the admin. I turned off tax per variant, across all 217, with one import file.
Shipping: I replaced Shopify's default flat rate with weight-based tiers that work out to a fixed charge per bracelet, plus free delivery above a threshold.
Checkout: phone number made required, since couriers need it.
Domain: cleared the registrar's default records, including one that would have sent some visitors back to the registrar, then pointed the domain at Shopify.
Outcome
The store went live on its own domain on 13 October 2026, two days into Navratri. The last two days went on final store settings and client sign-offs.
What shipped | At launch |
|---|---|
Live products | ~196 bracelets |
Collections | 5 intentions, plus chakra, zodiac, numerology, element and Luxe ranges |
Custom sections and snippets | ~25, all editable by the founder |
Product images processed | 188 |
Setup and handover guide | 10 parts, ~47 steps |
What the founder said
"We're very happy with the design and how the website looks on both desktop and mobile. We love the premium and luxurious feel that the design is giving." (Founder, Sanatan Riddhi)
Challenge
A founder-led crystal bracelet brand needed a premium, culturally rooted online store before Navratri. The catalogue had about 220 products, the photos were inconsistent, approvals ran over WhatsApp, and the store had to work with Indian payments, couriers and tax rules.
Solution
I designed the store end to end and built it on Shopify myself:
a tokenised design system and about 25 custom, client-editable sections
mobile-first shopping by intention
an AI-assisted data and photo pipeline that took around 200 products live
a fully configured checkout, shipping and domain, launched for the festive season
HARDANI™