How to compare your Figma design against a Shopify store

How to compare your Figma design against a Shopify store

You can compare a Figma design against a live Shopify store the same way you'd compare against any other website: point a comparison tool at the Figma frame and the Shopify URL, and let it check what's different. The store doesn't need special configuration. If it's reachable in a browser, it's ready to compare.

Why Shopify implementations drift from the design

Shopify themes sit between the design and the browser. A Figma frame shows the intended layout. The Shopify theme translates that into Liquid templates, theme settings, and CSS that Shopify's rendering pipeline then turns into a live page. Every layer in that chain introduces room for things to shift.

Some of the most common sources of drift in Shopify stores:

Theme architecture forces compromises. Shopify themes use sections and blocks with their own spacing and layout rules. A designer might specify 48px between sections in Figma, but the theme's section padding defaults to 36px and a merchant later adjusts it to 60px through the theme editor.

App CSS bleeds in. Third-party Shopify apps inject their own stylesheets. A reviews widget or upsell popup can override typography, alter spacing, or introduce z-index conflicts that weren't part of the original design.

Dynamic content changes dimensions. Product titles vary in length. Description blocks expand. Collection grids shift depending on how many products exist. The Figma design shows one state. The live store shows whatever the actual data produces.

Responsive behaviour diverges. Figma frames are fixed-width. Shopify themes are fluid. The gap between what the design shows at 1440px and what the theme renders at 1440px can be subtle but real, especially around text wrapping and image aspect ratios.

What the comparison checks

A property-level comparison reads both the Figma frame and the live Shopify page, then reports the differences as specific values. Not a visual overlay you have to squint at. Actual numbers.

Typography: the Figma design specifies Inter at 16px/24px. The Shopify page renders Inter at 16px/22px. The line-height is 2px off. That's a finding you can act on.

Spacing: a card component should have 24px padding. The theme renders 20px because the section block overrides the value. The comparison shows the exact delta.

Colours: the design specifies #1A1A1A for body text. The theme's CSS applies #333333. Close enough to miss by eye. Specific enough to catch with a property comparison.

Dimensions: a hero image should be 600px tall. The Shopify image section renders it at 580px because of the theme's max-height constraint.

Comparing password-protected and development stores

Shopify development stores and stores behind a password page aren't publicly accessible. A web-based comparison tool can't reach them. A browser extension can.

If you're logged in to the Shopify admin and viewing the store through the storefront password, a browser extension runs in that same session. It sees the page the way you see it. No tunnelling, no special configuration. The same applies to development stores on a Shopify Partner account.

This means you can run comparisons during development, before the store is live. The earlier you catch drift, the cheaper it is to fix.

When to run comparisons on a Shopify store

Three moments matter most:

Before theme launch. After the initial build, before handing the store to the merchant. This is the cleanest comparison point: the design is fresh, the content is controlled, and any differences are implementation gaps rather than merchant customizations.

After app installations. Every new Shopify app is a potential source of CSS interference. Running a comparison after installing a reviews app, upsell widget, or popup tool catches unintended visual side effects.

After theme updates. Shopify theme updates can reset custom CSS or change default spacing values. A comparison after updating the theme version shows what shifted.

The useful comparison isn't "does it look right." It's "what specifically changed, and by how much." That's the difference between an opinion and a finding.

Uiprobe compares Figma designs against any live webpage, including Shopify stores. For password-protected or development stores, use the Chrome Extension to run comparisons from inside the browser.