Udesly — Shopify to Webflow Converter

Webflow Ecommerce takes payments through Stripe and PayPal, and each product is capped at 50 variants built from at most three option sets. Merchants who need Shopify's payment gateways or its variant depth have to run the storefront on Shopify instead. Code export hands you HTML, CSS, JavaScript, and images, but the ZIP leaves out ecommerce data and every Collection List exports empty. Shopify needs a Liquid theme, and writing that Liquid by hand is the step Udesly removes.

Udesly Nexus reads your Webflow export plus a small config file from its Chrome Extension, then generates a Shopify theme with the Liquid already written. Your interactions and fonts survive the conversion, and so do your Webflow CMS elements. A companion Shopify app then imports the pages, articles, and products you built in Webflow into the new store. You keep designing in Webflow while Shopify runs checkout, orders, inventory, and shipping.

Freelancers and small agencies use this path to deliver Shopify stores without learning Liquid. Design-led teams reach for it when a client wants motion a stock Shopify theme cannot reproduce, and the storefront still has to sit on Shopify for payments and fulfillment.

How to integrate Udesly: Shopify to Webflow Converter with Webflow

What is Udesly: Shopify to Webflow Converter? Udesly is a no-code conversion web app, currently released as Udesly Nexus, for Shopify, WordPress, Jamstack, and Ghost projects built in Webflow. The Shopify path pairs the web app with a Chrome Extension that writes element attributes into your project and a Shopify app, published by Eclipse SRL, that imports theme data. The output is a native Shopify Liquid theme.

Teams pair Udesly with Webflow when a store has to run on Shopify while the design stays under the designer's control. The listing name runs opposite to what the product does: Udesly Nexus converts Webflow projects into Shopify themes, not the other way round. Udesly does publish separate tools that move product data into Webflow, and those have their own CSV converters page.

The Udesly-Webflow integration supports three approaches:

• The Udesly Nexus conversion pipeline processes your Webflow export and seeds the store's content without code.
• Custom attributes in Webflow map Shopify-only product, cart, collection, and account features onto specific elements.
• Liquid Elements, plus the Webflow Data API and the Shopify APIs, give you control over theme logic and post-launch data flows, though that path needs server-side development.

Most implementations combine the first two, and only teams that keep a Webflow-hosted site running alongside the store need the third.

Convert a Webflow export with the Udesly Nexus app

The app takes one upload: your exported Webflow project ZIP, plus the config file the extension writes. Udesly's requirements page asks for an active Udesly license, Free or Premium, a Webflow Workspace plan that includes code export, the Udesly Chrome Extension, and the Shopify importer app. No Webflow Site plan is needed, because the finished store is hosted by Shopify.

To set up the integration:

1. Design the project in Webflow using Ecommerce elements. A Workspace plan that includes code export lets you design and export an ecommerce project without ever publishing it.
2. Open the Udesly Chrome Extension on your project, click Configure Attributes, and download the .udesly-config file it generates.
3. Export the project only after running the extension. Open the main menu (the W logo, upper left), choose Code export or press Shift + E, then click Prepare ZIP and download it. Do not rename the ZIP.
4. Upload the .udesly-config file and the Webflow ZIP to the Udesly Nexus app, then run the conversion and download the Shopify theme ZIP alongside the theme data JSON.
5. In Shopify, go to Sales Channels > Online Store > Themes and upload the theme ZIP.
6. Install the Udesly importer from the Shopify App Store and import the theme data JSON, which creates your pages, articles, and products.
7. Adjust theme settings under Sales Channels > Online Store > Themes > Customize.

Conversion normally finishes in under five seconds. It fails when the compressed theme passes 50 MB or the project passes 3,000 translation keys, both capped on Udesly's limitations page. If you go over 50 MB, turn off Webflow responsive images in the conversion settings and let Shopify generate them instead. That same settings page carries a separate warning about the optional extras ZIP you can upload for snippets and assets: the stock Mac zip utility buries .DS_STORE and __MACOSX entries in it that other systems cannot read, so build that archive with a tool such as 7zip. Leave the Webflow export ZIP itself alone, because renaming or repacking it breaks the conversion.

The converter handles these mappings without any attributes on your part:

• Liquid injection: Udesly's how it works page puts it as "It analyzes your theme and adds all the necessary Liquid code, so that you don’t need to!"
• Page routing: every static page becomes a Shopify static page, and every dynamic page becomes an ecommerce page or a blog page.
• Content collections: each Webflow CMS collection becomes its own Shopify blog, custom fields included.
• Customizer sections: Webflow Components turn into Shopify sections, and component properties become typed options such as text, image, URL, checkbox, and color pickers, per the sections reference.

Treat the pipeline as a one-time kickstart rather than a sync. Udesly says the importer is not meant to keep the two platforms in step, every content edit after import happens in Shopify, and any existing Shopify item that already shares a slug is skipped rather than overwritten.

Configure Shopify features with custom attributes in Webflow

Custom attributes tell the converter which Shopify data to render inside a given Webflow element. Most of them are now automatic; Udesly's reading tips note that "Pretty much all custom attributes are disappearing and getting automatic, but for advanced features they are still needed." Basic product data needs no attributes at all because the Shopify App maps it through metafields. You add the remaining pairs in Webflow by selecting an element, opening the Element settings panel, clicking the plus icon under Custom attributes, and entering a Name and Value.

Map Shopify product fields onto Webflow elements

Shopify-exclusive product data such as vendor, SKU, barcode, unit price, tags, 3D models, and recommendations has no Webflow equivalent. The Products reference lists an attribute pair for each one.

To display a Shopify-only field:

1. Select the target element and add an attribute with Name product.
2. Set the Value to the field you need. Use vendor, type, unit-price, variable-price, price-max, or price-min on a Text element; sku or barcode on a Div; and tags on a Text or Link element, with an optional limit attribute for the tag count.
3. For media, add a placeholder element with Value external-video, video, videos, or model, each of which needs your own CSS to size it. For one specific image, use image on an Image or a Div background plus an index attribute, and for the whole gallery use images on an Image, Div, Slider, or Lightbox link.
4. For product recommendations, add Name shopify and Value recommended to a Collection List Wrapper. The list defaults to 4 products and a limit attribute raises it, but Shopify returns at most 10, so a higher number breaks the block.

Recommended products load through JavaScript after the page renders, so interactions on them restart automatically, and you can hook the Udesly.on("webflow-restarted", ...) event for your own scripts.

Build the cart page

A static page with the slug cart gives the converter the page it needs to wire Shopify's cart at build time. Webflow has no equivalent element, so the whole cart is assembled from custom attributes that the Cart reference lists in full.

To build the cart:

1. Create a static page with the slug cart.
2. Add a Form element and set its Form Name to Cart in Element settings.
3. Add a Div with Name cart and Value items as the line-item repeater. Inside it, add elements with Name item and Values such as title, featured-image, price, quantity, remove, vendor, or properties.
4. Add Text elements with Name cart and Values total-price, total-discount, original-total-price, or total-weight, a Textarea whose field name is note for cart notes, and a Submit button carrying the update-button attribute.

Checkout itself stays on Shopify's hosted pages. Udesly's limitations page is blunt about the ceiling: the checkout is not modifiable, and even uploading a CSS file for it needs a Shopify Plus plan.

Wire up collections, blogs, and customer accounts

Converted collections, blog URLs, and customer accounts resolve under Shopify's routes, which can differ from your Webflow slugs. The theme setup guide documents the slugs and attributes that make each one resolve.

To connect them:

1. Give your Categories Template a Collection List of products with no sort, the filter Categories contains Current Category, and pagination on. It converts into a Shopify collection page.
2. Give the List Collections page the slug list-collections and the main shop page the slug collection-all. A separately styled collection uses the slug collection-{template name} and is then picked per collection in Shopify.
3. Link to a converted blog by adding data-shopify-link with Value blog-{cms collection slug}. Unlink a Collection List from product mapping by adding data-shopify-collection-item with Value product.
4. Point login and registration links to /customers/login and /customers/register, then enable customer accounts in Shopify, which the account docs note are disabled by default. Login, registration, password reset, and address elements each need their own attributes.

Webflow User Accounts were disabled on January 29, 2026, so Shopify customer accounts are the only login layer available to a converted store.

Extend a converted store with Liquid Elements and the Webflow and Shopify APIs

Udesly documents no public API, API key, or webhook interface of its own, so anything the converter cannot infer is written as Liquid Elements inside Webflow. Teams that keep a Webflow-hosted marketing site or blog beside the Shopify store move data between the two with Webflow's Data API and Shopify's Admin GraphQL API instead. That second path needs your own middleware, because both APIs authenticate with secrets that have to stay server-side.

The available interfaces are:

• Udesly Liquid Elements: the Liquid reference injects raw Liquid through the liquid:if, liquid:unless, liquid:for, liquid:object, and liquid:tag attributes
• Webflow Data API: it creates CMS items, reads collection schemas, and lists form submissions
• Webflow webhooks: the documented event types push form submissions, publishes, and CMS changes to your endpoint as they happen
• Shopify Admin GraphQL API: the Admin API covers customers, products, and webhook subscriptions on the store side

Build anything new on GraphQL: Shopify records that the REST Admin API became a legacy API on October 1, 2024.

Inject Liquid with Liquid Elements

Liquid Elements exist for the Shopify features the converter cannot infer, and third-party Shopify apps are the usual reason you need them. Udesly's own FAQ says you can use those apps, but that you will probably have to drop Liquid code or a snippet somewhere.

To inject Liquid:

1. Select the element in Webflow and open Custom attributes in the Element settings panel.
2. Add liquid:if, liquid:unless, or liquid:for to wrap the element in a Liquid control block, following the value syntax in the Liquid reference linked above.
3. Add liquid:object or liquid:tag where you need a Liquid object or tag rendered in place.
4. Run the Chrome Extension, export, and reconvert so the new Liquid lands in the theme.

Test every app dependency this way before you commit to the stack. Udesly's limitations page still lists third-party app support as an area that needs better documentation, and rates sections conversion as short of the older app's feature parity, so an app that expects to inject its own blocks is the case most likely to need hand-written Liquid.

Route Webflow form submissions into Shopify customers

A live Webflow form can send submissions to the Shopify customer list through a webhook and a short middleware function. Forms inside the converted theme submit to Shopify.

To implement this:

1. Register the webhook with POST https://api.webflow.com/v2/sites/{site_id}/webhooks and send triggerType: "form_submission" and your middleware url; this needs the sites:write scope, per the webhook create reference.
2. Verify each delivery by computing HMAC-SHA256 over timestamp + ":" + JSON.stringify(request_body) using your OAuth app's client secret or the site token secret, then reject anything whose x-webflow-timestamp is more than 5 minutes old, as the webhooks guide sets out.
3. Read the form submission payload, which carries the field values in data, the form name in name, and submittedAt.
4. Call the customerCreate mutation at POST https://{shop}.myshopify.com/admin/api/{version}/graphql.json with an X-Shopify-Access-Token header and the write_customers scope, passing email, phone, firstName, lastName, and emailMarketingConsent.

The reverse direction works the same way: subscribe to PRODUCTS_UPDATE or ORDERS_CREATE with Shopify's webhookSubscriptionCreate, verify the X-Shopify-Hmac-SHA256 header, and write the changes back with PATCH https://api.webflow.com/v2/collections/{collection_id}/items, which takes the CMS:write scope and a maximum of 100 items per request.

What you can build with the Udesly Webflow integration

The build types below all fall out of the conversion itself, so none of them need a developer once the theme is in Shopify.

Four patterns come up repeatedly in converted stores:

• Motion-heavy storefronts: Anevis, an activewear store for women based in New York, was developed in Webflow and then imported into Shopify through Udesly because "the client wanted custom logo animations", which a stock theme could not carry, per its Made in Webflow entry.
• Merchant-editable sections: build the repeated parts of the page as Webflow Components, and the merchant edits their text, images, links, and colors from the Shopify customizer without reopening Webflow.
• Editorial content beside the catalogue: every Webflow CMS collection lands as its own Shopify blog with your custom fields intact, so guides, lookbooks, and expert pages keep their structure after the move.
• Per-product and per-collection templates: a static page slugged product-{template name} or collection-{template name} converts into an alternate Shopify template you assign product by product, which is how a single store carries several page designs.

Other people's converted stores are browsable in the Made in Webflow gallery, and several are cloneable. If you would rather keep Webflow as the front end and pull the catalogue across instead of converting, read our guide to syncing Shopify products into the Webflow CMS.