PetLabCo
Figma → Shopify Liquid: three pixel-matched, fully responsive custom product-page sections
Client
PetLabCo
Industry
Pet Health / Supplements DTC
Year
2026
Scope
Shopify · Liquid · Figma to Liquid · Responsive
0 custom
Sections built
Figma → Liquid
Source
0 → 1440px
Responsive
0
Year
The challenge
PetLabCo is a US-manufactured pet supplement brand — dental powders, chews, and supplements sold subscription-first to a large DTC audience. A designer handed off a polished Figma for a new product-page layout that needed to become real, maintainable Shopify sections without disrupting the live store.
The build had to be a faithful, pixel-accurate translation of the design — correct type scale, spacing, and imagery — and hold up cleanly across every breakpoint from small phones to wide desktop, all inside the existing Dawn theme.
Approach
01
Figma → Liquid, pixel-matched
Rebuilt each of the three sections directly from the Figma — matching type scale, spacing, color, and imagery — as clean, hand-written Liquid rather than a page-builder approximation.
02
Fully responsive
Tuned every section across mobile, tablet, and desktop, tested at 360 / 414 / 768 / 1024 / 1440px, so the layout holds from small phones to wide screens.
03
Safe staging workflow
Built on a duplicate of the Dawn theme so the live store stayed untouched, shared a staging preview for review, and backed up the previous theme before pushing the approved work live.
04
Clean, owned code
Delivered hand-written Liquid the client owns outright, structured so the sections drop into the product-page template through the theme editor.
Results
Three custom product-page sections shipped, pixel-matched to the Figma
Fully responsive across mobile, tablet, and desktop
Built and delivered via safe staging, then pushed live with a theme backup
Clean, client-owned Liquid — no page-builder lock-in
Stack
ShopifyLiquidDawn ThemeFigma to LiquidResponsive