How it Works

Core Principals

The Section Converter lets you convert individual sections instead of an entire theme. This is helpful if you want to build sections for themes that were not created with Liquiflow, or if you just want to quickly test a section in Shopify without converting the whole theme.

In general, you can use all Liquiflow attributes with the Section Converter — you’ll find them in our documentation. The basic idea is the same as with the Liquiflow Theme Builder. However, there are a few things you cannot use:

• Liquiflow Elements (like Mini Cart, Variant Swatch)

• Theme Blocks (coming soon). Right now, the Section Converter only supports converting sections. So, the tag li-content-for-theme-blocks is not supported yet. But you can still use li-block or li-content-for-blocks as usual.

• Webflow Collection Lists: Webflow does not copy the content of a Collection List item. Just use normal div elements instead.

• Webflow native interactions are not supported (yet).

• Combo classes that are defined globally will be empty, please add the global class somewhere in the section, so we can get the CSS values.

Step-by-step Guide

1

First, build your section in Webflow.

2

Add the li-section tag with a value for the section name to an element — this will be the element you copy later.

3

Inside the li-section element, add custom functionality to let store owners change text, images, or other content. Here is the Documentation for all li-settings and li-objects

4

Then copy the element with the li-section tag.

5

Open the Liquiflow Section Converter and paste the Webflow component.

6

After conversion, copy the generated code.

7

Go to your Shopify theme’s code editor.

8

In the Sections folder, click Add new section.

9

Give it a name so you can find it later (this name is not shown in the Shopify editor).

10

Delete the default Shopify preset code and paste your converted code instead.

11

Save the section.

12

Go to the Shopify theme editor — you can now use, edit, and reuse your new section.

Best Practice

• The Section Converter automatically creates a <style> tag with all the styles used in your section.

  • Important: Do not link to assets from your Webflow project (like fonts or variables). These will not exist automatically in your Shopify theme. If you want to use them, you will need to add them manually to your Shopify theme’s assets or CSS.

• Avoid adding images without using li-settings:image. Otherwise, they will be loaded from Webflow’s servers, which is not recommended.

• You cannot use li-content-for-theme-blocks to create Theme Blocks. Use li-block or li-content-for-blocks instead.

• If you add Add to Cart functionality, make sure you use your Shopify theme’s native method. li-element attributes only work with a full Liquiflow theme.

• You can use li-snippet to reference an existing snippet from your Shopify theme.