Overview
SANA is a direct-to-consumer wellness brand selling single-serve, honey-based supplements. I joined the project through a marketing/staffing agency that handled client acquisition, building SANA's brand identity from the ground up — logo, voice and tone, color system, and overall brand personality — then building the Shopify storefront around it. From there my scope grew into ongoing mobile-first performance work, a metafields-driven product-data architecture, subscription and volume-discount purchasing, tracking setup, and the brand's first paid-media campaigns.
Business Context
The engagement came through a marketing/staffing agency intermediary — I was the sole developer responsible for turning SANA from a concept into a live brand and storefront, then keeping it running: theme development, performance, product-data architecture, tracking, and early paid media.
Challenge
Two things made this more than a standard theme build. First, the product line's complexity — each single-serve variant needed its own benefits, ingredients, recommendations, and UI color treatment — meant a standard Shopify product template couldn't hold that data without turning into an unmanageable pile of one-off template edits. Second, mobile performance needed continuous attention: a mobile-first layout only stays fast if it's re-checked every time a section changes, not audited once and left alone.
Solution
I built SANA's brand identity first — logo, voice and tone, color palette, and the overall personality the storefront and marketing would carry — then built the Shopify store around it with a mobile-first layout from day one.
To handle the product-line complexity, I set up a metafields architecture in the Shopify admin: each product carries its own linked benefits, recommendations, ingredients, related content, and UI accent colors as structured metafields rather than hardcoded template content, so adding or editing a variant doesn't mean touching template code.
I designed and built the subscription and volume-discount purchasing UI/UX, with continuous code and UI updates focused specifically on keeping it fast and usable on mobile as the feature evolved.
On the performance side, a full technical audit turned up a specific, fixable set of problems: Google Tag Manager was firing a duplicate GA4 tag on top of Shopify's own analytics channel; 85 orphaned files from an early page-builder app — dropped in favor of native theme sections — were still loading unused CSS and JavaScript on every page; the hero image driving Largest Contentful Paint had no preload; and several sections were missing the width, height, and alt attributes needed to avoid layout shift and pass accessibility checks. Fixing each of those improved the storefront's mobile Lighthouse audit, tracked with before/after runs rather than estimated. I also fixed Shopify Merchant Center product-schema issues — a duplicated brand field and missing global identifiers — that Google Search Console had flagged, and corrected on-page SEO issues like internal links pointing at the wrong domain.
I set up the brand's tracking stack from scratch — Google Tag Manager, Meta Pixel, and the X (Twitter) Pixel — and used it to run SANA's first paid-media campaigns: exploratory Meta Ads and Google Ads, with ongoing optimization driven directly by what that data showed.
Outcome
SANA went from a brand concept to a live, mobile-first Shopify storefront with a metafields-driven product system, working subscriptions and volume discounts, and a measurably faster, more accessible mobile experience. The tracking stack I built also powered the brand's first paid-media campaigns on Meta and Google, with optimization decisions grounded in real campaign data instead of guesswork.
My Contributions
- Built SANA's brand identity from scratch — logo, voice and tone, color system, and overall brand personality
- Built the Shopify storefront with a mobile-first layout
- Designed a metafields architecture linking each product to its own benefits, recommendations, ingredients, related content, and UI colors
- Designed and built the subscription and volume-discount purchasing UI/UX, with continuous mobile performance updates
- Diagnosed and fixed a mobile Core Web Vitals regression, verified with before/after Lighthouse audits
- Removed duplicate analytics tracking and 85 orphaned files from an early page-builder app
- Fixed Shopify Merchant Center product-schema issues and corrected on-page SEO issues, including internal links pointing at the wrong domain
- Set up the brand's tracking stack: Google Tag Manager, Meta Pixel, and X (Twitter) Pixel
- Ran SANA's first exploratory Meta Ads and Google Ads campaigns and optimized based on the resulting data
Technologies
- Platform: Shopify
- Languages: Liquid, HTML, CSS, JavaScript
- Framework / CMS: Shopify OS 2.0, Metafields
- Tracking & Ads: Google Tag Manager, Meta Pixel, X (Twitter) Pixel, Meta Ads Manager, Google Ads
- Tools: Git, Shopify CLI, Google Search Console, Lighthouse
