How to import a Shopify store into Figma

A Shopify storefront is a living thing. It's a theme, dozens of product pages, and a handful of apps bolting widgets onto every screen — reviews here, an upsell there, a discount popup over the lot. Almost none of it has a Figma file sitting behind it. So when the job is to redesign a store, or simply to audit one before you quote the work, the quickest start isn't re-tracing screens by hand. It's pulling the live storefront into Figma as editable layers and working from what's actually on the page.

Why import a Shopify store into Figma

If your work touches Shopify, a Figma copy of the live store earns its place fast. A few situations come up over and over:

• Redesigning a theme without fighting the theme editor. Shopify's customiser is good for shipping, less good for exploring. Pull the live storefront into Figma and you can rethink the layout freely — move sections, retype headings, try a new product card — without touching the live theme until you're sure.
• Auditing a client's store. Before you scope a redesign, you need to see what's really there — the type scale, the spacing, the state of the product page. Importing the live pages gives you a measured, editable record to mark up and quote against.
• Building a design file for a store that never had one. Plenty of stores were built straight in a theme and never drawn in a design tool. The import gives you a faithful starting file to brand against, extend, or hand to the next designer.
• Mocking up a new product-page layout. Designing a fresh template lands better when you can put it next to the real one. Import the current product page, set your redesign beside it, and the comparison is honest.

Import a Shopify store, step by step

Every Shopify page is just a public URL, which is all the importer needs. The flow is short, but a storefront has a couple of quirks worth handling before you run it:

1. Open the page you want. Decide which screen you're importing — the homepage, a collection listing, or a single product page. Each one imports on its own, so open the exact page you mean to redesign.
2. Dismiss the cookie banner and any promo popup. Most stores greet you with a consent bar and an email-signup or discount popup. Close them first so they don't land on top of the page as their own layers.
3. Let the page settle. Scroll down once so lazy-loaded product images and any below-the-fold sections actually load, then return to the top. A grid that hasn't loaded imports empty.
4. Run the importer and choose URL. In Figma, open Vellum, pick URL as the source, and paste the link.
5. Pick a width. Choose the viewport you're designing for — a desktop width to start, or a narrower one for the mobile layout — and let it render to a frame of editable layers, not a flat image.

Repeat per page type: homepage, collection, product. For the wider picture of every way into Figma — paste, file, or live URL — see how to import a website into Figma. And if you want the desktop and mobile storefronts side by side, importing a responsive site covers capturing each width as its own frame.

What imports cleanly

Shopify is friendlier to an importer than it might look. Themes are written in Liquid, but Liquid is a templating language — by the time a page reaches the browser it has rendered to ordinary, standards-based HTML and CSS. There's nothing exotic for the importer to wrestle with:

• Structure as frames. Theme sections — the hero, the featured collection, the product grid, the footer — become frames positioned exactly where the theme drew them, nested the way they're stacked.
• Text with the right fonts and weights. Product titles, prices, descriptions, and headings stay live and editable, carrying their actual family and weight rather than collapsing to a default.
• Product imagery as image fills. Photos and background-image assets download and embed as proper Figma image fills, at the size the theme rendered them.
• Gradients and shadows. The decorative layer — linear-gradient banners, box-shadow depth on cards — arrives as real Figma effects, not baked into a picture.

It holds together because the importer measures the render, not the theme. Whatever pixel values the Liquid produced by the time the page is on screen are exactly what it reads. If the theme drew a product card at 312 pixels wide, the import is 312 pixels wide.

What to watch for on Shopify

The theme itself imports well; it's the things bolted around it that need a moment of care. An importer can only capture what the browser actually painted, so a little staging goes a long way:

• Cookie and consent banners. The consent bar sits over the page and will import as its own layer if you leave it up. Accept or dismiss it before you run the importer.
• Promo and email-signup popups. Discount modals and newsletter prompts often appear a few seconds in. Close them first, or they'll land centred over the layout you actually wanted.
• Lazy-loaded product grids. Collection pages defer images until you scroll near them. If a grid looks half-empty, scroll it into view and let it finish loading before importing.
• The sticky header and cart. A header or cart drawer that follows the scroll is captured wherever it sits when you import. Scroll to the top first so it lands in its resting position.
• App-injected widgets. Reviews, upsells, and "frequently bought together" blocks are added by apps and often load late. Give the page a beat so they're on screen before you capture it.
• Variant pickers and quantity steppers. These come in at their current state — the selected swatch, the quantity shown — as static layers, not interactive controls. You get the resting view, ready to restyle.

The rule of thumb is the same one that applies to any site: whatever the theme rendered from real markup converts cleanly; whatever an app pops over the top, or animates in late, is the part you settle before you import.

After import: redesign or audit

Once the storefront is layers, it's yours to work with. You can redesign the theme in place — retype the product copy, recolour the buttons, rework the spacing, swap the type — which is exactly the starting point for a refresh; redesigning a website in Figma walks through that. Or you can leave the pages as they landed and treat them as an audit surface: a faithful, editable record of the store's type, spacing, and product layout today, ready to annotate and quote from.

The bottom line

A Shopify store is more moving parts than a typical site — a theme, a product catalogue, a stack of apps — but underneath, it renders to clean HTML and CSS, which is exactly what a measuring importer wants to read. Close the popups, let the product images load, and you'll have an editable Figma file of the live storefront to redesign or audit from — built from the real page, not redrawn from a screenshot.