Figma to Webflow

Loom & Ember

A streetwear ecommerce store built on real Webflow Ecommerce, with live product variants and a genuine checkout.

Year
2026
Scope
Figma to Webflow build. Full storefront, product pages with variants, Webflow Ecommerce, Client-First structure, CSS Grid layouts, Relume components modified to the design.
Client
Tahi Studio
View live site
Loom & Ember's homepage, About page and product page shown side by side

Project Details

Built as an actual shop, not a shop-shaped website

Loom & Ember is a streetwear store built for Tahi Studio as a Webflow Marketplace template. The brand is invented. The shop is not. It runs on Webflow Ecommerce with real products, real variants and a checkout that completes.

Building to Marketplace standards moves the goalposts on what finished means. A client build is finished when the client is happy with it. A template is finished when a stranger can buy it, open it in the Designer and work out how it fits together with nobody to ask. Every class has to earn its name and every breakpoint has to hold, because there is no handover call afterwards to explain the parts that do not.

It was built to that standard rather than submitted to the Marketplace. A listable template was the brief, and that is the bar the build was held to.

The design came to me as a Figma file. I built the storefront, the product pages and their variants, the cart and checkout flow, and the 404.

  • Products and variants added without a developer
  • Product photography given room to work
  • A checkout that behaves predictably on mobile, where most of the traffic is
  • A layout that still reads properly with four products in it or with forty
Loom & Ember product page with jacket photos, size and colour options, and add to cart

Early exploration

Sketches and wireframes

Building for someone you will never meet. On a client build you can ask. On a template you cannot. Whoever buys this has different products, a different number of categories, different photography and a different appetite for opening the Designer at all. The structure has to survive all of it, which rules out any shortcut that only works because of the content that happens to be in there today.

First time on Webflow Ecommerce. I had not built on Webflow Ecommerce before this one. Product pages, the cart and the checkout are partly Webflow's and only partly mine, so the parts you control have to sit convincingly next to the parts you do not.

Product variants were the real work. They have limits you only find once you are inside them, and a good chunk of the build was working out what the variant system would and would not do, then shaping the product architecture around that instead of against it. On a client build you could have gone back and changed the brief. On a template the buyer inherits whatever you decide here.

The photography has to carry it. Streetwear sells on the image. The layout needed to give product shots room without falling apart when a buyer drops in photography at a different crop, a different ratio or a lower quality than the ones it was built with.

Loom & Ember Shop the Drop carousel showing a hoodie and a bomber jacket

Working through the structure

Project results

Real products, real variants. Built on Webflow Ecommerce rather than a CMS collection dressed up to look like a shop. Products carry their own variant options and the checkout completes. Whoever buys it can add their own stock on day one without needing a developer.

Client-First naming throughout. On a client build a readable class system is good practice. On a template it is part of what is being sold, because the buyer inherits the naming whether they like it or not and has to work inside it forever.

CSS Grid instead of stacked blocks. Grid for the product listings and the main layout sections, so the page still reads properly with four products in it or with forty. A template that only looks right at the product count it was built with is not finished.

Relume components, taken apart. The interactive sections started as Relume components and got rebuilt rather than dropped in. Relume gets you to a working structure quickly, which matters when the page count is the problem, but shipped untouched it looks like every other Relume build. The work is in what you change afterwards.

Loom & Ember manifesto section with three cards: Live Loud, Burn Bright and Be Bold

The finished system

other projects

Need a Webflow site built, fixed or migrated?