At a glance
- Theme import
- Not possible. Shopify themes are Liquid; Webflow has no theme import.
- Design
- Copy sections from the live store with Live Capture; they paste as native elements.
- Products
- Webflow Ecommerce imports products and variants from CSV (needs an Ecommerce plan).
- Cart, checkout, login forms
- Paste as plain blocks so they don't post to Shopify. Rebuild with Webflow Ecommerce elements.
- Images
- cdn.shopify.com images are uploaded to your Webflow Assets when you connect your site.
- Responsive
- Shopify's mobile-first CSS is converted to Webflow's desktop-first breakpoints.
Why a Shopify theme doesn't move to Webflow
A Shopify theme is a set of Liquid templates, sections and settings that Shopify renders on its servers with your store data. Webflow has its own page model and its own Ecommerce system, so there's nothing it can import from a theme file.
What you can move is the result: the HTML and CSS your store sends to the browser. Shopify themes are usually written mobile-first (styles for phones, then min-width media queries), often in stylesheets linked with media="screen", and many sizes come from CSS variables. FlowPaste resolves all of that per Webflow breakpoint, so the paste looks like your store at desktop, tablet and mobile.
Store functions are different: product data, cart, checkout and accounts. Those move through Webflow Ecommerce (products by CSV) or stay on Shopify (for example with a buy button), depending on your plan.
Ways to do it, compared
| Method | Editable in Webflow | Responsive | Time for one page | Best for |
|---|---|---|---|---|
| Rebuild with a Webflow Ecommerce template | Yes | Yes | Days for a full store | A redesign, not a move |
| Hire a freelancer to rebuild | Yes | Yes | Days | Whole sites when you have budget (from about $80 a page) |
| FlowPaste Live Capture of your store | Yes: native elements and classes | Yes | 1–3 minutes per section | Keeping your current look |
Product data always moves separately: Webflow's Ecommerce CSV import, or a third-party connector.
How to copy a Shopify section into Webflow
Time: a few minutes per section. You need: your store's URL, the FlowPaste Chrome extension, a Webflow site in the Designer.
Open your store in Chrome
Use the live store or a theme preview link. Close cookie banners and pop-ups so they don't cover the section.
Start Live Capture
Click the FlowPaste icon → Capture an element (or ⌥⇧C / Alt+Shift+C). Allow site access when asked: Shopify serves stylesheets from cdn.shopify.com, and FlowPaste needs them for responsive and hover styles.
Pick the section
Hover and press ↑ until the outline covers the whole Shopify section (each is usually a <section> or a shopify-section wrapper). Click to capture.
Paste into the Designer
FlowPaste copies it automatically. Open your Webflow page, click where it goes and press ⌘V (Ctrl+V).
Connect images
In FlowPaste → Account → Webflow images, connect your site once. From then on, images from cdn.shopify.com are uploaded to your Webflow Assets on paste.
Swap static products for Ecommerce
Product cards paste as static content. Import your products into Webflow Ecommerce, then replace the static grid with a Products Collection List that uses the same classes.
What comes across
| In Shopify | In Webflow | Notes |
|---|---|---|
| Theme sections (hero, image with text, rich text) | Sections and Div Blocks with classes | |
| Mobile-first media queries | Desktop, tablet and mobile breakpoints | Calculated per breakpoint |
| CSS variables (--page-width, --spacing) | Resolved values | Including variables changed inside media queries |
| Product cards and prices | Static elements | Rebind to Webflow Ecommerce |
| Add to cart, cart, checkout, login forms | Plain blocks | So nothing posts to Shopify |
| Newsletter / contact forms | Webflow Form Block | |
| Slideshows and logo carousels | First slide, or a looping marquee | Use Webflow's Slider for a working slider |
| Theme fonts (Shopify font library) | Fonts loaded with the paste | Add them in Site settings → Fonts |
| Images on cdn.shopify.com | Uploaded to Webflow Assets | When your site is connected |
Problems and fixes
Everything stacks in one column
That was a mobile-first layout read at the wrong width. Update FlowPaste and capture again; flex-wrap and column rules are now converted per breakpoint.
Sizes look wrong (very large or tiny)
The theme sizes things with CSS variables set in media queries. Allow site access so FlowPaste reads the theme stylesheet, then capture again.
Images break after publishing
Connect your Webflow site in FlowPaste → Account → Webflow images, then paste again. Webflow only publishes images from its own Assets.
An announcement bar or pop-up came along
Close it before capturing, or press ↓ to select a smaller element before you click.
Moving a whole store from Shopify to Webflow
- Check Webflow Ecommerce fits. Compare payment providers, product and variant limits, apps you rely on and taxes for your country before you start.
- Products. Export products from Shopify (Products → Export), shape the CSV to Webflow's product and variant columns, and import it in Webflow.
- Design. Capture the home page, collection page, product page and footer sections with FlowPaste. Turn the header and footer into Components.
- Templates. Bind the pasted product page layout to Webflow's Product template fields; replace static grids with Collection Lists.
- Pages and blog. Capture static pages; import blog posts into a CMS Collection by CSV.
- Redirects. Shopify uses /products/ and /collections/ paths. Map them to your new Webflow URLs and import the 301 redirects by CSV before switching the domain.
After you paste
- Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
- Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
- Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
- Replace static product cards with Ecommerce Collection Lists.
- Rebuild cart and checkout with Webflow's Ecommerce elements.
- Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.
Questions
Can Webflow import a Shopify theme?
No. Shopify themes are Liquid templates. You can copy the rendered design with FlowPaste and import products by CSV.
Do my products come across with the design?
The product cards come across as a static design. Product data moves with Webflow's Ecommerce CSV import; then you bind the design to it.
Will the add-to-cart button work after pasting?
No, and on purpose: cart, checkout and login forms paste as plain blocks so they don't send anything to Shopify. Use Webflow's Add to Cart element instead.
Can I keep Shopify for checkout and use Webflow for the site?
Yes, many stores do. Copy the design into Webflow and keep Shopify buy buttons or a connector for the cart.
Is it allowed to copy my own store's theme?
Your content and customisations are yours. Check the licence of a paid theme before reusing its design on another platform.
Sources
- Webflow Help: Import/export Ecommerce products and variants
- Webflow Help: Migrate your site to Webflow overview — "migrating to Webflow will be a rebuild, not a transfer"