Webflow → Shopify
Export Webflow products from the Designer and reshape that CSV into Shopify's product file. The Webflow file is Webflow's schema. Shopify creates products from its own columns, and it fetches images from URLs that have to stay public.
Should you make this move?
Both platforms have a case. Compare what you gain with what you give up before scheduling the cutover.
Webflow
- Visual design, CMS, hosting, and interactions give designers strong production control
- Editors get a purpose-built publishing workflow instead of raw files
- Pricing, collection limits, and proprietary structure constrain portability
- Themes, extensions, and content models add maintenance and portability constraints
Shopify
- A polished hosted commerce platform has an unmatched app and partner ecosystem
- Core catalog, order, customer, and promotion workflows are integrated
- Transaction economics, app dependency, and checkout constraints reduce control
- Deep customization usually increases extension, agency, or engineering costs
Shopify: A polished hosted commerce platform has an unmatched app and partner ecosystem. This removes a major source-side concern: Pricing, collection limits, and proprietary structure constrain portability.
What you lose: Visual design, CMS, hosting, and interactions give designers strong production control. What you inherit: Transaction economics, app dependency, and checkout constraints reduce control.
Jump to a section
Know the shape of the move.
This timeline assumes
- You can open the Webflow Designer and export products. Webflow says product import and export happen in the Designer, with a 4MB CSV cap.
- You will rebuild the storefront in a Shopify theme. The product CSV is not the Designer layout.
- Webflow stays online until Shopify has downloaded product images. Shopify says image columns are URLs, used only during import, and the files have to remain on a public site.
- Orders, customers, discounts, and checkout settings are outside the product CSV. Confirm those exports in your current Webflow plan before you promise them.
- You will not sort the Shopify CSV in a spreadsheet. Shopify warns that sorting can detach variants and image URLs.
What survives the move.
“Partial” and “manual” are not footnotes. They are work that must be scheduled and verified.
| Item | Outcome | Impact | What happens | Mitigation |
|---|---|---|---|---|
| Products and variants | partial | critical | Webflow exports products, variants, and categories to a CSV whose columns match Webflow's own importer. Shopify wants its header row. For a new product, Title is required. A product with variants also needs the handle. Variant rows repeat the handle and leave Title, Description, Vendor, and Tags blank. | Build a column map and a pilot file with one simple product and one variant product. |
| Categories | partial | high | Webflow includes categories in the ecommerce export. Shopify collections are not that column. You map category values onto tags or collections on purpose. | Decide the mapping before the full file. Check one product in a collection. |
| Images | partial | critical | Both systems put image URLs in the CSV, not the file bytes. Shopify creates the image only while that URL still answers. Webflow's CMS export also emits Webflow-hosted URLs. | Leave the Webflow site up through the import. Open a sample image on the Shopify product. |
| CSV size | partial | high | Webflow's ecommerce and CMS CSV uploads are documented at 4MB. A large catalog may need more than one Shopify file even when Webflow exported it as one. | Split on product boundaries, never in the middle of a variant group. |
| CMS collections | partial | high | Webflow exports each CMS collection separately. Rich text becomes HTML. Images and files become URLs. Reference fields become text, and multi-references become a comma-separated list. The export is the current locale only. | Map blog posts and other collections one by one. Do not assume they rode along with the product file. |
| Design, interactions, and checkout | manual | critical | The ecommerce CSV does not contain the Designer, the cart, or checkout. Shopify checkout is Shopify's. You rebuild the theme and the payment settings. | Treat the theme as its own project. Place a test order before DNS. |
| Orders and customers | manual | critical | Shopify's product CSV help describes products, variants, and images. It does not create orders or customer accounts. Passwords are not in a product file. | Scope history separately. If you cannot find an export in your Webflow project, say so before cutover. |
| Discounts and subscriptions | manual | high | They are not columns in the product export Webflow documents. | Recreate the discounts you still run. Place an order that uses one. |
| Locales | partial | high | Webflow's CMS export is per locale view. A single CSV is not every language. | Export each locale you sell in, and check one product in each. |
| Handles and URLs | manual | critical | Shopify builds the product URL from the handle. Webflow's path can differ. Neither CSV writes the redirect for you. | Make a redirect for every product and collection URL you still need. Test them before DNS. |
Where each thing goes.
| Source | Destination | Method | Notes |
|---|---|---|---|
| Webflow product name | Title | transform | Required when you create products. |
| Webflow slug | Handle | transform | Required on variant rows. This becomes the Shopify URL. |
| Variant row | Following CSV rows with the same handle | transform | Leave Title and body empty on those rows, as Shopify describes. |
| Price, SKU, and inventory | The matching Shopify columns | transform | Pilot one SKU before the full file. |
| Image URL | Image Src | transform | The Webflow URL must stay public during import. |
| Category | Tag or collection | manual | Not an automatic collection. |
| CMS rich text | HTML in a blog body or a metafield | transform | Collection export is a separate file, current locale only. |
| CMS reference | Text, then a metafield or link you build | manual | Webflow exports references as text. |
| Designer layout, order, or customer password | No destination | unsupported | Not in the product CSV. |
Make the move recoverable.
Create the source-of-truth backup
Keep Webflow's CSV and the live site until Shopify has its own copies of the images.
- Export products, variants, and categories from the Designer.
- Export each CMS collection you still need, once per locale.
- Save the files without sorting them.
- Write down product counts and a list of image URLs.
Proof to capture: The product CSV opens, the row groups match Webflow's product count, and Webflow still serves the images.
Shopify product file
Map Webflow columns onto Shopify's header without splitting a product from its variants.
- Start from Shopify's column list, not from Webflow's header.
- Put the full product on the first row and variants on the following rows.
- Copy image URLs through unchanged.
- Save UTF-8 with LF linefeeds, which is what Shopify asks for.
Proof to capture: Save the input, output, command or tool settings, warnings, and final item counts.
Pilot import
See images, variants, and one collection on a staging Shopify store.
- Import two products, one of them with variants.
- Open the images and the variant prices.
- Fix the mapper.
- Only then import the full catalog.
Proof to capture: Save the input, output, command or tool settings, warnings, and final item counts.
The things most likely to hurt.
These are operating limits. Treat every “Stop if” condition as a blocked migration, not a suggestion.
The Webflow header is uploaded as if it were Shopify's
The import fails, or products land in the wrong columns.
- Consequence
- The catalog is wrong.
- Mitigation
- Map to Shopify's header and pilot two products.
Stop if: The pilot products do not match Webflow.
Images are imported after Webflow is gone
Shopify stores empty images because the URL 404ed.
- Consequence
- Products go live without photos.
- Mitigation
- Keep Webflow public until every image has been fetched.
Stop if: A sample image is missing.
A spreadsheet sort splits variants
Shopify warns that sorting can separate variants and image URLs from the product.
- Consequence
- You overwrite products with bad rows.
- Mitigation
- Build the file with a script or a stable order. Do not sort it.
Stop if: A variant sits on the wrong product in the pilot.
Do the work in this order.
- Days 1 to 3 · inventory
Count products and pages
4 to 8 hours active2 to 3 days elapsedStore owner waiting- Export a product CSV and count products.
- List collections, locales, and whether you can export orders.
Depends on: Webflow Designer, Shopify admin
Stop / go checkpointMap columns?
Go when: You have a count and a yes or no on orders.
Stop when: The export is over 4MB and you have no split plan.
- Days 3 to 4 · backup
Save the exports
2 to 4 hours active1 day elapsedDownloads waiting- Store the CSVs unsorted.
- List image hosts.
Depends on: Approved scope
Stop / go checkpointBuild the pilot file?
Go when: The CSV product count matches Webflow.
Stop when: The count is short.
- Days 4 to 12 · pilot
Two products and a theme slice
12 to 30 hours active4 to 8 days elapsedTheme work waiting- Import two products.
- Open images and variants.
- Start the theme and a test payment.
Depends on: Verified export
Stop / go checkpointImport the catalog?
Go when: The two products match, including images.
Stop when: A variant or image is wrong.
- Days 12 to 16 · cutover
Full catalog and DNS
6 to 16 hours active2 to 4 days elapsedImage fetches and DNS waiting- Freeze Webflow products.
- Import the final file.
- Test redirects and one order, then switch DNS.
Depends on: Passed pilot
Stop / go checkpointSwitch DNS?
Go when: Counts match, images load, and the test order succeeds.
Stop when: Webflow is still editing products, or the test order fails.
- Days 16 to 25 · observe
Watch the shop
4 to 12 hours active4 to 9 days elapsedReal orders waiting- Watch checkout and 404s.
- Keep Webflow online while images and rollback still matter.
Depends on: Verified cutover
Stop / go checkpointClose Webflow?
Go when: Orders work and the checks stay green.
Stop when: A product, tax, or redirect fails.
Cut over with a way back.
Cutover
Sell on Shopify while Webflow can still serve the old image URLs.
- Freeze Webflow product edits.
- Export the final CSV and rebuild the Shopify file.
- Import it and compare the product count.
- Place a real test order, including shipping and tax.
- Switch DNS and leave Webflow up.
Proof to capture: The Shopify product count matches, sample images load from Shopify's CDN, and the test order is paid.
Rollback
Point the domain back at Webflow.
- Stop Shopify ads or other channels that create orders.
- Restore DNS to Webflow.
- Export any Shopify order that happened after the switch.
- Recreate those orders in Webflow only if you have a process for that. The product CSV will not do it.
- Confirm a Webflow product page and checkout load.
Proof to capture: Webflow is the live shop, and any Shopify-only orders are listed.
- Product counts do not match
- Sample images are missing
- The test order fails
- A priority old URL 404s
Prove the migration worked.
Every blocking check must pass. Capture the evidence before cleanup begins.
| Pass | ID | Check | Method | Expected result | Evidence |
|---|---|---|---|---|---|
V-01Blocking | Product count | Compare Webflow with Shopify. | The counts match, including hidden or archived items you meant to keep. | Count sheet | |
V-02Blocking | Options and SKUs | Open a multi-variant product. | Options, prices, and SKUs match the source row. | Variant sample | |
V-03Blocking | Photos | Open every image on a sample of products. | They load from Shopify after the import. | Image sample | |
V-04Blocking | Pages and posts | Compare collection counts per locale. | The collections you scoped are present. | CMS sheet | |
V-05Blocking | Test order | Buy one product with the payment method you will use. | The order is paid and the confirmation arrives. | Order receipt | |
V-06Blocking | Redirects | Request old product URLs. | They land on the Shopify product. | Redirect log | |
V-07Blocking | A priced page | Check tax and shipping on the test order. | They match the rules you configured. | Tax note | |
V-08Blocking | Webflow still up | Load a source image URL. | It still answers until you deliberately turn the site off. | URL check |
Remove the scaffolding safely.
Safe after: Shopify has taken real orders and you have copied any history you still need off Webflow.
- Archive the Webflow CSVs and the Shopify file you imported.
- Remove the test product or refund the test order.
- Keep Webflow published until image imports and rollback are finished.
- Then unpublish it on the date you set.
- Cancel Webflow ecommerce only after that.
Verify against the primary material.
Platform behavior changes. Check these sources and the review dates above before executing a production migration.
- Webflow: import and export ecommerce productsAccessed 2026-11-05
- Webflow: CMS collection CSV import and exportAccessed 2026-11-05
- Shopify: product CSVAccessed 2026-11-05