← obi anokwuru ● Shopify theme development

Three custom stores, built from scratch.

Three Online Store 2.0 themes for three very different (fictional) clients, written by hand in Shopify Liquid, HTML, CSS and vanilla JavaScript. No page builders and no starter theme. Every section can be edited in the theme editor, and all three themes pass Shopify Theme Check with 0 offenses.

Ember & Oak homepage
01 · Subscription coffee

Ember & Oak

Small-batch coffee roaster in Nottingham. Goal: grow recurring revenue.

  • Subscribe & save built on native selling plans, with live price updates per variant
  • Product data from metafields: tasting notes, roast meter, farm story
  • Interactive brew guide with accessible tabs and a ratio calculator, editable as blocks
  • AJAX cart drawer with a free-shipping progress bar and upsells chosen in theme settings
View live demo →Product page
Kindred homepage
02 · DTC skincare

Kindred

Clean skincare brand. Goal: raise average order value and conversion for first-time visitors.

  • Skin quiz that recommends a routine from product tags and adds it to the cart in one click
  • Build-a-bundle (pick 3, save 20%) using a multi-item AJAX add with hidden line properties
  • Accessible before/after slider driven by a range input
  • Ratings, key ingredients and skin-type match, all from metafields
View live demo →Take the quiz
Northbound homepage
03 · Outdoor apparel

Northbound

Technical outdoor clothing. Goal: make a large range of colours and sizes easy to browse.

  • Colour swatches (set up in theme settings) that change the product image, on product pages and on cards
  • Instant collection filters (colour, size, category) that stay in the URL so they can be shared
  • Size guide modal using native <dialog> and a sticky add-to-cart bar
  • Shoppable lookbook with hotspots placed by the merchant in the theme editor
View live demo →Filters
How it's built

Real Shopify themes

Each folder in themes/ is a complete theme with layout, sections, snippets, JSON templates, locales and settings schema. It goes onto a store with shopify theme push.

Merchant-editable

Every section has a schema with presets, blocks and settings, so non-developers can rearrange pages, change copy and pick products in the theme editor.

Fast by default

No jQuery and no framework. Each theme ships about 6 KB of gzipped JavaScript, written as Web Components. Images are responsive and the hero loads first.

Accessible

Skip link, keyboard-friendly tabs, focus trap in the drawer, native dialogs, ARIA live regions and support for reduced motion.

Live preview

These demos are rendered from the actual theme Liquid with mock store data, using a small Shopify-compatible renderer built on LiquidJS. The cart runs on a mock of the AJAX Cart API.