Liquiflow

You get full visual control over layout and typography in Webflow, along with control over animation. A Shopify storefront, though, runs on Liquid templates, while a visual export generates Webflow code. Publishing a Webflow design as a native Shopify theme normally means rebuilding it by hand in Liquid. Liquiflow removes that rebuild step.

Liquiflow converts exported Webflow code into fully working Shopify 2.0 themes and sections. You add custom attributes to elements in Webflow, and Liquiflow generates the matching Liquid at conversion time. Merchants manage their products and content in Shopify, where checkout also remains, while the storefront keeps your Webflow design.

Shopify and Webflow agencies and freelancers use this integration. It also suits merchants with in-house development or marketing teams. Designers keep working visually in Webflow instead of writing Liquid templates. Marketing teams get sections they can edit directly in the Shopify theme editor. Some knowledge of both Webflow and Shopify Liquid helps you get the most from it.

How to integrate Liquiflow with Webflow

What is Liquiflow? Liquiflow is a Webflow-to-Shopify theme conversion tool built by Halbstark GmbH, a German Shopify and Webflow agency. It reads custom attributes on Webflow elements and converts exported code into native Shopify 2.0 themes or standalone sections. The product was previously named Liquify Pro.

You integrate the two by tagging Webflow elements with li- attributes, then converting the exported code into Shopify theme files with Liquiflow.

Teams reach for this combination when a merchant needs Shopify's checkout and app ecosystem but wants a storefront designed in Webflow. Liquiflow moves the Webflow design into Shopify. Data flows one way, from Webflow into Shopify. Converted themes meet Shopify theme development standards, so Shopify App Store apps keep working after conversion. The integration runs as a build-time pipeline: Webflow export, Liquiflow conversion, Shopify deployment.

You have three ways to build the integration, depending on how much of the storefront you're converting and how dynamic it needs to be:

Implementation options:

• The Liquiflow app adds an attribute builder, a schema builder, and 40+ pre-built components directly inside Webflow, with no code required.
• Custom attributes and conversion workflows turn your exported Webflow code into a full Shopify theme or single sections.
• The Section Rendering API is the developer path for AJAX behavior such as live filtering and predictive search.

Most implementations combine two or more of these methods depending on the complexity of the storefront.

Install the Liquiflow app

The Liquiflow app on the Webflow Marketplace puts Liquiflow's tooling directly inside Webflow. Use it to apply Liquiflow attributes while you design. It also lets you drop in pre-built commerce components instead of building them from scratch. Designers and agency teams building their first Liquiflow storefront benefit most. At site level, only Site manager and Designer role holders can install apps.

To set up the integration:

1. Open the Liquiflow listing in the Webflow Marketplace and click Add to site.
2. Select the Workspaces or sites where you want the app, then click Authorize app.
3. Open the app and follow its instructions inside Webflow.

Installed tools:

• An attribute builder for applying Liquiflow attributes to elements
• A component library with more than 40 pre-built components covering product galleries, variant selectors, cart functionality, and collection filtering
• A schema builder for Shopify section settings

You can also install from the Apps panel in Webflow by searching for the app and clicking Install on site.

Convert your Webflow design with custom attributes

Custom attributes are Liquiflow's core mechanism. You add attribute keys to elements through the element settings panel in Webflow. Liquiflow reads them at conversion time and generates the matching Shopify Liquid. Every element must sit inside a wrapper carrying the li-section attribute. A missing wrapper causes errors and can stop Shopify 2.0 from working, as the getting started guide explains.

The most-used attributes cover objects, settings, loops, and forms:

• li-object inserts a Shopify object, so li-object="product.title" becomes {{ product.title }}
• li-settings exposes text, images, and other content as editable settings in the Shopify theme editor
• li-for loops over arrays such as product in collection.products and renders 50 products by default until li-paginate overrides it
• li-form wraps Shopify form types such as login, signup, cart, and newsletter, with modifiers like li-form:return_to for redirects
• li-liquid preserves Liquid formatting inside a Code Embed element, where the export may otherwise reformat it

The full attribute reference lists every supported attribute. That includes li-block for repeating blocks, and theme blocks that nest up to 8 levels, which is Shopify's limit. li-settings:custom handles custom settings JSON in a Code Embed element. Section names max out at 30 characters.

Convert a full theme with a ZIP export

The Theme Builder converts an entire Webflow project into a native Shopify 2.0 theme with JSON templates. That covers product pages, collections, blogs, and carts. The manual ZIP workflow needs no extra tooling.

To convert a full theme:

1. Export code from Webflow.
2. Upload the ZIP file into your Liquiflow project and select a branch before converting.
3. Download the converted ZIP from Liquiflow.
4. In Shopify, go to Online Store > Themes and upload the converted ZIP.

The theme conversion guide covers every step and the required branch selection before conversion.

Connect GitHub for automatic updates

The GitHub workflow replaces manual ZIP handling and adds version control with rollback. It also opens a pull request you can review before merging to the live theme. Liquiflow's docs present the GitHub path as the primary workflow.

To connect GitHub:

1. In your Liquiflow project, open Settings and click Connect to GitHub.
2. Follow the steps and authorize the repository.
3. In Shopify, go to Online Store > Themes > Add Theme > Connect from GitHub.

Once connected, publishing your Webflow site keeps the Shopify theme up to date automatically. Connecting GitHub requires a paid Liquiflow plan, as noted in the free demo details.

Convert single sections with the Section Converter

The Section Converter turns an individual Webflow section into a Shopify section without converting a whole theme. That makes it useful for adding custom blocks to themes not built with Liquiflow.

To convert a section:

1. Build the section in Webflow.
2. Add the li-section attribute with the section name as its value.
3. Inside that element, add attributes so store owners can change text, images, or other content.
4. Open the Section Converter and paste the Webflow component.
5. In the Shopify Sections folder, click Add new section and add the converted code.

The Section Converter has documented limits:

• Collection List content isn't copied during conversion. Use standard div blocks instead.
• Webflow native interactions and Liquiflow Elements aren't supported
• Global combo classes come through empty unless the class is used somewhere in the section
• Images without li-settings:image load from Webflow servers, which the Section Converter docs advise against

Don't link to fonts or variables from your Webflow project either, since those assets won't exist in the Shopify theme. Because Collection List content isn't copied, converted sections read content from Shopify rather than the Webflow CMS. Liquiflow attributes supply that data. When you only use the Section Converter, you don't need any Webflow plan.

Build with the Webflow Data API and Liquiflow Section Rendering API

The Section Rendering API is a client-side script, currently in alpha. It loads parts of your theme over AJAX so pages update without reloading. You set it up in Webflow by adding custom code before the closing tag, plus li-render attributes. There is no public Liquiflow REST API or HTTP webhook surface. Custom code needs a Core, Growth, Agency, or Freelancer Workspace, or an active paid Site plan.

• The Section Rendering API script handles AJAX partial section updates
• Browser rendering events handle post-render custom logic
• Webflow's Data API publishes a site via POST /v2/sites/{site_id}/publish. You can automate that publish step; conversion still relies on Webflow's native code export.

The script lives as an asset inside your Shopify theme, so there is nothing to host on your side.

To set it up:

1. In Shopify, open your theme's code editor, add a new asset named section-rendering.js in the Assets folder, and paste in the script from Liquiflow's Section Rendering API GitHub repository.
2. Add li-render attributes to the elements you want to update without reloading the page. Use li-render-filter="wrapper" for collection filtering, li-render-search="wrapper" for predictive search, or li-render-recommended="wrapper" for recommended products.
3. Convert your theme and test the behavior on the Shopify storefront.

The script URL is a Shopify asset path that resolves after conversion, and Shopify hosts the embed. Predictive search and recommended products return 1–10 results, with a default of 10. Because the feature is alpha, treat it as not production-stable.

Listen for rendering events

The script fires browser-side JavaScript events you can hook into for custom behavior after each render.

• liquify:before-render fires before any DOM changes
• liquify:filter-rendered fires after filter elements render
• liquify:custom-rendered fires after custom elements render
• liquify:search-rendered fires after search elements render
• liquify:recommended-rendered fires after recommended elements render
• liquify:sections-rendered fires any time a section renders via the script

These browser events fire in the visitor's browser as sections render. Custom logic runs client-side in the converted theme; Liquiflow sends no outbound webhooks.

What can you build with the Liquiflow Webflow integration?

Integrating Liquiflow with Webflow lets you ship custom Shopify 2.0 storefronts without writing Liquid templates by hand.

• Full custom Shopify 2.0 themes: Balcony Paris converted an animated Webflow design into a production Shopify theme. It includes quick add-to-cart, blog tag filtering, a dynamic calendar of upcoming events and product metafields shown in sliders.
• Custom sections for existing themes: Build hero, FAQ, and testimonial sections in Webflow and add attributes. The conversion generates a fully editable Shopify section without touching the theme's core code.
• Multilingual, multi-market stores: Bandwerk runs 200+ products with multi-level variant customization and a custom bundle builder. German/English support comes through Shopify's Translate & Adapt app.
• Campaign pages marketing teams own: Katjes pairs native bundle features with a free-shipping progress bar that updates with the cart. Its marketing team manages the campaign pages independently in Shopify.

If you need more control over live behavior such as filtering and predictive search, the API integration path covers those cases with full flexibility. The Section Rendering API is still in alpha.