Liquiflow

How to integrate Liquiflow with Webflow

Building custom Shopify themes typically requires learning Liquid templating language and working within theme editor constraints. Liquiflow converts Webflow designs into Shopify 2.0 themes so you can use Webflow's visual design interface instead.

You design in Webflow using custom attributes to define Shopify functionality, then Liquiflow generates production-ready theme code. Install the Liquiflow app from the Webflow Apps Marketplace to access conversion tools, use custom attributes in Webflow to map design elements to Shopify Liquid variables, use the Section Converter to convert individual Webflow sections into Shopify theme sections, or export and convert with GitHub workflows for version control and automated deployment.

Use the Liquiflow App

Install Liquiflow from the Webflow Apps Marketplace to access the conversion tools and custom attribute system directly in your Webflow workspace. The marketplace app provides access to the Section Converter, documentation, and conversion workflows. Once installed, you can design Shopify themes in Webflow using custom attributes, then export your project for conversion to Shopify 2.0 themes.

The app provides these features:

• Section Converter from the Liquiflow app interface converts individual Webflow sections into Shopify theme sections
• Custom attribute system documented in the Getting Started guide maps Liquid variables in Webflow
• Export and conversion tools detailed in the conversion documentation transform Webflow projects into Shopify 2.0 themes

After installing the app, access it from your Webflow workspace to begin converting designs. The app integrates with Webflow's export functionality to process your custom attributes during theme generation.

Use custom attributes in Webflow

Add Liquiflow's custom HTML attributes (with li- prefix) to Webflow elements during the design phase to define how your design maps to Shopify Liquid code. Configure these attributes in Webflow using custom attributes like li-object, li-if, and li-for to specify Shopify variables and logic. When you export your Webflow project, Liquiflow converts the design and its custom attributes into a complete Shopify 2.0 theme with Liquid code, which you then deploy to Shopify.

Note that working with custom attributes requires understanding Liquid syntax. While you don't need to write Liquid from scratch, knowing basic Liquid concepts helps you use the attribute system effectively.

Core attribute types:

• Data binding with li-object attributes 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 and iteration with li-for attributes displays product collections or variant options
• Section settings with li-settings creates editable fields for store owners to customize without code
• Filters and formatting using Liquid filters applies pipe operators to format prices, dates, or text

The attribute system maintains your design while creating custom Shopify theme sections. Text content in Webflow elements serves as placeholders and default values. For images, use li-settings:image to create Shopify image pickers for content management directly in Shopify's Theme Editor. Start by wrapping your content in a container with the li-section attribute to define the convertible section boundaries, then add custom attributes to bind Shopify variables and control rendering logic.

For complex Theme Editor controls beyond standard text and image fields, you can use JSON schemas. Add a Code Embed element in Webflow with custom attributes to define your Shopify section structure, then include JSON schema following Shopify Theme Editor settings format using li-settings:custom=""setting-name"" attributes.

Advanced configuration options in Webflow:

• Custom JSON schemas via custom settings documentation support complex input types beyond standard text and image fields
• Advanced input types using Shopify Theme Editor settings format include color pickers, range sliders, select dropdowns, and multi-option configurations
• Editable parameters with li-settings attributes define configurable fields during the design phase that appear in Shopify's Theme Editor

Custom Liquiflow settings allow store owners to create configurable parameters for Shopify theme sections without code. Using li-settings attributes in Webflow (such as li-settings:text, li-settings:image, and li-settings:richtext), designers define editable fields during the design phase. When the Webflow design is converted to a Shopify theme, these custom settings automatically appear as editable fields in Shopify's Theme Editor for store owners to customize section content and appearance directly from Shopify.

Build sections with the Section Converter

Convert individual Webflow sections into Shopify theme sections using the Section Converter, which extracts a single section from your Webflow design and generates Shopify Liquid code that creates a fully functional theme section. These sections integrate into custom Shopify 2.0 themes built with Liquiflow and let you organize your store with modular, reusable section components.

Section Converter capabilities:

• Code extraction via the Section Converter tool copies Webflow section code and generates Shopify-compatible output
• Automated styling with section-specific CSS generation prevents conflicts with existing theme styles
• Schema generation using custom attributes transforms design elements into Shopify Liquid syntax with Theme Editor integration

The converter maintains all your custom attributes and transforms them into Shopify Liquid syntax. You get production-ready section files compatible with Shopify 2.0's architecture, complete with schema definitions for Theme Editor integration. This approach works well for designers building custom Shopify sections or when creating standalone sections to add to existing Shopify theme installations.

Export and convert with GitHub workflows

Export your Webflow project and convert it to a Shopify theme using Liquiflow's GitHub integration workflow. This method connects your Webflow design process to automated theme deployment and lets you maintain version control while designing visually in Webflow.

After the initial conversion from Webflow to Shopify, GitHub provides two-way synchronization for ongoing development. Design your store layout in Webflow using custom attributes, then deploy to Shopify with GitHub integration for automated theme publishing through deployment workflows. Content editing happens in Shopify Admin and doesn't sync back to Webflow.

GitHub integration features:

• Version control workflows via GitHub integration support team collaboration on theme development with branching and version management
• Automated deployment with debugging tools provides error logging with specific line numbers and error descriptions
• Two-way synchronization detailed in the Vioneers case study demonstrates continuous development capabilities for agencies managing multiple client stores

The debugging documentation provides tools to verify custom attributes and access Shopify logs with specific error locations when using GitHub integration, making troubleshooting more efficient than manual export methods. For agencies managing multiple client Shopify stores, this workflow provides better team collaboration through GitHub's branching and version management capabilities.

What you can build

Building custom Shopify stores with unique designs typically requires coding Liquid templates from scratch. Liquiflow converts Webflow designs into production-ready Shopify 2.0 themes so designers can create custom Shopify experiences by designing visually in Webflow. Rather than embedding into Webflow sites, Liquiflow transforms Webflow designs using custom attributes into fully functional Shopify themes with complete e-commerce capabilities.

• Custom Shopify themes with advanced interactions: Build custom Shopify stores like Balcony Paris by converting your Webflow design to a Shopify 2.0 theme using Liquiflow, designing your product pages in Webflow with li-object attributes for product data binding, adding custom settings for Shopify Theme Editor compatibility, and deploying a fully functional Shopify theme that syncs with your product catalog in real-time
• Multi-brand stores with complex catalogs: Create stores managing 200+ products using custom Shopify themes built with Liquiflow like Bandwerk, using li-for loops to display product collections, conditional logic to show variant-specific content, and custom settings to give store owners merchandising control for multi-level product variant customization, bundle builders, and dynamic filtering
• Content-rich e-commerce experiences: Launch stores like Vioneers by converting Webflow designs into custom Shopify 2.0 themes using Liquiflow, designing content layouts in Webflow using Liquiflow's custom attribute system (the li- prefix attributes), then converting them to Shopify Liquid code for deployment with blog functionality featuring custom tag filtering, dynamic event calendars, and custom account pages
• B2B/B2C hybrid commerce platforms: Build stores like Workstatt featuring private B2B shop functionality alongside public retail, integrated third-party chatbot apps, GSAP animations, and complex navigation systems supported by Liquiflow's Shopify 2.0 architecture for multiple customer segments while maintaining unified design standards