Shopify · Liquid · Frontend · CRO

NOVA FORM

A premium wellness storefront, designed and built from scratch as a Shopify theme. Liquid, CSS and vanilla JavaScript, with no Dawn fork and no framework.

NDA-safe reconstruction. My client ecommerce work is confidential, so rather than show material I am not free to share, I rebuilt the same ground independently. The brand is fictional and every asset, line of copy, review and line of code here was made for this portfolio.

Try it

Live pages, not screenshots. Resize the window: they were designed at 390px first.

Product page

Gallery, variants, subscription options, sticky mobile CTA, comparison, bundle, reviews, FAQ. Add to cart opens the drawer.

Open →

Campaign landing page

Its own layout with the storefront navigation removed. Three links on the page, all anchors to the offer.

Open →

Bundle builder

Pick any three, with live pricing and saving. The add button stays disabled until the bundle is exactly three.

Open →

Home & component set

The hero, plus every component and state in one place: buttons, price, rating, variants, quantity, cards, accordion.

Open →

Decisions worth explaining

Conversion

  • The decision sits above the fold. Rating, price, purchase option and add to cart come before any storytelling.
  • The sticky mobile CTA waits. It appears only once the real button has scrolled up out of view, so it never covers what someone is reading.
  • Bundle savings are computed from the products, never typed in, so they cannot drift when a price changes.
  • The comparison avoids claims. Every row is a format, packaging or service fact, and the other columns are category archetypes rather than named brands.

Engineering

  • Progressive enhancement. The product form, variant selector, FAQ and cart page all work with JavaScript disabled. JS adds the AJAX cart and the gallery, nothing more.
  • The cart drawer is a native dialog, so focus trapping, Escape and page inertness come from the platform, and its contents are re-rendered by Liquid through the Section Rendering API.
  • The comparison stays a table on mobile with a pinned first column. Turning rows into cards breaks the relationships screen readers depend on.
  • Two border tokens. The soft hairline the design wants fails the 3:1 contrast rule for controls, so anything identifying a control uses a darker one.

Screens

Product page above the fold on desktop
Product page, above the fold
Cart drawer open with an upsell
Cart drawer and upsell
Bundle builder with three products chosen
Bundle builder
Product comparison table
Comparison
Bundle section showing individual value and bundle price
Bundle
The offer block on the landing page
Landing page offer

My role

Design
UX structure, visual direction, the design-token and component system, responsive layouts.
Development
Shopify theme architecture, Liquid sections and schemas, JavaScript, cart functionality.
CRO
Above-the-fold hierarchy, sticky CTA, bundles, upsells, trust and FAQ friction reduction.
Quality
Accessibility, responsive QA at 375 to 1440, performance budget.

Get in touch