Commerce UX · Brand Translation · Freelance · Ongoing

Goloka Incense

Making a Shopify store feel handmade, one Dawn constraint at a time

Role
Freelance — sole designer (research → system → code)
Timeline
Apr 2026 → present
Stack
Dawn 15.4.1 · Tailwind v4 · React · Shoelace Icons
Status
In progress
HERO IMAGE
A split image: Dawn's white-template grid on left → Goloka's warm-toned store on right, showing the direction of the work
01
The starting point

40 years of heritage, boxed into a default Shopify template

Goloka makes incense handcrafted in Bangalore, with 40+ years of heritage and charitable work across India. The storefront started on Shopify's Dawn theme — fast, reliable, and, out of the box, indistinguishable from thousands of other stores.

Dawn is a genuinely good base for small businesses. It's also built to get out of the way, which means it doesn't carry any brand identity on its own. That was the gap: a brand this specific needed a storefront that didn't read as generic e-commerce.

Category
Commerce · Brand translation
Base theme
Shopify Dawn 15.4.1
Brand complexity
7 product lines × 3 variants each
Engagement
Freelance, ongoing
02
What I almost missed

A repaint isn't a redesign

ORIGINAL GOLOKA HOME
White background. Product grid. No hierarchy. The same pattern as any default Dawn store.

My first approach was surface-level: change colors, swap the font, add maroon buttons. But Dawn's template runs deeper than that — section logic is largely fixed, and design tokens aren't exposed the way they are in a from-scratch build.

A repaint would have shipped a better-looking cage, not a brand.

03
The reframe

Treat Dawn as a commerce engine, not a design canvas

The early version worked as a store — customers could buy incense. But it didn't carry the heritage the brand actually has. Nothing about the browsing experience explained why Goloka costs what it does, or what's behind each product.

The fix wasn't more design polish on top of Dawn's defaults. It was building a system — color, type, spacing, imagery rules — and translating that system into Dawn's block/section constraints deliberately, instead of fighting them screen by screen.

Dawn is Shopify's gift to small businesses who can't build from scratch. Treating it purely as a design canvas is the wrong mental model — it's a commerce engine you design a brand into.
04
System before screens

A design system built to survive Dawn's constraints

System
Color that means something
Saffron #C4973B (warm, not bright)
Maroon #6B1B1B (temple, not blood)
Cream #FAF6EC (handmade, not sterile)
Saffron reserved for CTAs only.
System
Typography that carries heritage
Cormorant Garamond for headings, evoking Indian temple inscriptions
DM Sans for body copy
No uppercase except section labels
System
Space that breathes
48px gutters (not 64)
Product cards at 330px (not 375)
White space treated as active, not empty
DAWN-BASED BLOCK SYSTEM
Template in progress: Announcement → Mood browse → Featured collections → Process story → Editorial footer — each configurable via Shopify admin
05
The fights

Constraints I'm designing around

1
No custom fonts by default
Dawn ships with web-safe fonts only → added @font-face for Cormorant, served through Theme Kit.
2
Header navigation is largely fixed
Dawn's header structure resists deep changes → custom CSS overrides plus a small amount of JS for the megamenu.
3
Product page logic is locked
Variant/cart logic can't be rearchitected → layered brand design over it instead, e.g. a sticky 'add to cart' treatment.
4
Minimal custom JavaScript
Kept interaction JS to a minimum for performance — most motion and state handled in CSS.
5
Mobile needed its own pass
Desktop-sized product cards didn't work on phone → separate mobile breakpoint with a narrower card and horizontal peek.
6
Checkout friction
Looking at ways to shorten the path to checkout — cart drawer, saved items — as part of the ongoing build.
06
Two prototypes, one problem

Static HTML surfaced things React prototypes hid

I built both a static HTML prototype and a React prototype in parallel. The HTML exposed problems React hid — type rendering, layout shifts, browser inconsistencies — and became the reference for exact typography and spacing.

The Dawn/Liquid build draws from the HTML prototype, not the React one, so what ships matches what was actually tested visually.

Most prototyping tools create false confidence about how something will actually render. A static HTML build is closer to the truth.
System
HTML prototype
Typography
Layout system
Color mapping
Fixed layouts
System
React prototype
Cart logic exploration
Filter states
Micro-interactions
System
Dawn translation
Liquid templating
CSS overrides
Theme blocks
07
Where it stands

Live storefront, design system still being extended

This is an ongoing freelance engagement, not a closed case study — there's no A/B-tested conversion data to report yet, and I'd rather say that plainly than attach numbers I haven't actually measured. What's true today: the storefront is live on the Dawn fork, the brand system (color, type, spacing, imagery rules) is defined and partially rolled out, and the remaining work is extending that system across the rest of the catalog and checkout flow.

The best Shopify design feels custom but is entirely systematized underneath. That's the target here — still in motion.
Every e-commerce template whispers the same thing: "Buy now."
The work is making it sound like "this matters" instead.

Create a free website with Framer, the website builder loved by startups, designers and agencies.