Recharge.si Shopify Theme

The shape of the problem

Recharge.si needed a storefront that felt fast and distinctly branded, not like an off-the-shelf theme. Dawn provides a solid foundation but its defaults don't handle a large, categorized product catalog well — navigation becomes unwieldy and product cards don't show enough at a glance.

What I built

A Dawn v15.4.1 fork, rebuilt section by section. Key changes:

• Mega menu — full-width hover-triggered dropdown with a 4-column layout. Replaces the default accordion nav with something that works for a catalog of this size.
• AJAX page transitions — the View Transitions API makes navigation feel instant. No full reloads between pages.
• Smart hover images — product cards detect and skip near-identical variant photos, showing genuine angle or detail shots instead. Avoids the common pattern of hover images that look identical to the main image.
• Constrained gallery — product media sized to viewport height with a synced thumbnail strip. Works without JavaScript for the layout, progressively enhanced.
• Branded cart — redesigned cart page with breadcrumb flow, styled totals, and a branded empty state.
• Mobile drawer — touch-friendly with 44px tap targets throughout.

All brand tokens (reds, greens, ambers) live as CSS custom properties in base.css — no hardcoded hex in component styles.

Lessons

• The View Transitions API is production-ready for storefront navigation and requires almost no JavaScript to wire up.
• Smart hover image logic (comparing image filenames/alt text to skip near-duplicates) is a small addition that meaningfully improves the browsing experience on variant-heavy products.
• Dawn's section architecture scales well for customisation — the friction is in undoing default styles, not in adding new ones.