Liquiflow

How to integrate Liquiflow with Webflow

The easiest way to set up Liquiflow is by installing the Liquiflow app from the Webflow Marketplace. You design in Webflow using custom attributes to define Shopify functionality, then Liquiflow generates theme code through a one-way conversion process. You can also use the Section Converter to convert individual sections or connect GitHub workflows for automated deployment.

⚠️ Important: Liquiflow is an ttribute-based configuration, not true no-code. You'll need to write attribute syntax like li-object="product.title" and understand Shopify Liquid variable naming conventions. Non-technical users should start with pre-built components rather than custom sections.

Use the Liquiflow app

Install Liquiflow from the Webflow Marketplace to access conversion tools and the custom attribute system. The app provides access to the Section Converter, documentation, and conversion workflows.

After installation, design your Shopify theme in Webflow Designer using custom attributes, then export your project for conversion to Shopify 2.0 themes.

Use custom attributes in Webflow Designer

Add Liquiflow's custom HTML attributes (with li- prefix) to Webflow elements to define how your design maps to Shopify Liquid code. Configure these attributes in Webflow Designer's Element Settings panel.

Core attribute types:

• Data binding with li-object connects elements to Shopify variables like product titles, prices, or descriptions
• Conditional logic with li-if and li-unless shows or hides content based on conditions like product availability
• Loops with li-for displays product collections or variant options
• Section settings with li-settings creates editable fields for store owners in Shopify's Theme Editor

Start by wrapping content in a container with the li-section attribute, then add custom attributes to bind Shopify variables and control rendering logic.

Build sections with the Section Converter

Convert individual Webflow sections into Shopify theme sections using the Section Converter. It extracts a single section from your design and generates Shopify Liquid code with schema definitions for Theme Editor integration.

This approach works well for creating standalone sections to add to existing Shopify themes.

Export and convert with GitHub workflows

Export your Webflow project and convert it to a Shopify theme using Liquiflow's GitHub integration. This connects your design process to automated theme deployment with version control.

Note: The two-way synchronization applies to GitHub↔Shopify, not Webflow↔Shopify. Design changes in Webflow require re-export and conversion — there's no continuous sync between Webflow and Shopify.

For agencies managing multiple client stores, GitHub workflows provide better team collaboration through branching and version management.

What you can build

Liquiflow transforms Webflow designs into fully functional Shopify 2.0 themes. These are verified implementations from Liquiflow case studies.

• Custom Shopify themes with interactions: Build stores like Balcony Paris by converting Webflow designs with animations and interactions into production Shopify themes. Use li-object attributes for product data binding and custom settings for Theme Editor compatibility.
• Multi-brand stores with complex catalogs: Create stores managing 200+ products like Bandwerk, featuring multi-level variant customization and dynamic filtering. Use li-for loops to display collections and conditional logic for variant-specific content.
• Content-rich e-commerce experiences: Launch stores like Vioneers combining product catalogs with editorial content, blog functionality with custom tag filtering, and dynamic event calendars.
• B2B/B2C hybrid commerce platforms: Build stores like Workstatt featuring private B2B functionality alongside public retail, custom integrations, and complex navigation systems.