Webflow is unbeatable for design. Shopify is unbeatable for commerce. So what do you do when a client wants a Webflow-quality storefront running on Shopify's checkout and product engine? You build it in Webflow, then convert it to a Shopify theme with Udesly.

This is the full, tested walkthrough — every step from extension to live theme, plus the gotchas we hit so you don't have to.

What you'll need

• The Udesly Chrome extension
• A Udesly account (udesly.com/app)
• Your Webflow project with code export enabled
• A Shopify store, plus the Webflow Importer Shopify app

Step 1: Configure attributes with the Udesly extension

• Install the Udesly Chrome extension. If you just installed it, refresh the Webflow page so Udesly can inject its script.
• Open the Udesly extension and click Webflow to Shopify (configure attributes), then let it do its magic.
• It automatically downloads a website.udesly-config file — keep this handy for Step 3.

Step 2: Export your Webflow code

In Webflow, click Export Code, download the zip, and extract it.

Step 3: Convert in the Udesly app

• Go to udesly.com/app and select the Webflow to Shopify option.
• Upload the website zip you just exported. Under theme configuration, upload the website.udesly-config file from Step 1, then click Convert. (No need to add additional assets.)
• Click the purple download button to get the Shopify theme zip (website.zip). Then click Download data (just below it) to get the Webflow assets file (website.json).

Step 4: Upload the theme to Shopify

• In Shopify, open Online Store from the right-side menu.
• Scroll down to Theme library and click Add theme.
• Upload website.zip (the file from Udesly), then publish the theme.

Step 5: Import your assets with the Webflow Importer

• Go to Apps in the left menu and search for Webflow Importer.
• Upload the website.json file you downloaded from Udesly.

Once it's imported, the site is set. One important note: if you make any changes later, you have to repeat this entire process from the start — including re-uploading the JSON.

Step 6: Style the checkout page

After adding the JSON, the checkout page needs styling to match your brand:

• On the Online Store page, click Customize.
• Open the Checkout page.
• Click Theme settings in the top-left corner.
• Set the Logo, Main content area background, Order Summary background, and Accents & Button colors to match your design.

Issues and things to watch out for

A few problems come up consistently during migration. Here's how to handle them.

Mini-cart not closing after export. Add this CSS under Shopify's Custom CSS (or your Webflow site settings):

.w-commerce-commercecartcontainerwrapper[style*='opacity: 0'] {
  display: none;
}

Forms won't submit. Make sure every field inside a form has a name="" attribute — without it, the form silently fails to submit.

Webflow product-page functionality breaks. Anything you built against Webflow's product-page DOM may not behave the same on Shopify. Rebuild that functionality against the Shopify product-page DOM instead.

Product content doesn't transfer. Product descriptions and prices have to be typed in manually in Shopify.

Video syntax error after export. Videos with codecs come out of Udesly with a malformed type attribute. Copy the correct type value and replace it everywhere a video with codecs appears:

<source src="videolink" type='video/mp4; codecs="hvc1"'>

That's the whole pipeline. It's a few moving parts, but once you've run it once, converting a Webflow build into a polished Shopify storefront becomes routine. If you'd like this done for you — Webflow design, Shopify power, none of the headaches — reach out to us.