The Challenge
Tanning Club is a California sun care brand with a catalog spanning tanning accelerators, SPF, after-sun care, and apparel, all wrapped in a bold "Bronze Responsibly" identity. The brand had personality. The store was fighting it.
The navigation did not guide anyone anywhere. Sections broke on smaller screens. Product pages were thin for a category where shoppers genuinely want to know what is in the bottle and how to use it. And the Shop All page was a wall of mixed products, lotions next to hats next to SPF, with no logic a first-time visitor could follow.
What I Built
A store revamp built around one idea: a shopper should always know whether they are here to tan more or protect more, and every product should explain itself.
- Navigation rebuilt around the product lines. The catalog now splits into clear paths: the Tan Line for accelerators and bronzing products, Sun Carefully for SPF and protection, plus the apparel range. A first-time visitor understands the store structure in one glance instead of decoding a flat product dump.
- Metafield-driven product pages. Every product now carries structured content blocks: About this product, Why you'll glow, Ingredients, and How to Apply. The content lives in metafields, so each product displays its own details inside one consistent layout, and the client updates any of it without touching code.
- Ingredient education blocks. Sun care shoppers want to know what is in the bottle. Each product page now breaks down its key actives, beta-carotene, green tea, coffee seed oil, with plain-language explanations of what each one does for the tan and for the skin.
- Collection pages that make sense. Shop All went from a wall of mixed products to a structured browsing experience. Each collection opens with its own intro copy, and the Sun Science education banner carries the brand story into every browsing path.
- Responsive section rebuild. Sections that broke on smaller screens were rebuilt to hold up across phone, tablet, and desktop instead of only looking right at one width.
- New custom sections for best sellers, the brand community message, and the Bronze Responsibly identity, all configurable through the theme editor.
Technical Approach
The revamp was built in Liquid with custom CSS and Shopify metafields. No page builder apps, no external dependencies. This keeps the store fast and keeps every piece of content in the client's hands.
Metafield definitions power the product page content blocks, so ingredient breakdowns, usage directions, and product education are edited per product from the Shopify admin. The new sections use configurable blocks in the theme editor, so featured products, collection intros, and brand messaging can all be updated without developer help.
The Result
A store where the structure finally matches the brand. Navigation that routes shoppers by intent, product pages that educate as well as sell, collections a first-time visitor can actually browse, and sections that hold up on every screen size.
Just as important: the client owns all of it. New products inherit the full content layout through metafields, and every section on the site is editable from the theme editor. The store can grow without a developer on call.