Hot 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 Liquify Pro, or if you just want to quickly test a section in Shopify without converting the whole theme.

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

• Liquify Pro 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.

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 Liquify Pro 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 Practise

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

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

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

• You can’t 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 Liquify Pro theme.

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