Accepting new workStart a project
Menu
01 Work02 Services03 Process04 Templates05 AboutStart a project

§ Work / DTC Shopify stores

Custom Shopify stores,
from Figma to launch.

Client
US DTC brands, via a performance agency
Sector
Consumer goods
Years
2023–
Role
Shopify frontend developer
Platform
Shopify (Liquid)
Stack
Liquid · Tailwind · Figma
Illustration of a Shopify collection page with a filter by color

§ 01 — The brief

What was needed

Brands arrive with a strong design and the same Shopify problems: off-the-shelf themes don’t match it, stores must stay editable by non-developers, and heavy apps slow mobile down.

§ 02 — The approach

What I did

  1. 01

    Design review before code

    Reusable patterns found and hard-to-build parts flagged before scope is agreed.

  2. 02

    Section-based architecture

    Custom Liquid sections and blocks, so the client rearranges pages in the theme editor.

  3. 03

    Consistent styling

    Tailwind with shared tokens for colour, spacing and type.

  4. 04

    Phased delivery

    Homepage first, then collection and product pages, on an unpublished theme copy until approved.

Figma frames → editable Liquid sections.
Figma frames → editable Liquid sections.
Homepage first, feedback while it is cheap.
Homepage first, feedback while it is cheap.
Colour switching and filter by colour.
Colour switching and filter by colour.
From an outdated theme to the latest version.
From an outdated theme to the latest version.
What a typical month covers.
What a typical month covers.

§ 03 — Tech notes

Under the hood

Stack
Liquid sections and blocks · Tailwind with shared tokens
Editing
Pages rearranged in the Shopify theme editor
Workflow
Built on an unpublished theme copy until approved

§ 04 — Results

What changed

  • Several live storefronts delivered from Figma to production.
  • Stores stay editable by the client through flexible sections.
  • Brand names stay private.