New
Merino Crew Knit
$128.00 $160.00
Size
SMLXL
Low stock — 3 left
Design × Engineering
We design the experience and engineer the system behind it
Interface design and frontend engineering handled by one team — so the storefront that ships is the one that was designed, down to the empty states nobody drew.
- Shopify & Liquid
- React · Next.js
- WCAG 2.2 AA
Rendered components, real data
Drag, or use the arrow keys, to move between stages
Production. The rendered result — real components, real data, real breakpoints, shipped to the storefront.
Design and build are the same job here
Most storefront problems are not design problems or engineering problems. They are handoff problems: a layout that assumed data the API never returns, a filter pattern the platform cannot build, a component approved in one state and shipped in nine.
EcomLabs runs both sides. The people setting the product-page hierarchy are the people writing the Liquid and React that render it, so constraints surface while decisions are still cheap.
One product, two disciplines
Two disciplines, one interface
Design
What the customer meets
Structure, hierarchy and the decisions that make a catalog navigable.
- UX architecture and navigation
- Ecommerce journeys and conversion paths
- Wireframes and interface design
- Design systems, tokens and states
- Responsive composition
- Accessibility from the first draft
Engineering
What holds it up
The components, templates and integrations that make the design real and keep it maintainable.
- Shopify theme engineering and Liquid
- React and Next.js frontends
- Component architecture
- Checkout extensibility and apps
- Integrations and product data
- Performance, analytics and QA
Both columns end in the same place: one component, versioned, documented and running in production.
From idea to production
How a storefront actually gets built
Six stages, each with an artifact you can review. Nothing moves forward on a verbal agreement.
- 01
Discover
We audit the current store, its product data, its platform limits and the journeys that carry revenue. Assumptions get written down and checked against analytics before they become design decisions.
OutputAudit, journey map and constraint list
- 02
Structure
Information architecture, navigation and a template inventory: which pages exist, what each has to do, and which components they share. This is where the component strategy is decided, not later.
OutputIA, template inventory, component map
- 03
Design
The interface system takes shape — type scale, spacing, color roles, component states and responsive behavior. Every component is drawn in its loading, empty, error and long-content states.
OutputDesign system and template designs
- 04
Engineer
Components are built in the real platform: Liquid sections and blocks on Shopify, or React components on a custom frontend. Reviews happen in a browser at real breakpoints, not on a static board.
OutputProduction components and templates
- 05
Validate
Keyboard paths, screen-reader output, contrast, reflow at 400% zoom, Core Web Vitals against a budget, and analytics events firing with the right payload. Failures block the release.
OutputAccessibility, performance and analytics sign-off
- 06
Iterate
After launch the numbers decide. We instrument the funnel, look at where it leaks, and change the interface where the evidence points — then measure the change.
OutputMeasured changes and a backlog
From spec to shipped UI
Change the system, the interface follows
This is a real component wired to real design tokens — the same ones this site uses. Change a token and both the interface and the code change with it. That is what a design system does: one decision, applied everywhere it belongs.
Token values
- --space-card
- 20px
- --space-stack
- 14px
- --radius-card
- 15px
- --radius-control
- 100px
- --state
- default
- --viewport
- 1280px
EcomLabs does not throw designs over a wall. We design what can be built, and build what was designed.
Live component
Layout decision
Four columns, filters persistent in a sidebar — browsing is the primary task.
Collection / Desktop1440px
BagsSort
Ecommerce UX surfaces
The surfaces that decide whether people buy
Storefront work concentrates in a handful of templates. Each one needs a design answer and an engineering answer, and they are rarely the same problem.
Navigation & search
- Design work
- Category structure, menu depth, query intent and zero-result handling
- Engineering work
- Menu data, search integration, indexing and result relevance
Collection pages (PLP)
- Design work
- Filter model, sort defaults, card density and scanning rhythm
- Engineering work
- Filter implementation, pagination strategy, collection performance
Product pages (PDP)
- Design work
- Information hierarchy, media, variant clarity, trust and returns content
- Engineering work
- Variant logic, metafields, structured data, media loading
Variants & bundles
- Design work
- Option grouping, unavailable-combination behavior, price communication
- Engineering work
- Variant matrix, inventory rules, bundle and pricing logic
Cart
- Design work
- Friction audit, edit affordances, shipping and discount messaging
- Engineering work
- Cart API, line-item properties, discount and upsell logic
Checkout
- Design work
- Field ordering, error copy, payment and delivery clarity
- Engineering work
- Checkout extensibility, validation, delivery and payment customization
Accounts & B2B
- Design work
- Order history, reordering, company hierarchy and price-list clarity
- Engineering work
- Customer accounts, B2B catalogs, permissions and quotes
Capabilities
What we actually do
UI/UX
Development
UI/UX
UX architecture
Navigation, taxonomy and template structure grounded in how the catalog is actually browsed.
0108
Design system thinking
One decision, applied everywhere it belongs
A design system is not a component library. It is the set of decisions that stop being re-argued, and the layers below make each one traceable from a raw value to a live page.
Foundation
Grid, breakpoints, type scale and the accessibility rules everything inherits.
Tokens
Named values for color roles, spacing steps, radii and motion — the smallest unit anyone changes.
Components
Buttons, inputs, cards and media, each with its states and its owner.
Patterns
Recurring compositions — filter bars, variant pickers, cart lines — assembled from components.
Pages
Templates built from patterns, so a change to a pattern updates every page that uses it.
Production
The live storefront, versioned, documented and maintainable by the team that owns it.
Selected work
View the full portfolioStorefronts we designed and built
Client storefronts and owned products where EcomLabs handled interface work, theme engineering or both.
Client storefrontCanvas LabEcomLabs contributed theme engineering, checkout work, and CRO to this Shopify storefront, supported by private Node.js applications and API integrations.ShopifyLiquidNode.js
Client storefrontBeauty Creations CosmeticsEcomLabs contributed to this Shopify cosmetics storefront, delivering frontend, CRO, and UX work.ShopifyLiquidJavaScript
Client storefrontHerbaland CanadaEcomLabs contributed to this Shopify storefront, delivering frontend, UX, and performance work.ShopifyLiquidJavaScript
Client storefrontCulto CaféEcomLabs contributed Shopify theme and app work to this client storefront, building responsive UI with Liquid, React, SASS, and JavaScript.ShopifyLiquidReact
Client storefrontVeerkampEcomLabs contributed ecommerce storefront frontend work, improving UX, performance, and integrations.ShopifyLiquidJavaScript
Client storefrontLegacy TouchEcomLabs contributed storefront enhancements and ecommerce functionality to this Shopify store, improving UX, performance, and delivery processes.ShopifyLiquidJavaScript
Technology
The stack behind the interface
Chosen per project. We do not add a framework to a storefront that does not need one.
Experience
- Design tokens
- Component library
- WCAG 2.2 AA
- Responsive systems
Frontend
- Liquid
- React
- Next.js
- TypeScript
- Tailwind CSS
Commerce
- Shopify
- Shopify Plus
- Checkout extensibility
- Storefront API
- Admin API
Data
- GA4
- Consent Mode v2
- Structured data
- Product feeds
Infrastructure
- Node.js
- PostgreSQL
- Railway
- CI checks
FAQ
Questions we get before a build
Can EcomLabs handle both the design and the development?
Yes. That is the default engagement: UX architecture, interface design and the production frontend are delivered by one team. You can also take only one side if you already have the other covered.
Can you implement designs we already have in Figma?
Yes. We review the files first for missing states, breakpoints and data edge cases, agree on how those resolve, then build them as components rather than as one-off pages.
Do you only work with Shopify?
Shopify is where most of our storefront work happens, including themes, checkout extensibility and apps. We also build React and Next.js frontends and custom web systems when the project is not a Shopify storefront.
Can you improve an existing store without rebuilding it?
Often, yes. We scope the templates and journeys that actually affect conversion — usually navigation, PLP filtering, PDP and cart — and rework those, leaving the rest of the theme intact.
Next step
Bring us the template that is costing you conversions
Send the store URL and the pages that worry you. We will come back with what we would change in the design, what it takes to build, and in what order — before anyone signs anything.