# Welcome to Liquiflow

{% hint style="success" %}
**Welcome to our new Docs:** If you have any feedback, please provide it in our [discord channel](https://discord.gg/56KwXaUW5X) :)
{% endhint %}

## Overview

We're delighted that you've made it here. In the following sections, we'd like to explain what <code class="expression">space.vars.Company</code> is, how it works, how it will advance your business, and why we, as an e-commerce agency, are absolutely excited about it. 🎉

We firmly believe that visual programming is the future of frontend development, and Webflow is a perfect fit for this purpose. Additionally, we're thrilled with the extent and functionality of the e-commerce CMS Shopify.

<code class="expression">space.vars.Company</code> brings together the best of both worlds. You can develop your online shops directly in Webflow and equip them with the necessary variables through <code class="expression">space.vars.Company</code>. We'll take care of the rest. Once connected with <code class="expression">space.vars.Company</code>, we convert the project into a Shopify theme and keep everything up to date as soon as you publish in Webflow.

{% embed url="<https://youtu.be/YwUqvll3W7c?si=UXazXet5u7IRUslJ>" %}

## Quick links

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Start with Webflow Template</strong></td><td>Use a fully working Template as starting point.</td><td><a href="/pages/G0N8tsomYS1uJvOWcHWw">/pages/G0N8tsomYS1uJvOWcHWw</a></td><td><a href="/files/N0sKWdYyAksQIV4XTIqD">/files/N0sKWdYyAksQIV4XTIqD</a></td></tr><tr><td><code class="expression">space.vars.Company</code> <strong>Cheatsheet</strong></td><td>Checkout the <code class="expression">space.vars.Company</code> Cheat sheet.</td><td><a href="/pages/6CXLMZtWSiDzDEBl2EkN">/pages/6CXLMZtWSiDzDEBl2EkN</a></td><td><a href="/files/Sqyz2jwnlY8uPx9xSP23">/files/Sqyz2jwnlY8uPx9xSP23</a></td></tr><tr><td><strong>Join our Free Discord Group</strong></td><td>Join our Discord community to get your questions answered.</td><td><a href="https://discord.gg/56KwXaUW5X">https://discord.gg/56KwXaUW5X</a></td><td><a href="/files/6dCqeku6StGgyfCPmGgO">/files/6dCqeku6StGgyfCPmGgO</a></td></tr></tbody></table>

## What is <code class="expression">space.vars.Company</code>?

<code class="expression">space.vars.Company</code> is a converter that connects your Webflow project to Shopify, generating fully-featured e-commerce themes. With the assistance of custom attributes in Webflow, you can design your shop to your liking, and <code class="expression">space.vars.Company</code> takes care of the rest. We equip your project with complete Liquid code and ensure that you don't lose the advantages of both Webflow and Shopify.

## Who is <code class="expression">space.vars.Company</code> for?

You might be wondering, why do I need <code class="expression">space.vars.Company</code>? <code class="expression">space.vars.Company</code> is essential for anyone looking to create a custom Shopify theme with maximum flexibility. It provides unparalleled tools and features that empower you to design a unique and fully functional online store tailored to your needs.

Our current clients include:

* Shopify Agencies and Freelancer
* Webflow Agencies and Freelancer
* Shopify Merchants with their own Development or Marketing Team

{% hint style="info" %}
**Disclaimer:**\ <code class="expression">space.vars.Company</code> is a professional tool, as the name suggests ;) To fully leverage its capabilities, it is essential to learn the Shopify Liquid Template Language and Webflow.
{% endhint %}


# Getting Started

{% hint style="warning" %} <code class="expression">space.vars.Company</code> **Starter Theme**

We strongly advise beginning with our <code class="expression">space.vars.Company</code> [Starter Theme](/useful/liquiflow-starter-templates), which comes equipped with essential Shopify pages such as Cart, User Account, Search and more. If you are already working on a project, it is advisable to copy these pages and sections into your new <code class="expression">space.vars.Company</code> project. Get the Theme [here](/useful/liquiflow-starter-templates).
{% endhint %}

## Core Principals <a href="#core-principals-1" id="core-principals-1"></a>

<code class="expression">space.vars.Company</code> uses Webflow's Custom Attributes as its foundation. Through the instructions contained in the Attributes, we understand which Liquid variables you want to use, where and how. In doing so, <code class="expression">space.vars.Company</code> relies on Shopify's theme framework and includes all essential pages. It is best to begin with the <code class="expression">space.vars.Company</code>[ project starter kit](/useful/liquiflow-starter-templates).

{% columns %}
{% column %}

<figure><img src="/files/67qB5kSKoP040bXXXrqI" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/oh6rDAHsQI6psL3p5UUr" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### What is liquid?

Shopify Liquid is a template language used by the Shopify e-commerce platform to customize and render dynamic content for online stores. It is a lightweight, easy-to-learn language that allows developers and store owners to control how data is displayed and organized on their Shopify store's pages. <code class="expression">space.vars.Company</code> gives you access to all Shopify Liquid functionalities, enabling you to visually write Liquid code using custom attributes.

Shopify Liquid templates consist of a combination of `tags`, `objects`, and `filters`. Tags are used to control the logic and structure of the template, while objects represent data like products, collections, and customers. Filters are used to modify and format data before it is displayed.

Using Liquid, you can create custom storefronts, build unique product pages, design custom themes, and tailor the user experience to meet your specific needs on the Shopify platform. It is a flexible and powerful tool for customizing the appearance and functionality of an online store.

### Webflow Attributes

You can access custom attributes through the settings panel of the selected element. A custom attribute always requires a name, with values being optional. Within the name, you specify the type of data you wish to display (e.g. `li-object`, `li-settings`, `li-if`, `li-for`, etc.). Within the value, you define the content of the element (e.g. `product.title`, `collection.description`, `cart.items`, etc.). In the subsequent steps, you will discover the various types of `li-` tags you can employ.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = product.title
```

{% endcode %}

{% endcolumn %}

{% column %}

<figure><img src="/files/vjGqdpCH54G7jZ7YJdqI" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

Here are some important tips:

{% stepper %}
{% step %}
Consider Webflow as the blueprint for your store. Work with placeholders and add content later in Shopify. Your goal is to maintain a small, high-performing Shopify theme.
{% endstep %}

{% step %}
You do not need to dive deeply into <code class="expression">space.vars.Company</code> attributes. Your go-to resource is the [Shopify documentation](https://www.shopify.com/partners/shopify-cheat-sheet), since you will be working with Shopify Liquid. You can also find solutions in the Shopify forum or documentation and then reconstruct them using <code class="expression">space.vars.Company</code> tags directly in Webflow.
{% endstep %}

{% step %}
All elements must be contained within a wrapper element that has the `li-section` attribute. Failing to do so can cause errors and prevent proper functioning of Shopify 2.0.
{% endstep %}

{% step %}
At times, it's beneficial to debug directly within Shopify before implementing it in Webflow. For instance, when searching for the correct metafield output, this approach allows you to instantly verify the results in real-time without waiting for the conversion process.
{% endstep %}

{% step %}
When labeling settings, use clear and descriptive labels that store owners can easily understand. You can also reuse the same label names across sections. For instance, consistently labeling a setting as `Headline` helps maintain clarity.
{% endstep %}
{% endstepper %}


# Template Structure

The <code class="expression">space.vars.Company</code> starter Template comes with a pre-defined structure for your Template. All the pages Shopify needs for a working theme are already setup and working. The pages are tagged with a `li-page` tag which defines which pages refer to which purpose. These tags are already applied in [our Starting theme.](https://www.liquify.pro/docu/liquify-starter-template)

{% code title="Webflow" fullWidth="false" %}

```
li-page = product
```

{% endcode %}

Here is a List of all available page [templates by Shopify](https://shopify.dev/docs/storefronts/themes/architecture/templates):

* 404
* article
* blog
* cart
* collection
* account
* activate\_account
* addresses
* login
* order
* register
* reset\_password
* gift\_card
* index (always the Home page in Webflow)
* list-collections
* page
* password
* product
* search

{% hint style="info" %}
Pages without a li-page tag are considered as Shopify pages and are converted as `page.templates`. The name of the page in Webflow will be the name of the template in Shopify. For example, a page called `About Us` will get the template file `page.about_us`.
{% endhint %}

When you do not want a site to be converted, simply add the tag `remove`:

{% code title="Webflow" fullWidth="false" %}

```
li-page = remove
```

{% endcode %}

By default, every `li-page` generates its own [layout](https://shopify.dev/docs/storefronts/themes/architecture/layouts) file. This leads to a large number of unnecessary files. However, if you are not modifying `<head>`, `<body>`, or anything outside the `li-content-for-layout` element, you can use the `li-layout` attribute directly on the `li-page` element. This tells the converter to skip creating a new layout file for that page.

You can simply reference the layout you want to use for this page:

{% code title="Webflow" fullWidth="false" %}

```
li-layout = theme
```

{% endcode %}

## **Page Structure**

Your page will be saved in two separate files in Shopify:

* Layout file: everything outside the `li-content-for-layout` attribute.
* Template file: everything inside the `li-content-for-layout` attribute.

If you’re using Shopify 2.0, the template will be saved as a .json file instead of an HTML Liquid file.

That’s why the `li-content-for-layout` attribute is required on all pages. It’s usually placed on the `<main>` element of your site. In the Starter theme, you can find it on the `main-wrapper`.

![Webflow Navigator with Liquiflow Theme Structure](/files/aT2BBeByRZH10m4hUrDr)

## **Shopify 2.0**

To unlock the potential of Shopify 2.0, make sure all your page content is organized into sections (tagged with `li-section` tag, learn more [here](https://www.liquify.pro/docu/getting-started#settings-sections)). The page structure should match the image below. Just remember not to change the HTML tag `main` oft the main wrapper. You can always rearrange everything inside `main` in Shopify later on.

{% columns %}
{% column %}
![Webflow Navigator with Liquiflow Theme Structure](/files/aT2BBeByRZH10m4hUrDr)
{% endcolumn %}

{% column %}

<figure><img src="/files/n5mnFtPsdvS5uRqCS93Q" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}


# How to Convert Your Theme

<code class="expression">space.vars.Company</code> provides several methods to manage and maintain your Shopify theme. It is crucial to ensure that your content originates from Shopify, keeping your Webflow project as minimal as possible (e.g., assets should be managed in Shopify, not uploaded to Webflow).

The most efficient way to handle your Shopify theme is by using our GitHub integration. By connecting your <code class="expression">space.vars.Company</code> project to a GitHub repository and linking the repository to Shopify, you significantly streamline your workflow. The following steps will explain these methods in detail.

## How to Connect to GitHub

Follow these steps to connect your <code class="expression">space.vars.Company</code> project to GitHub and Shopify:

{% embed url="<https://app.arcade.software/share/AGIeMZFZMf3TWgIkyiuq?ref=share-link>" %}

{% stepper %}
{% step %}
Log in to your GitHub account and create a new repository with a “README” file.
{% endstep %}

{% step %}
Log in to your <code class="expression">space.vars.Company</code> account and create a new project.
{% endstep %}

{% step %}
Open the project and go to the Settings.
{% endstep %}

{% step %}
Click “Connect to GitHub” and follow the steps.
{% endstep %}

{% step %}
Authorize the repository you created earlier (or all, if you prefer).
{% endstep %}

{% step %}
Return to the <code class="expression">space.vars.Company</code> project and select the repository you want to connect.
{% endstep %}

{% step %}
Select a branch (usually, there will only be one "main" branch if the project is empty).
{% endstep %}

{% step %}
If you haven’t converted your theme yet, please follow the steps outlined in [“Convert Your Theme”](https://www.liquify.pro/docu/convert-your-theme#convert-your-theme) before connecting your Theme to GitHub.
{% endstep %}

{% step %}
Go to Shopify, open “Online Store” and select “Themes.” Click “Add Theme” and choose “Connect from GitHub.”
{% endstep %}

{% step %}
Connect your GitHub account and follow the steps. Then, choose a repository and branch.
{% endstep %}

{% step %}
You are now ready to convert your theme 🎉.
{% endstep %}
{% endstepper %}

## Convert your Theme

Follow these steps to export and convert your Theme:

{% embed url="<https://app.arcade.software/share/1uRtruO53fnMTFkgobyd?ref=share-link>" %}

{% stepper %}
{% step %}
Export the code from Webflow.
{% endstep %}

{% step %}
Upload the ZIP file into your <code class="expression">space.vars.Company</code> project. Before converting, you can select a branch as described above.
{% endstep %}

{% step %}
Open the pull request to review the results. If you are not using GitHub, download the theme and continue with "[Convert your theme without GitHub](#convert-your-theme-without-github)".
{% endstep %}

{% step %}
Check the changed files in GitHub to review all the updates.
{% endstep %}

{% step %}
Merge the branch once you are satisfied with the results. After merging, you can delete the merged branch.

If the branch has any conflicts, you can resolve them directly in GitHub.
{% endstep %}

{% step %}
Your conversion is now complete. 🎉  You can go to Shopify and check the results.

If any bugs occur, follow the steps [here](https://www.liquify.pro/docu/debugging).
{% endstep %}
{% endstepper %}

### Convert your theme without GitHub

Follow these steps to export and convert your theme:

{% stepper %}
{% step %}
Export the code from Webflow.
{% endstep %}

{% step %}
Upload the ZIP file into your <code class="expression">space.vars.Company</code> project. Before converting, you can select a branch as described above.
{% endstep %}

{% step %}
Download the converted theme
{% endstep %}

{% step %}
Go to Shopify and upload the ZIP in the online shops theme section
{% endstep %}

{% step %}
After uploading, you need to copy the schema files from the current version into the new version to keep the content.
{% endstep %}

{% step %}
Your conversion is now complete. 🎉  You can go to Shopify-Editor and check the results.

If any bugs occur, follow the steps [here](https://www.liquify.pro/docu/debugging).
{% endstep %}
{% endstepper %}


# Overview

In addition to Shopify objects, you can implement settings that allow your Shopify content editor to modify both the content and appearance directly within Shopify. To achieve this, use the `li-settings` tag. Using a modifier, you can access all of Shopify's provided [Settings Inputs](https://shopify.dev/docs/themes/architecture/settings/input-settings).

In Webflow, you define the name of the Shopify setting inside the value of the attribute (e.g. Headline). The content inside the element is used as the default placeholder value in the Shopify editor.

{% code title="Webflow" fullWidth="false" %}

```
li-settings:text = Headline
```

{% endcode %}

This will be converted into:

<figure><img src="/files/71uhe9fMRfiRUroRwW6T" alt="" width="563"><figcaption></figcaption></figure>

## Section Settings

{% columns %}
{% column %}
{% content-ref url="/pages/KTvcyJ1ebf94BtFzkpfK" %}
[Settings](/section-settings/settings)
{% endcontent-ref %}

{% content-ref url="/pages/PpF8FKYZsydxaRL0enbg" %}
[Blocks](/section-settings/blocks)
{% endcontent-ref %}

{% content-ref url="/pages/B7nat6srmcpxltG60vuc" %}
[Custom Settings](/section-settings/custom-settings)
{% endcontent-ref %}
{% endcolumn %}

{% column %}
{% content-ref url="/pages/bvA35n0MOU1TkC7aTJe2" %}
[Sections](/section-settings/sections)
{% endcontent-ref %}

{% content-ref url="/pages/JTae77Rgz0h8tkryhrtF" %}
[Theme Blocks](/section-settings/theme-blocks)
{% endcontent-ref %}
{% endcolumn %}
{% endcolumns %}


# Settings

The following is a list of `li-settings` modifiers available in <code class="expression">space.vars.Company</code>. Each modifier provides different input types in the Shopify editor. Shopify also offers additional input types. To use those, refer to the [custom settings attribute documentation](/section-settings/custom-settings).

#### Text Input

This attribute creates a simple string input in the Shopify Theme Editor. The text of the element will be used as the default text of the attribute. The value of the attribute will be used as the label of the setting.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:text = Heading
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/xVLnCe4nfuSUQBEQWuIf)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### Textarea Input

This attribute creates a simple string input in the Shopify Theme Editor. The content of the element with this attribute will be used as the default value of the setting in the Shopify Theme Editor. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:textarea = Welcome message
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/xixukqHsam2JNJ92Zqej)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### Richtext Input

This attribute creates a multi-line text field with basic formatting options in the Shopify Theme Editor. The content of the element with this attribute will be used as the default value of the setting. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:richtext = Heading
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/J5v0xlc1roWbaCdwcU6S)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### Image Input

This attribute creates an image picker field that automatically lists available images from the Files section in the Shopify admin, with the option to upload new ones. The value of the attribute will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:image = Image
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/EgVHLWkpkgALIz66CFmv)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

<details>

<summary>Detailed Documentation</summary>

For a better understanding of what happens behind the scenes, we’ve prepared detailed documentation.

When using the `li-settings:image` attribute (as described above), several changes are made during the conversion process:

* The `<img>` tag is replaced with a Shopify object and the filters `| image_url: width: 1000` and `| image_tag`. This ensures the `<img>` tag is rendered on the live site as [Shopify recommends](https://shopify.dev/docs/api/liquid/filters/image_tag).
* All attributes from the original `<img>` element (e.g. `class`, `loading`) are passed into the `image_tag` filter, for example: `| image_tag: loading: 'eager', class: 'more_image'`.
* The object is wrapped in a condition to check whether an image is applied. By default, if no image is set, the Webflow image is used as a placeholder.

Here’s how the theme builder now handles it:

<pre data-title="Webflow" data-full-width="false"><code><strong>&#x3C;img class="more_image" li-settings:image="Image" src="image/logo.svg" loading="eager" >
</strong></code></pre>

{% code title="Shopify" %}

```
{% if section.settings.image_image %}
        {{ section.settings.image_image | image_url: width: 1000 | image_tag: loading: 'eager', class: 'more_image' }}
{% else %}
        <img src="{{'logo.svg' | asset_url }}" class="more_image" >
{% endif %}
```

{% endcode %}

**Placeholder Tag**

If you don’t want to use the Webflow image as a placeholder, you can override it with the | placeholder: 'detailed-apparel-1' filter, like this:

{% code title="Webflow" fullWidth="false" %}

```
li-settings:image = Image | placeholder: 'detailed-apparel-1'
```

{% endcode %}

{% code title="Shopify" %}

```
{% if section.settings.image_image %}
        {{ section.settings.image_image | image_url: width: 1000 | image_tag: loading: 'eager', class: 'more_image' }}
{% else %}
        {{ 'detailed-apparel-1' | placeholder_svg_tag: 'more_image' }}
{% endif %}
```

{% endcode %}

This now references the Shopify placeholder library. You can find a list of all available placeholders [here](https://shopify.dev/docs/api/liquid/filters/placeholder_svg_tag).

**Image size**

To control the size of the image loaded from the Shopify server, you can use the `| image_url` filter. Simply specify the desired height or width, and it will override the default `| image_url: width: 1000`.

{% code title="Webflow" fullWidth="false" %}

```
li-settings:image = Image | image_url: width: 400
```

{% endcode %}

{% code title="Shopify" %}

```
{% if section.settings.image_image %}
        {{ section.settings.image_image | image_url: width: 400 | image_tag: loading: 'eager', class: 'more_image' }}
{% else %}
        <img src="{{'logo.svg' | asset_url }}" class="more_image" >
{% endif %}
```

{% endcode %}

**Adding attributes to the image tag**

To add more attributes to the image tag, simply place them on the `<img>` tag as shown above — they’ll be automatically included in the `image_tag`.

You can also reference variables or objects inside the `image_tag`. To do this, just add them as filters on your `li-settings:image` element, like this:

{% code title="Webflow" fullWidth="false" %}

```
li-settings:image = Image | id: product.title
```

{% endcode %}

{% code title="Shopify" %}

```
{% if section.settings.image_image %}
        {{ section.settings.image_image | image_url: width: 400 | image_tag: loading: 'eager', class: 'more_image', id: product.title }}
{% else %}
        <img src="{{'logo.svg' | asset_url }}" class="more_image" >
{% endif %}
```

{% endcode %}

</details>

#### url Input

This attribute creates a field for entering external URLs or relative paths from your Shopify theme manually. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:url = Button Link
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/GPHLxnJqYKVNba00FNEe)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### Checkbox

The checkbox attribute displays a checkbox input. It’s useful for enabling or disabling features, such as showing an announcement bar. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:checkbox = Show announcement
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/ITRiKj0HpjN8JyjJGVAg)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### Collection Input

A collection setting displays a picker field that automatically lists all available collections in the store. Apply this to a product item to iterate over the collection products. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:collection = Collection
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/G7zscj69OUmbGQFchhCD)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### Blog

A blog setting displays a picker field that automatically shows all available blogs in the store. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:blog = Blog
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/YZJi8M3UKquRQV1ozc2B)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### Article

An article setting displays a picker field that automatically lists all available articles in the store. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:article = Article
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/7g04rwAaxxpjOoPZzx6g)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### Product

A product setting displays a picker field that automatically lists all available products in the store. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:product = Product
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/7jBEOyBrXJvZGETSW5h0)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

#### HTML Input

An html setting provides a multi-line text field where you can enter HTML markup. The value of the attribute itself will be used as the setting’s label in the editor.

{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}

```
li-settings:html = Video embed
```

{% endcode %}
{% endcolumn %}

{% column %}
{% hint style="success" %}
Shopify

![](/files/zPVMagfqB5kPvrizei9q)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
For even more advanced settings use our [custom settings attribute](/section-settings/custom-settings).
{% endhint %}


# Sections

## Sections

Each `li-settings` tag needs to be enclosed within a section. For this purpose, use the `li-section` tag, which can be applied to your Webflow sections. You have the flexibility to choose a name for it, with a maximum limit of 30 characters.

{% code title="Webflow" fullWidth="false" %}

```
li-section = Section Name
```

{% endcode %}

{% columns %}
{% column %}

<figure><img src="/files/aT2BBeByRZH10m4hUrDr" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/n5mnFtPsdvS5uRqCS93Q" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}

#### Section Categories

For a better overview in the Shopify Editor, you can add a section to a category by adding the attribute li-section:category. The value of this attribute will then be the name of the category.

{% code title="Webflow" fullWidth="false" %}

```
li-section:category = Category Name
```

{% endcode %}

<figure><img src="/files/gM3DUldWuU9MMt7cUxDC" alt=""><figcaption></figcaption></figure>

## **Section Groups**

[Section groups](https://shopify.dev/docs/storefronts/themes/architecture/section-groups) are typically used for the header and footer. They are JSON data files that define a list of sections and app blocks along with their settings. Merchants can add, remove, and reorder these sections within the theme editor.

Simply add the `li-section-group` attribute to a `<div>` element and place your sections inside it — for example, the Navigation section.

{% code title="Webflow" fullWidth="false" %}

```
li-section-group = Section Group Name
```

{% endcode %}

{% hint style="warning" %}

* Section groups are not allowed inside the `li-content-for-layout` element
* Section groups cannot have the same name as other section
* Changes made to the section group will be reflected on all pages where the group is used
  {% endhint %}

To define the type of a section group, use the `li-section-group:type` attribute. This helps Shopify determine where the section group is used. Accepted values:

* `header`
* `footer`
* `aside`
* A custom type, in the format `custom.<name>`, where `<name>` is a unique identifier for your section group type.

{% code title="Webflow" fullWidth="false" %}

```
li-section-group:type = header
```

{% endcode %}

## **Enable or disable Sections in the Shopify Editor**&#x20;

**Enable**: If you want to show certain sections only on specific templates, you can use the tag modifier `li-section:on_templates`. In the value, list all the templates where the section should be shown, separated by commas. To show the section on all templates, just use `*`.

See the official [Shopify documentation](https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#enabled_on) for more information on this topic.

{% code title="Webflow" %}

```
li-section:on_templates = page, product
```

{% endcode %}

You can do the same for section groups using the tag modifier. To target all groups, just use `*` in the value.

{% code title="Webflow" %}

```
li-section:on_groups = footer, header
```

{% endcode %}

**Disable**: If you want to hide certain sections on specific templates, use the tag modifier `li-section:off_templates`. List the templates (comma-separated) where the section should be hidden. To hide the section on all templates, use `*` in the value.

See the official [Shopify documentation](https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema#disabled_on) for more information on this topic.

{% code title="Webflow" %}

```
li-section:off_templates = page, product
```

{% endcode %}

You can do the same for section groups using the tag modifier. To target all groups, just use `*` in the value.

{% code title="Webflow" %}

```
li-section:off_groups = footer, header
```

{% endcode %}


# Blocks

Blocks offer a dynamic method for repeatedly adding a single element, and they can include all the options mentioned earlier. Think of them as elements to infuse dynamic functionality into some of your elements. For instance, you can use blocks to construct a dynamic slider by adding the block to a single slide of the slider.

In doing so, each block created in the Shopify Theme Editor will result in a new slide being generated. It is important to note that, similar to sections, options can be added within blocks, but not directly to the block itself. To create a block, simply add the attribute:

{% code title="Webflow" fullWidth="false" %}

```
li-block = Block Name
```

{% endcode %}

{% columns %}
{% column %}

<figure><img src="/files/uCrW4dTys2k2MKBzhpnW" alt="" width="294"><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/Vhfj9FICr1TUVVhoxwXL" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

## Different Blocks in the same Array

`li-content-for-blocks` provides a flexible way to use multiple blocks within a wrapper. Inside `li-content-for-blocks`, you can add multiple `li-block` elements with different functions, like a paragraph, headline, or button. In the Shopify Theme Editor, the number of blocks and their order can be configured.

{% tabs %}
{% tab title="li-content-for-blocks " %}
{% code title="Webflow" fullWidth="false" %}

```
li-block = Heading
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-block = Paragraph
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-block = Button
```

{% endcode %}
{% endtab %}
{% endtabs %}


# Theme Blocks

`li-cf-theme-blocks` offers an even more flexible way. It’s based on [Shopify’s new feature](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/quick-start) that allows blocks to be nested.

Instead of using the regular `li-cf-blocks`, you can use `li-cf-theme-blocks`.

When using this method, the converter creates an extra blocks folder and turns blocks into reusable components that can be nested inside one another.

<figure><img src="/files/Eg5qgQzWE1lnUKvuz84v" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="li-content-for-theme-blocks" %}
Inside this element, you can only add items that have the attribute `li-block="custom-name"`. Within these block elements, you can use all available setting attributes — and you can even nest another `li-cf-theme-blocks` inside.

**Limitations to keep in mind:** You can only use **one** `li-cf-theme-blocks` per section (Shopify doesn’t allow more).

{% code title="Webflow" fullWidth="false" %}

```
li-block = Item
```

{% endcode %}

***

Inside the Item Block you can use another `li-block` and another `li-cf-theme-blocks` element

{% code title="Webflow" fullWidth="false" %}

```
li-block = Item
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-content-for-theme-blocks
```

{% endcode %}

***

Inside an `li-cf-theme-blocks` element, you can nest another `li-cf-theme-blocks` or other `li-blocks`. This structure can be repeated up to **8 times** — that is Shopify’s limit.
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**Important:**

* When using `li-cf-theme-blocks` you are not able to use `li-block` or `li-cf-blocks` in the same section.&#x20;
* You can nest `li-block` inside `li-cf-theme-blocks`
* You can not nest `li-cf-blocks` inside `li-cf-theme-blocks`
  {% endhint %}

#### Block Categories

For a better overview in the Shopify Editor, you can add a block to a category by adding the attribute li-block:category. The value of this attribute will then be the name of the category.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-block:category = Category Name
```

{% endcode %}

{% endcolumn %}

{% column %}

<figure><img src="/files/AGo5syVYOezCVgpZCDHB" alt=""><figcaption></figcaption></figure>

{% endcolumn %}
{% endcolumns %}

#### Block Tags

When using Theme Blocks, Shopify automatically renders an additional wrapper \<div> around each block. Since you already add the li-block to a wrapping element, this results in unnecessary nested \<div>s. Blocks are now rendered without Shopify’s extra wrapper by default. But if you need a specific HTML tag, you can use li-block:tag="div" (for example), which will wrap the li-block element in an tag.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-block = Text
li-block:tag = div
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<div>
    <p>{{ product.title }}</p>
</div>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

#### Giving Access to all Theme blocks in a Theme

If you want a section to have access to all blocks in a theme, you can add `theme` as the value of the `li-cf-theme-blocks` attribute. Like this:

{% code title="Webflow" fullWidth="false" %}

```
li-cf-theme-blocks="theme"
```

{% endcode %}

#### Private Blocks

By adding an underscore (\_) in front of a block name (li-block=”\_Image”), you can make the block private to a specific section. This prevents it from appearing in sections that have access to all theme blocks. This gives you more control over how and where theme blocks can be used and combined. [Learn more here.](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/targeting#private-blocks)


# Static Blocks

Static Theme Blocks give theme developers greater control over how blocks and sections are structured. Unlike regular Theme Blocks, they are rendered statically in Liquid rather than dynamically.&#x20;

Because of this, Static Theme Blocks are especially useful when:&#x20;

* A theme requires blocks that should not be moved or removed by the merchant
* Blocks can be rendered conditionally,&#x20;
* having multiple places where you want to add nested blocks to a section

Static Theme Blocks still allow full access to customizable settings, ensuring flexibility without sacrificing control.

<a href="https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/static-blocks" class="button secondary">Shopify Docs</a>

Static Theme Blocks can be created by adding the li-static-block attribute to a \<div>:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-static-block = Item
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
{% content_for "Item", type: "type", id: "uniqueid" %}
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

This generates a new block file, which is then referenced directly within the corresponding Liquid file.

<figure><img src="/files/rLfaLEg2QEoAW7XeZnHD" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="li-static-block="Item"" %}
and this: Inside this element, you can then use all the elements as usually. For example li-cf-theme-blocks to nest other blocks inside.
{% endtab %}
{% endtabs %}

#### Loop or conditionally render static blocks.

To loop over or conditionally render a static block, simply wrap it in a `div` and add either `li-for:inside` or `li-if:inside`. This will also be reflected in the Shopify Theme Editor. Learn more about [looping](/liquid-attributes/iteration-lists) and [conditional rendering here.](/liquid-attributes/conditional)

<figure><img src="/files/dqq5Pd8wfieIE3qc25E7" alt=""><figcaption></figcaption></figure>

#### Adding Parameters to your Static Blocks

If you want to pass data into your static blocks, you can use the attribute modifier like this:

{% code title="Webflow" fullWidth="false" %}

```
li-static-block = Item
li-static-block::attributes=current.product: product
```

{% endcode %}

This allows you to access dynamic data from the for loop like this:&#x20;

<figure><img src="/files/ax7vURpQkUmjaaHsXzhz" alt=""><figcaption></figcaption></figure>


# App Blocks

When using `li-content-for-blocks`, or  `li-content-for-theme-blocks` you can also include App Blocks. If you have an app installed that supports App Blocks, they will now appear in the Shopify Editor.

<figure><img src="/files/5gT2BG4yQJUYUIwMSw8T" alt="" width="435"><figcaption></figcaption></figure>


# Custom Settings

You can also use `li-settings:custom` to create other settings which can be adjusted in the Shopfy Theme Editor. Add `li-settings:custom="example-name"` to a Webflow Embed and place the Section-Settings-Schema inside of it. In this example, we are creating a range slider.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```json
{
  "type": "range",
  "id": "font_size",
  "min": 12,
  "max": 24,
  "step": 1,
  "unit": "px",
  "label": "Font size",
  "default": 16
}
```

{% endcode %}
{% endcolumn %}

{% column %}

<figure><img src="/files/vFDvAJoK47fgTCvoHfZv" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

You can refer to the setting inside your section like this: `style="font-size: {{ section.settings.font_size }}"`

The value of the attribute `li-settings:custom` will be used as a header inside the Shopify Theme Editor. This makes it easier to organize and group related settings inside one embed, so everything looks cleaner later on in the Shopify Theme Editor. If you do not want a header to appear, leave the value of `li-settings:custom` empty.

To group your settings into one header, turn your settings JSON into an array, like this:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```json
[
  {
    "type": "range",
    "id": "font_size",
    "min": 12,
    "max": 24,
    "step": 1,
    "unit": "px",
    "label": "Font size",
    "default": 16
  },
  {
    "type": "text",
    "id": "headline",
    "label": "Headline",
    "default": "Example Headline"
  }
]
```

{% endcode %}
{% endcolumn %}

{% column %}

<figure><img src="/files/3id2f6D9heQfX9ncoe3P" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}


# Overview

## Liquid Objects <a href="#liquid-tags" id="liquid-tags"></a>

The CMS content of your shop can be accessed using objects such as `product`, `collection`, or `cart`. You can place these objects in Webflow using the `li-object` tag. Learn more about the available options with Shopify objects in the [Objects chapter](/liquid-attributes/objects).&#x20;

## Liquid Filters

With liquid filters, you can modify the output of your content. You can calculate values, format a string (text) and so much more. You can find a list of all filters [here](https://shopify.dev/docs/api/liquid/filters) or in the Shopify [Cheat sheet](https://www.shopify.com/partners/shopify-cheat-sheet).

Filters can be applied to a `li-object` value by using a pipe symbol `|` followed by the desired filter. Learn more about all the possibilities with Shopify filters in the [Filters chapter](/liquid-attributes/filters).

## Liquid Tags <a href="#liquid-tags" id="liquid-tags"></a>

Liquid tags, in the context of the Shopify Liquid template language, are special markers enclosed in curly braces and percentage signs, like `{% ... %}`. These tags are used to perform various control and logic operations within the template. Liquid tags are responsible for executing specific actions, such as loops, conditionals, and more, to dynamically generate content or perform operations on the data.

To use this functionality in Webflow, we have prepared the following tags. These tags will always wrap the `div` they are attached on.

You can't apply multiple liquid tags (`li-for`, *`li-if`*, `li-unless`) to one element. If you need that, you should use the `:inside` modifier to display the tag inside the `div` it's applied. Learn more about all the possibilities with Shopify tags in the [Filters chapter](/liquid-attributes/filters), [Conditional chapter ](/liquid-attributes/conditional)and [Other Liquid Tags](/liquid-attributes/other-liquid-tags) chapter.


# Objects

The CMS content of your shop can be accessed using objects such as `product`, `collection`, or `cart`. You can place these objects in Webflow using the `li-object` tag. So a custom attribute for the product title would look like the following:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = product.title
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p>{{ product.title }}</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

In this example, the product is the object, and you can access detailed information using dot notation (for instance `product.title` or `product.selected_variant.price`). You can explore all the available Shopify objects [here](https://shopify.dev/docs/api/liquid/objects). Additionally, don't forget to check out the Shopify [Cheat sheet](https://www.shopify.com/partners/shopify-cheat-sheet) for a more condensed reference.

{% embed url="<https://app.arcade.software/share/z9g0UCaZmERTbwB47StZ?ref=share-link>" %}

## **Positioning**

With an additional modifier, you can also determine the object's positioning. For example, on a product link:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object:href = product.url
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<a href="{{ product.url }}"><a>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}
For positioning you can use all the [HTML attributes](https://www.w3schools.com/tags/ref_attributes.asp) which are available or create your own `data-attributes`. Here are some common HTML Attributes:

* `src` (for images)
* `class`
* `value`
* `placeholder` (for inputs)
* `alt` (for images)
* `width`
* `height`
* `text` (It's not an HTML attribute; however, both li-object and li-object:text yield the same results)
* `style` (for this attribute it makes more sense to use li-attribute)
* `name`
  {% endcolumn %}

{% column %}

<figure><img src="/files/akM8zJhe4l7YNZ2YeLdt" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
**Tipp:**\
You can also place multiple objects with different modifiers on a single element, such as a *src* and *alt* attribute.
{% endhint %}


# Filters

With liquid filters, you can modify the output of your content. You can calculate values, format a string (text) and so much more. You can find a list of all filters [here](https://shopify.dev/docs/api/liquid/filters) or in the Shopify [Cheat sheet](https://www.shopify.com/partners/shopify-cheat-sheet).

Filters can be applied to a `li-object` value by using a pipe symbol `|` followed by the desired filter. Here's an example of how to show the product price in the store's currency.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object:text = product.price | money
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p>{{ product.price | money }}</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

{% code title="Rendered on Shop" fullWidth="false" %}

```
<p>$100</p>
```

{% endcode %}

**Important:** Formats a given price based on the store's [currency setting](https://help.shopify.com/manual/payments/currency-formatting)

If you want to use multiple filter on one object just add another | after your first filter. You can add as many filters as you want.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object:text = product.price | money | plus: 2
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p>{{ product.price | money | plus: 2 }}</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

{% code title="Rendered on Shop" fullWidth="false" %}

```
<p>$100.02</p>
```

{% endcode %}

## **Most common filters**

Below, you'll find some of the most frequently used filters by us, giving you an idea of the possibilities.

* `| money`
* `| date: '%B %d, %Y'`
* `| plus: 15`
* `| img_url: master`

Filters may seem overwhelming initially, but you can find clear documentation for all their functionalities in the [Shopify Docs](https://shopify.dev/docs/api/liquid/filters).


# Iteration (Lists)

## For Loop

To loop through an array — such as a list of products or product tags — you can use the `li-for` tag. This tag automatically duplicates the associated element for each item in the array. Within the loop, you have direct access to the current object being iterated over.

For example, when looping through a list of products, you can access individual product properties using dot notation (e.g. `product.price`).

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
<div li-for="product in collection.products">
    <div li-object="product.price"></div>
</div>
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
{% for product in collection.products %}
   <div>{{ product.price }}</div>
{% endfor %}
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

<figure><img src="/files/JrGJm1afdJCORTXZpX4T" alt=""><figcaption></figcaption></figure>

For positionin&#x67;**,** you can use the `:inside` modifier. The converted code will look like this:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-for:inside = product in collection.products
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<div>
   {% for product in collection.products %}
      {{ product.title }}
   {% endfor %}
</div>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}


# Conditional

To show or hide certain elements based on specific conditions, you can use conditional tags. This gives you more control over the frontend and can improve the user experience.

## If

Using `li-if`, you can show an element when a specified condition is met. For instance, you can verify the availability of a product. If the condition is `true`, you can display the "Add to Cart" button or a specific tag.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-if = product.available != true
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```liquid
{% if product.available != true %}
   <div class="product_tag">Sold out</div>
{% endif %}
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

\
Therefore, Shopify gives you a bunch of operators you can use to check if data is true or contains something. Here is a list of all the operators:

* `==`
* `!=`
* `>`
* `<`
* `<=`
* `>=`
* `or`
* `and`
* `contains`

## Unless

With this tag, you check if the condition is `false`. The functionality is the same as `li-if`.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-unless = product.available == true
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```liquid
{% unless product.available == true %}
   <div class="product_tag">Sold out</div>
{% endunless %}
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

## Case

When you want to display an element which should meet different conditions, you can wrap these elements with the `li-case` tag. Inside the wrapper, you put the elements with different `li-when` tags.

{% code title="Webflow" fullWidth="false" %}

```
li-case = product.type
```

{% endcode %}

Within `li-case`, you can only include elements with the `li-when` attribute. The value of this attribute specifies the condition to be met. If you leave the last `li-when` tag empty, it will act as an `else` condition. For Example:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-when = 'T-Shirt'
```

{% endcode %}
{% endcolumn %}

{% column %}

<pre class="language-liquid" data-title="Shopify" data-full-width="false"><code class="lang-liquid"><strong>&#x3C;div> //Element where li-case was attached
</strong>   {% case product.type %}
     {% when 'T-Shirt' %}
         &#x3C;div>T-Shirt&#x3C;/div>
      {% when 'sweater' %}
         &#x3C;div>Sweater&#x3C;/div>
      {% else %}
      &#x3C;div>Other products&#x3C;/div>
   {% endcase %}
<strong>&#x3C;/div>
</strong></code></pre>

{% endcolumn %}
{% endcolumns %}


# Other Liquid Tags

Use `li-tag` to wrap a string within a Liquid tag `{% ... %}`*,* ideal for [assigning,](https://shopify.dev/docs/api/liquid/tags/assign) [incrementing](https://shopify.dev/docs/api/liquid/tags/increment), [decrementing](https://shopify.dev/docs/api/liquid/tags/decrement) or [capturing](https://shopify.dev/docs/api/liquid/tags/capture) a variable.

{% code title="Webflow" fullWidth="false" %}

```
li-tag = assign product_title = product.title | upcase
```

{% endcode %}

{% code title="Shopify" fullWidth="false" %}

```html
{% assign product_title = product.title | upcase %}
```

{% endcode %}

{% hint style="warning" %}
**Important:**

The div element that the `li-tag` is attached to gets replaced by the Liquid tag, so it cannott have any child elements. This is especially useful if you want to create more complex Liquid logic or want to use other Liquid tags from [Shopify’s documentation](https://shopify.dev/docs/api/liquid/tags/break).
{% endhint %}


# Forms

Shopify provides a variety of form types for different use cases, such as login, signup, cart, address, and newsletter forms. To implement these forms in Webflow, use the `li-form` attribute on the appropriate form element. In the value field of the custom attribute, specify the desired form type (e.g., `login`, `signup`, `cart`, etc.).

For a complete overview of all supported form types, refer to the [Shopify documentation](https://shopify.dev/docs/api/liquid/tags/form).

{% columns %}
{% column %}
{% code title="Webflow" overflow="wrap" %}

```
li-form = customer
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" overflow="wrap" %}

```liquid
{% form 'customer', class: 'footer_form' %}
      // your form content
{% endform %}
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### Form modifier

Some Shopify forms need more details than just the form type. For example, a product form might need to know which product to add, or a return form might need a specific return URL. To handle this, you can use form modifiers. Simply add a colon (:) at the end of li-form and write the modifier you want to use. if the modifier requires a value, you can include it in the value field of the attribute.

**Return to:** if you want to redirect users to a specific page after form submission, you can add an additional `li-form` attribute using the `:return_to` modifier. This does not replace the original `li-form` attribute — it works alongside it.

{% columns %}
{% column %}
{% code title="Webflow" overflow="wrap" fullWidth="false" %}

```
li-form = customer
li-form:return_to = /pages/thank-you
```

{% endcode %}

{% endcolumn %}

{% column %}
{% code title="Shopify" overflow="wrap" fullWidth="false" %}

```liquid
{% form 'customer', return_to: '/pages/thank-you', class: 'footer_form' %}
      // your form content
{% endform %}
```

{% endcode %}

{% endcolumn %}
{% endcolumns %}

In this example, you will also notice that a class is assigned to the element. This class is taken directly from the element to which the `li-form` attribute is applied.

**Product:** In a product form, you need to pass the product information — otherwise, Shopify won’t know which product to add. For example, this is necessary on a collection page. You can easily do this by adding the :product modifier.

{% columns %}
{% column %}
{% code title="Webflow" overflow="wrap" fullWidth="false" %}

```
li-form = product
li-form:product =
```

{% endcode %}

{% endcolumn %}

{% column %}
{% code title="Shopify" overflow="wrap" fullWidth="false" %}

```liquid
{% form 'product', product, class: 'product_form' %}
      // your form content
{% endform %}
```

{% endcode %}

{% endcolumn %}
{% endcolumns %}

Within the form, you can use input elements tailored to the specific form you wish to create. These inputs require unique names, which you can reference in the Shopify [documentation](https://shopify.dev/docs/api/liquid/tags/html-tags) and soon in our own documentation.

Most forms are already included in the [Starter Template](/useful/liquiflow-starter-templates), making it convenient for you to reference them whenever needed.


# Snippets

To keep your Shopify theme code clean and modular, you can use the `li-snippet` attribute. Think of it like components in Webflow: reusable building blocks that can be defined once and placed anywhere in your theme.

{% hint style="warning" %}
Important: The element with the li-snippet attribute will be removed during conversion. So don’t add any important classes or styles to that element, because they won’t survive.
{% endhint %}

To use it, simply convert the element you want to reuse into a Webflow component. Then, add the `li-snippet` attribute to that element and assign it a custom name of your choice (limited to 15 characters). This name will be used as the filename for the snippet in Shopify.

{% code title="Webflow" fullWidth="false" %}

```
li-snippet = product_item
```

{% endcode %}

When using `li-object` within a snippet, it's essential to pass the corresponding object into that snippet. Just add another custom attribute to the Element. For instance, you can use our modifier to pass the product into the snippet. Here's an example of how to do it:

{% code title="Webflow" fullWidth="false" %}

```
li-snippet = product_item
li-snippet:product = product
```

{% endcode %}

This will be converted into the following. The Content of the snippet will be placed in a snippet file inside the snippet folder in your theme.

{% code title="Shopify" fullWidth="false" %}

```liquid
{% render 'product_item', product: product %}
```

{% endcode %}

{% columns %}
{% column %}

<figure><img src="/files/mKusATTCsTsxZqgJiVuu" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/C1YrBUS46yUQ93ApznaW" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
**Disclaimer:**\
While not mandatory, following this step enhances the structure of your theme and makes it more reader-friendly for other Shopify developers.
{% endhint %}


# Miscellaneous

During development, we identified several ways to enhance the capabilities of the process. Therefore, we implemented the following tags.

## li-attribute <a href="#li-attribute" id="li-attribute"></a>

The `li-attribute` tag allows you to assign reserved HTML attributes — such as `class`, `src`, or `href` — to any element. This is particularly useful in Webflow, where certain attributes are restricted or automatically managed by the designer.

Example:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-attribute:class = {% if product.available %} tex-color-green {% endif %}
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```liquid
<div class ="{% if product.available %}tex-color-green{% endif %}"></div>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

Another example:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-attribute:id = {{ product.id }}
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```liquid
<div id="{{ product.id }}"></div>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

## li-liquid <a href="#li-liquid" id="li-liquid"></a>

When using Liquid code directly in Shopify, Webflow may alter the formatting of certain characters —especially double quotes — within Custom Code elements or \<script> tags. To prevent this, you can use the `li-liquid` attribute.

By applying `li-liquid` to a Custom Code element, the converter will detect the enclosed Liquid code and preserve its original formatting during export.

This ensures that your Liquid logic remains intact and functions correctly in the final Shopify theme.

## li-paginate <a href="#li-paginate" id="li-paginate"></a>

When using a for loop with `li-for`, you can manage [pagination](https://shopify.dev/docs/api/liquid/tags/paginate) using the `li-paginate` tag. Inside the `li-paginate` tag, you’ll have access to the [pagination object](https://shopify.dev/docs/api/liquid/objects/paginate). This is useful, for example, on collection pages. By default, only 50 products are rendered, but with `li-paginate`, you can override this limit.

{% columns %}
{% column %}

<pre data-title="Webflow" data-overflow="wrap" data-full-width="false"><code><strong>li-paginate = collection.products
</strong>li-paginate:by = 25
</code></pre>

{% endcolumn %}

{% column %}
{% code title="Shopify" overflow="wrap" fullWidth="false" %}

```liquid
{% paginate collection.products by 50 %} //children of your element {% endpaginate %}
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

## li-cloak <a href="#li-cloak" id="li-cloak"></a>

Elements with the `li-cloak` attribute are hidden using CSS. The `li-cloak` tag is removed during conversion. This helps keep them out of view in the Webflow Designer and can make editing easier. To make it work, you need to add this CSS line to your project’s `<head>`: `[li-cloak] { display: none !important; }`. It’s already included in our [Starter Template](https://webflow.com/made-in-webflow/website/liquify-2-0).

{% code title="Webflow" fullWidth="false" %}

```
li-cloak = 
```

{% endcode %}


# JS Events

This document outlines the JavaScript events used in minicart.js and custom.js. These events help manage cart interactions, updates, and notifications within the shopping experience.

**Events in minicart.js**

`carttotalitems`

* Description: This event is triggered to update the total number of items in the cart.
* When: After retrieving the cart data in the getCart method.
* Data: The number of items in the cart.

`cartupdated‍`

* This event is triggered to indicate that the cart has been updated.
* When: After successfully updating the item quantity in the cart in the updateCartItemQuantity method.
* Data: No additional data.

`showcartmessage`

* Description: This event is triggered to display a message in the cart.
* When: After successfully or unsuccessfully updating the item quantity in the updateCartItemQuantity method.
* Data: An object containing status, message, and description.

`currentcartitems`

* Description: This event is triggered to transmit the current items in the cart.
* When: After retrieving the cart data in the returnCartItems method.
* Data: An array of the current cart items (this.cart.items).

**Events in custom.js**

`cartupdated‍`

* Description: This event is triggered to indicate that the cart has been updated.
* When: After adding products to the cart in the methods addToCartWithBundle, addToCart, and addGlobalBundleToCart.
* Data: The current products in the cart (this.products).

`toggleminicart`

* Description: This event is triggered to show or hide the mini cart.
* When: After adding products to the cart in the methods addToCartWithBundle and addGlobalBundleToCart.
* Data: No additional data.

`showcartmessage`

* Description: This event is triggered to display a message in the cart.
* When: After adding products to the cart in the methods addToCartWithBundle, addToCart, addGlobalBundleToCart, and in case of errors in these methods.
* Data: An object containing status, message, and description.


# Metafields and Metaobjects

Metafields and Metaobjects are powerful tools to enrich your store with extra information. You can think of them like CMS lists or collection fields in Webflow.

<figure><img src="/files/ea1dBqqTS6ptpHZNezAm" alt=""><figcaption></figcaption></figure>

### Metafields

There are no special attributes for metafields in <code class="expression">space.vars.Company</code>, but you can still use them with `li-object`, `li-if`, `li-unless`, `li-for`, and `li-attribute.` Basically with any attribute that can work directly with Shopify objects.

Metafields can be created for many resources in your store, such as products, collections, articles, and more. You can set them up in your Shopify admin under Metafields and Metaobjects. The actual content of each metafield is edited on the resource’s detail page in the Shopify backend.

They are attached to a resource object and identified by a namespace (usually custom by default) and a key (the unique name of the field).

Here’s the Shopify metafield documentation if you need more details: <https://shopify.dev/docs/api/liquid/objects/metafield>

For example, you can access a product metafield like this:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = product.metafields.custom.size
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p>{{ product.metafields.custom.size }}</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

Or from a collection like this:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = collection.metafields.custom.info
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p>{{ collection.metafields.custom.info }}</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

#### Metafield Types

There are different metafield types you can define in the Shopify settings — such as text, numbers, files, or even references to other products, articles, or metaobjects. All of them work almost the same when you access their data in <code class="expression">space.vars.Company</code>.

**Files**

When using a metafield of type file, you need to apply the correct filter for that file type. For example, an image requires the image\_url filter, like this:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```html
li-object:src="product.metafields.custom.instructions | image_url: width: 1000
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<img src="product.metafields.custom.instructions | image_url: width: 1000">
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

**Accessing metafields of type `list`**

Metafields of type list return an array in their value property. You can loop through this array using `li-for` to access each item.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```html
<div li-for:inside="item in product.metafields.custom.ingredients.value">
    <div li-object="item"></div>
</div>
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<div> 
    {% for item in product.metafields.custom.ingredients.value %}
        <div>{{ item }}</div>
    {% endfor %}
</div>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### Metaobjects

Metaobjects are always arrays. You can create different property types for a metaobject, such as title or description. When you iterate over a metaobject, you can access these properties for each item in the array. For example:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```html
<div li-for:inside="faq in shop.metaobjects.fa_qs.values">
    <div li-object="faq.title"></div>
</div>
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<div> 
    {% for faq in shop.metaobjects.fa_qs.values %}
        <div>{{ faq.title }}</div>
    {% endfor %}
</div>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}


# How it Works

## Core Principals <a href="#core-principals-1" id="core-principals-1"></a>

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 <code class="expression">space.vars.Company</code>, or if you just want to quickly test a section in Shopify without converting the whole theme.

In general, you can use all <code class="expression">space.vars.Company</code> attributes with the Section Converter — you’ll find them in our [documentation](/fundamentals/getting-started). The basic idea is the same as with the <code class="expression">space.vars.Company</code> Theme Builder. However, there are a few things you **cannot** use:

* <code class="expression">space.vars.Company</code> **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`](/section-settings/theme-blocks) is not supported yet. But you can still use [`li-block`](/section-settings/blocks) or [`li-content-for-blocks`](/section-settings/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** <a href="#step-by-step-guide" id="step-by-step-guide"></a>

{% stepper %}
{% step %}
First, build your section in Webflow.&#x20;
{% endstep %}

{% step %}
Add the [`li-section`](/section-settings/sections) tag with a value for the section name to an element — this will be the element you copy later.
{% endstep %}

{% step %}
Inside the [`li-section`](/section-settings/sections) element, add custom functionality to let store owners change text, images, or other content. Here is the Documentation for all [li-settings](/section-settings/settings) and[ li-objects](/liquid-attributes/objects)
{% endstep %}

{% step %}
Then copy the element with the [`li-section`](/section-settings/sections) tag.
{% endstep %}

{% step %}
Open the <code class="expression">space.vars.Company</code> Section Converter and paste the Webflow component.
{% endstep %}

{% step %}
After conversion, copy the generated code.
{% endstep %}

{% step %}
Go to your Shopify theme’s code editor.
{% endstep %}

{% step %}
In the **Sections** folder, click **Add new section**.

<figure><img src="/files/gNUv8kd8koq3vec0k6K0" alt=""><figcaption></figcaption></figure>
{% endstep %}

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

{% step %}
Delete the default Shopify preset code and paste your converted code instead.
{% endstep %}

{% step %}
Save the section.
{% endstep %}

{% step %}
Go to the Shopify theme editor — you can now use, edit, and reuse your new section.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**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`](/section-settings/theme-blocks) to create Theme Blocks. Use li-block or  [`li-content-for-blocks`](/section-settings/blocks) instead.
* If you add **Add to Cart** functionality, make sure you use your Shopify theme’s native method. [`li-element`](/add-ons/liquiflow-elements) attributes only work with a full <code class="expression">space.vars.Company</code> theme.
* You can use [`li-snippet`](/liquid-attributes/snippets) to reference an existing snippet from your Shopify theme.
  {% endhint %}


# Liquiflow Elements

## Introduction <a href="#introduction" id="introduction"></a>

Our provided tags ([`li-object`](/liquid-attributes/objects), [`li-for`](/liquid-attributes/iteration-lists), [`li-if`](/liquid-attributes/conditional) etc.) offer the capability to construct nearly any desired Shopify logic. However, for more intricate components such as the Mini-Cart or Variant swatches, we've introduced `li-element`, `li-js-object`, `li-js-price` and `li-js-if` tags.&#x20;

These tags simplify the process, allowing you to create complex components more easily. They harness real-time data from Shopify APIs, enabling seamless data updates without requiring the site to reload. This significantly enhances the overall e-commerce experience. In the following steps, we furnish the initial Liquify building blocks to craft exceptional e-commerce experiences.

## Alpine JS <a href="#alpine-js" id="alpine-js"></a>

Alpine is a robust, minimal tool designed for crafting behavior directly within your markup, serving as a modern equivalent to jQuery. Simply insert a script tag (Already inside the Starter Template), and you are ready to begin. We leverage Alpine JS to offer you the foundational elements for creating AJAX behavior within your cart or variant selector.

Moreover, Alpine JS extends its assistance to other JavaScript functionalities as well. To explore the full range of features that Alpine JS offers, we recommend referring to the [documentation](https://alpinejs.dev/start-here) and installing the Alpine JS [Chrome extension](https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk). This extension allows you to inspect the data provided by the Shopify API and its associated objects, facilitating a comprehensive understanding of their structure and content.

```
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

## JS Attributes

### li-object vs li-js-object <a href="#li-object-vs-li-js-object" id="li-object-vs-li-js-object"></a>

Both tags work similarly by displaying information from the Shopify CMS. The regular [`li-object`](/liquid-attributes/objects) is used for Liquify functionality, while the `li-js-object` accesses Shopify's API responses via Alpine JS. We currently use the `li-js-object` in various components and plan to implement more in the future. Here is an example on how the two tags get converted:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = product.title
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p>{{ product.title }}</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

And this is an example for `li-js-object`:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-js-object = product.title
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p x-text="product.title">Placeholder</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### li-js-price <a href="#li-js-price" id="li-js-price"></a>

As we can't apply Liquify filters in our Alpine JS Data, we have to come up with alternative methods. This special object tag will display a number in the store's currency.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-js-price = product.price
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<p x-text="LiquifyHelper.moneyFormat(product.price, true, '€{{amount_with_comma_separator}}')">Placeholder</p>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### li-js-if <a href="#li-js-if" id="li-js-if"></a>

If you want to hide things based on certain rules, you can use `li-js-if` with Shopify's Date API. For example, the original price when a discount is applied.

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-js-if = product.price < product.original_price
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

```html
<template x-if="product.price < product.original_price"> Placeholder </template>
```

{% endcode %}
{% endcolumn %}
{% endcolumns %}

### li-element <a href="#li-element" id="li-element"></a>

Sometimes, we use the `li-element` in Webflow for special purposes to make things easier. We've established predefined functionalities for these tags, with plans for further expansion in the future. For instance, the "Add-to-cart" element is given a special tag called `li-element="add-to-cart"`. In the next sections, we'll explain how these are commonly used.


# Mini Cart

{% columns %}
{% column %}
The Mini-Cart is a widely used component in the E-Commerce realm. It pops up when a product is added to the cart and usually slides in from the right side. We avoid using the Webflow-Ecommerce Elements in Webflow due to its excessive and unnecessary JavaScript load we don't need in Shopify. Instead, in Our Starter Theme, you'll discover a header containing all the necessary elements.
{% endcolumn %}

{% column %}

<figure><img src="/files/RI9NslYp6W1bjNmuez2T" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

Before we explore the component further, here are some versatile elements that can be used throughout your entire Webflow project:

#### Add-to-Cart <a href="#add-to-cart" id="add-to-cart"></a>

Place this element within a product item. It adds the current variant to the cart and triggers the Mini-Cart to open upon clicking.

{% code title="Webflow" fullWidth="false" %}

```
li-element = direct-add-to-cart
```

{% endcode %}

#### Mini-Cart Toggle <a href="#mini-cart-toggle" id="mini-cart-toggle"></a>

This element toggles the mini-cart's visibility upon clicking and can be positioned anywhere within the theme. Typically, it's used as a cart icon in the navbar for easy access.

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-toggle
```

{% endcode %}

#### Mini-Cart Item Count <a href="#mini-cart-item-count" id="mini-cart-item-count"></a>

This element displays the current number of items in the cart and can be positioned anywhere within the theme. It's commonly used to show the item count in the navbar.

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-item-count
```

{% endcode %}

#### Mini-Cart Empty

This element is displayed when the mini-cart is empty and can be placed anywhere within the theme.

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-empty
```

{% endcode %}

### Mini-Cart Component <a href="#mini-cart-component" id="mini-cart-component"></a>

Discover all the essential elements required for and usable within the mini cart here. The grey outlines show how the elements should be nested within one another.

**mini-cart:** This element holds and shows the component. Every following element should go inside this one.

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart
```

{% endcode %}

{% tabs %}
{% tab title="mini-cart" %}
**mini-cart-container:** This element is the actual Mini-Cart and appears animated when the `is-open` class is applied. You can only position this element once on a page. It needs to be inside the `mini-cart`

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-container
```

{% endcode %}

Within this element, use the `li-js-object` to showcase the cart information. Here's an example of the objects available for use:

* `total.price`
* `total.discount`
* `total.original_total_price`
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title=" mini-cart > mini-cart-container" %}
**mini-cart-full:** This element should be placed within the `mini-cart-container` element and will be shown when the cart has items inside. It needs to be inside the `mini-cart-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-container
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title=" mini-cart > mini-cart-container > mini-cart-full" %}
**mini-cart-item:** This element should be placed within the `mini-cart-full` element and represents an individual item within the Cart. It needs to be inside the `mini-cart-full`

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-item
```

{% endcode %}

Within this element, use the [`li-js-object`](#li-object-vs-li-js-object) to showcase product information. Here's an example of available objects for use:

* `product.title`
* `product.featured_image`
* `product.vendor`
* `product.price` (name: [`li-js-price`](#li-js-price))
  {% endtab %}
  {% endtabs %}

{% tabs %}
{% tab title=" mini-cart > mini-cart-container > mini-cart-full > mini-cart-item" %}
**mini-cart-item-increase:** This element should be nested inside the `mini-cart-item` and can be added to a `div` to increment the product quantity in the cart. Change the Cursor to pointer for a better usability. It needs to be inside the `mini-cart-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-item-increase
```

{% endcode %}

**mini-cart-item-decrease:** This element should be nested inside the mini-cart-item and can be added to a `div` to decrease the product quantity in the cart. Change the Cursor to pointer for a better usability. It needs to be inside the `mini-cart-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-item-decrease
```

{% endcode %}

**mini-cart-item-remove:** This element should be nested inside the `mini-cart-item` and can be added to a `div` to remove the product from the cart. Change the Cursor to pointer for a better usability. It needs to be inside the `mini-cart-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-item-remove
```

{% endcode %}

**mini-cart-item-quantity:** This element should be placed within the `mini-cart-item` and connected to a `div`. The *div* will be replaced by an input field, allowing the customer to adjust the quantity of the item. It needs to be inside the `mini-cart-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = mini-cart-item-quantity
```

{% endcode %}
{% endtab %}
{% endtabs %}


# Product Variant Swatch

{% columns %}
{% column %}
We've developed a specialized component for both the Product Page and Product Item to enhance usability. The Product Variant Component enables you to generate a variant swatch, allowing variant selection without page reloading. It shows you what variant you're looking at and lets you change details when you choose a different one. Below, you'll find all the elements you can use.
{% endcolumn %}

{% column %}

<figure><img src="/files/altqihmJVRKAaVc6GlKu" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### Product Variant Component (Radio Buttons) <a href="#product-variant-component-radio-buttons" id="product-variant-component-radio-buttons"></a>

Here you can find all the Elements which are needed and can be used inside the Product Variant Component. The grey outlines show how the elements should be nested within one another.

**product-variant-container:** This Element wraps and renders the component. All the following Element need to be inside this Element.

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-variant-container
```

{% endcode %}

{% tabs %}
{% tab title="product-variant-container" %}
**add-to-cart:** This element enables the "add-to-cart" function. Whenever someone clicks on it, the currently selected variant will be added to the cart. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = add-to-cart
```

{% endcode %}

**checkout-add-to-cart:** This element enables the "add-to-cart" function but redirects the customer directly to the Shopify Checkout. You can choose between using either `add-to-cart` or `checkout-add-to-cart`, depending on your preferred action. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = checkout-add-to-cart
```

{% endcode %}

**add-to-cart-quantity:** This Attribute should be added to an input field. It allows your customers to adjust the quantity before adding the variant to the cart. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = add-to-cart-quantity
```

{% endcode %}

**product-options-loop:** This Element generates a list containing all the options created for that specific product (e.g., Size, Color, etc.). It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-options-loop
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title=" product-variant-container > product-options-loop" %}
**product-options-name:** This Element shows the name of the option, such as "Color." It needs to be inside the `product-options-loop`

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-options-name
```

{% endcode %}

**product-option-loop:** This element generates a list of all option values inside the option (e.g., Red, Green, etc.). It needs to be inside the `product-options-loop`

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-option-loop
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title=" product-variant-container > product-options-loop > product-option-loop" %}
**product-option-input:** This Element represents a single option value, for example, "red," "blue," etc. When the Option Value is not available, the class `is-not-available` will be added. It needs to be inside the `product-option-loop`

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-option-input
```

{% endcode %}

**product-option-name:** This Element needs to bin inside the `product-option-input` and displays the name of the current option value ("red", "blue" etc.). It needs to be inside the `product-option-input`

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-option-name
```

{% endcode %}
{% endtab %}
{% endtabs %}

**direct-add-to-cart:** You can use this attribute without a `product-variant-container` if you don’t want to give users the option to select a variant. In this case, the first available variant will automatically be added to the cart.

{% code title="Webflow" fullWidth="false" %}

```
li-element = direct-add-to-cart
```

{% endcode %}

***

### Product Variant Component (Select Fields) <a href="#product-variant-component-select-fields" id="product-variant-component-select-fields"></a>

Here you can find all the Elements which are needed and can be used inside the Product Variant Component. The grey outlines show how the elements should be nested within one another.

**product-variant-container:** This Element wraps and renders the component. All the following Element need to be inside this Element.

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-variant-container
```

{% endcode %}

{% tabs %}
{% tab title="product-variant-container" %}
**add-to-cart:** This element enables the "add-to-cart" function. Whenever someone clicks on it, the currently selected variant will be added to the cart. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = add-to-cart
```

{% endcode %}

**checkout-add-to-cart:** This element enables the "add-to-cart" function but redirects the customer directly to the Shopify Checkout. You can choose between using either `add-to-cart` or `checkout-add-to-cart`, depending on your preferred action. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = checkout-add-to-cart
```

{% endcode %}

**add-to-cart-quantity:** This Attribute should be added to an input field. It allows your customers to adjust the quantity before adding the variant to the cart. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = add-to-cart-quantity
```

{% endcode %}

**product-options-loop:** This Element generates a list containing all the options created for that specific product (e.g., Size, Color, etc.). It needs to be inside the `product-variant-containe`*r*

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-options-loop
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title=" product-variant-container > product-options-loop" %}
**product-options-name:** This Element shows the name of the option, such as "Color." It needs to be inside the `product-options-loop`

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-options-name
```

{% endcode %}

**product-option-select:** This attribute should be applied to a select element. We recommend using a Webflow custom element, as you’ll also need to add an attribute to the options within the select element. It needs to be inside the `product-options-loop`

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-option-select
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title=" product-variant-container > product-options-loop > product-option-select" %}
**product-option-select-loop:** This Element represents a single option value, for example, "red," "blue," etc. This attribute needs to be placed on a option element inside the `product-option-select`. We recommend using a Webflow custom element for this.

{% code title="Webflow" fullWidth="false" %}

```
li-element = product-option-select-loop
```

{% endcode %}
{% endtab %}
{% endtabs %}

**direct-add-to-cart:** You can use this attribute without a `product-variant-container` if you don’t want to give users the option to select a variant. In this case, the first available variant will automatically be added to the cart.

{% code title="Webflow" fullWidth="false" %}

```
li-element = direct-add-to-cart
```

{% endcode %}


# Bundles

{% columns %}
{% column %}
With the <code class="expression">space.vars.Company</code> Bundle element, you can easily create bundle features in your Shopify store. You have full control over the design and functionality, and you can use the element anywhere.
{% endcolumn %}

{% column %}

<figure><img src="/files/8mn4g6hwKUNa01a9biLs" alt="" width="263"><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

### Bundle Container

The key part to understand is that the `li-element="bundle-container"` opens an Alpine.js store where you can add individual products by clicking on li-element="add-to-bundle". Then, `li-element="add-bundle-to-cart"` adds all the products in the bundle to the cart, making it very flexible for your store’s needs.

**bundle-container:** This Element wraps and renders the component. All the following Elements need to be inside this Element.

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-container
```

{% endcode %}

{% tabs %}
{% tab title="bundle-container" %}
**bundle-add-to-bundle:** This element enables the "add-to-bundle" function. Whenever someone clicks on it, the currently selected variant will be added to the bundle. It needs to be inside the `product-variant-container` or the product form.

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-add-to-bundle
```

{% endcode %}

**bundle-add-to-cart:** Add this attribute to a button or div to allow customers to add all products they’ve included in the bundle with `bundle-add-to-bundle` directly to their cart. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-add-to-cart
```

{% endcode %}

**bundle-item:** This element generates a list of all products added to the bundle store via `bundle-add-to-bundle`. Within each `bundle-item`, you have access to both the variant and product objects for each item. It needs to be inside the `product-variant-container`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-item
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="bundle-variant-container > bundle-item" %}
**bundle-quantity:** Place this attribute on an input or text field, so the user can adjust the quantity of a bundle item. It needs to be inside the `bundle-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-quantity
```

{% endcode %}

**bundle-quantity-increase:** Add this attribute to a div to let users increase the item quantity by clicking on it. It needs to be inside the `bundle-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-quantity-increase
```

{% endcode %}

**bundle-quantity-decrease:** Add this attribute to a div to let users decrease the item quantity by clicking on it. It needs to be inside the `bundle-item`

{% code title="Webflow" fullWidth="false" %}

```
li-element = bundle-quantity-decrease
```

{% endcode %}

**li-js-object:** Now you can use [`li-js-object`](#li-object-vs-li-js-object) to access all item information, such as product or variant details. For example, retrieve the product title with:

{% code title="Webflow" fullWidth="false" %}

```
li-js-object = item.product.title
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-js-object:src = item.product.featured_image
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-js-price = item.variant.price
```

{% endcode %}
{% endtab %}
{% endtabs %}


# Section Rendering API

{% hint style="warning" %}
**Alpha Feature**

This feature is still in development. While it is already live on some stores, we are actively refining the code. Got feedback? Feel free to share it with us on Discord!
{% endhint %}

## Core Principals <a href="#core-principals-1" id="core-principals-1"></a>

You can use the Section Rendering API to load parts of your theme with an AJAX request. This lets you update parts of a page without reloading the whole thing — just fetch and swap out the sections you need.

This is really useful for things like filtering a collection, changing a product swatch, or showing predictive search results.

### How to use the section rendering API with <code class="expression">space.vars.Company</code>**?**

With the new li-render tag, we’re bringing the power of the Section Rendering API into the <code class="expression">space.vars.Company</code> universe. We’ve included a few default use cases, but you also have the flexibility to build a completely custom functionality.

In the following steps, we’ll show you how to use it for collection filtering, variant swatches, predictive search, and a basic example you can adapt to any part of your store.

{% hint style="warning" %}
**Heads up**

This is a more advanced feature intended for users with some technical experience.
{% endhint %}

### Getting started

{% stepper %}
{% step %}
Go to GitHub and copy the code from our [repository](https://github.com/liquify-pro/Section-Rendering-API).
{% endstep %}

{% step %}
In Shopify, open your **Theme Code Editor**.
{% endstep %}

{% step %}
Navigate to the **Assets** folder and click **+ Add a new asset**.

<figure><img src="/files/9F59PeZ7f5Y1iTcYul6X" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Create a **new blank JavaScript file** named `section-rendering`.
{% endstep %}

{% step %}
Paste the copied code from GitHub into this new file.
{% endstep %}

{% step %}
In your **Webflow project settings**, paste the following script **before the \</body> tag**:

```
<script src="{{ 'section-rendering.js' | asset_url }}"></script>
```

{% endstep %}
{% endstepper %}

You’re now ready to jump into Webflow and start adding the necessary attributes.

In the next steps, we’ll walk you through some special use cases and show you how to customize things even further.

***

## Filtering Collections <a href="#filtering-collections" id="filtering-collections"></a>

For a better user experience, it is recommended to not reload the entire page whenever you apply a filter on the collection page. This can be done with the Section Rendering API and a few <code class="expression">space.vars.Company</code> attributes.

First, you need to wrap all filter elements and the collection list inside the *li-render-filter*="*wrapper*" tag. When using the Starter Template, it’s best to apply it to the .padding-global element.

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter = wrapper
```

{% endcode %}

{% tabs %}
{% tab title="li-render-filter = wrapper" %}

#### Filter Element <a href="#filter-element" id="filter-element"></a>

First we will take care of the filter element. On the filter checkboxes or radio buttons you need to add the following Attributes:

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter = filter
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter-value = {{ filter_value.value }}
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter-name = {{ filter_value.param_name }}
```

{% endcode %}

**Optional:** Here, you can select the trigger type. These are standard JavaScript events like `click`, `input`, `change`, etc. By default, the trigger is set to `change`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter-trigger = click
```

{% endcode %}

#### Filter Price Element <a href="#filter-price-element" id="filter-price-element"></a>

For price filtering, use the special tag we’ve provided. Make sure to place it on the **min price** input field.

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter = price-min
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter-min-param = {{ filter.min_value.param_name }}
```

{% endcode %}

This tag should be placed on the **max price** input field.

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter = price-max
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter-max-param = {{ filter.max_value.param_name }}
```

{% endcode %}

#### Filter Clear All

To clear all currently applied filters, you can add an element with the following attributes. When clicked, it will reset all active filters.

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter = clear-all
```

{% endcode %}

#### Remove Single filter <a href="#remove-single-filter" id="remove-single-filter"></a>

To remove a single filter, loop through all applied filters and add an element inside each one with the following attribute. When clicked, it will remove just that specific filter.

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter = filter-remove
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter-value = {{ filter_value.url_to_remove }}
```

{% endcode %}

#### Sort Collection <a href="#sort-collection" id="sort-collection"></a>

To sort the current collection, simply add the following attribute to your sort element:

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter = sort
```

{% endcode %}

**Optional:** Here, you can select the trigger type. These are standard JavaScript events like *click*, *input*, *change*, etc. By default, the trigger is set to change.

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter-trigger = change
```

{% endcode %}

**Optional:** By default, filters are applied automatically when a checkbox or radio is selected. However, you can also choose to apply filters only when the user clicks a submit button. To do this, simply add the following attribute to your button element:

{% code title="Webflow" fullWidth="false" %}

```
li-render-filter = submit-button
```

{% endcode %}
{% endtab %}
{% endtabs %}

***

## Predictive Search <a href="#predictive-search" id="predictive-search"></a>

To dynamically show contents of your shop, you can use Shopify's predictive search. You only need to apply a few attributes to make it work. Here is a link to the [Shopify Documentation](https://shopify.dev/docs/api/ajax/reference/predictive-search).

First, you need to wrap all search elements inside the `li-render-search="wrapper"` tag.

{% code title="Webflow" fullWidth="false" %}

```
li-render-search = wrapper
```

{% endcode %}

All following attributes need to be on the same `li-render-search="wrapper"` element

#### Optional: Search type

The **search type** setting lets you define which types of pages should be included in the search. The following are the accepted values, which can be combined in a comma-separated list:

* `product`
* `page`
* `article`
* `collection`
* `query`

This setting should be added to the element with `li-render-search="wrapper"`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-search-type = product, page, article, collection, query
```

{% endcode %}

#### Optional: Search Limit

This tag allows you to set a limit on the number of search results. Simply enter a number between `1` and `10` as the attribute’s value — the default is `10`. Add this attribute to the element with `li-render-search="wrapper"`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-search-limit = 10
```

{% endcode %}

#### Optional: Search Limit Scope

Decides the distribution of results. The following are the accepted values:

* `all`: Return results up to `limit` across all types.
* `each`: Return results up to `limit` per type.

The default value is `all`. Add this attribute to the element with `li-render-search="wrapper"`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-search-limit-scope = all, each
```

{% endcode %}

#### Optional: Search unavailable <a href="#optional-search-unavailable" id="optional-search-unavailable"></a>

Specifies whether to display results for unavailable products. The following are the accepted values:

* `show`: Show unavailable products.
* `hide`: Hide unavailable products.
* `last`: Show unavailable products below other matching results.

The default value is `last`.

To change the default value, you can use [Search Settings](https://help.shopify.com/manual/online-store/search-and-discovery/settings) in the Search & Discovery app. This parameter is only applicable to type `product`. Add this attribute to the element with `li-render-search="wrapper"`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-search-unavailable = last
```

{% endcode %}

#### Optional: Search fields <a href="#optional-search-fields" id="optional-search-fields"></a>

Specifies the list of resource fields to search. The following are the accepted values:

* `author`
* `body`
* `product_type`
* `tag`
* `title`
* `variants.barcode`
* `variants.sku`
* `variants.title`
* `vendor`

The default search fields are `title`, `product_type`, `variants.title`, and `vendor` which can be combined in a comma-separated list. For the best search experience, you should search on the default field set. Add this attribute to the element with `li-render-search="wrapper"`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-search-fields = author, body, product_type, tag, title
```

{% endcode %}

{% tabs %}
{% tab title="li-render-search = wrapper" %}

#### Search Input <a href="#search-input" id="search-input"></a>

To enable the search functionality, place an input field inside the element with `li-render-search="wrapper"`. Then, add the following attribute to the input element:

{% code title="Webflow" fullWidth="false" %}

```
li-render-search = input
```

{% endcode %}

#### Optional: Render Target <a href="#optional-render-target" id="optional-render-target"></a>

If you only want to re-render a specific part of the section, you can add this attribute to an element. Everything inside that element will be refreshed on update.

This is especially useful when using a popup — for example, wrapping your search results with this ensures the popup stays open during a search. Otherwise, the entire section would be re-rendered, causing the popup to close.

{% code title="Webflow" fullWidth="false" %}

```
li-render-search = target
```

{% endcode %}
{% endtab %}
{% endtabs %}

***

## Recommended Products <a href="#recommended-products" id="recommended-products"></a>

To display recommended or related products on a product page, you can use the following attributes.

First, add an element with the `li-render-recommended="wrapper"` attribute. This should wrap the products list.

{% code title="Webflow" fullWidth="false" %}

```
li-render-recommended = wrapper
```

{% endcode %}

All of the following **attributes** must be added to the element with `li-render-recommended="wrapper"`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-recommended-product = {{ product.id }}
```

{% endcode %}

{% code title="Webflow" fullWidth="false" %}

```
li-render-recommended-path = {{ routes.product_recommendations_url }}
```

{% endcode %}

#### Optional: Recommendation intent

The recommendation intent that is used to generate product recommendations. You can use intent to generate product recommendations on various pages across the online store, according to different strategies. [Learn more about recommendation intents](https://shopify.dev/docs/storefronts/themes/product-merchandising/recommendations).

The accepted values are `related` and `complementary`. The default value is `related`. Add this attribute to the element with `li-render-recommended="wrapper"`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-recommended-intent = related
```

{% endcode %}

#### Optional: Limit

Limits the number of results. The value can range from `1` to `10`, and the default is `10`. Add this attribute to the element with `li-render-recommended="wrapper"`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-recommended-limit = 4

```

{% endcode %}

{% tabs %}
{% tab title="li-render-recommended = wrapper" %}
**Optional:** If you only want to re-render a specific part of the section, you can add this attribute to an element. Everything inside that element will be refreshed on update.

{% code title="Webflow" fullWidth="false" %}

```
li-render-recommended = target
```

{% endcode %}
{% endtab %}
{% endtabs %}

***

## Custom Wrapper (Example: Variant Swatch) <a href="#custom-wrapper-variant-swatch" id="custom-wrapper-variant-swatch"></a>

The **Custom Wrapper** is a special attribute designed for advanced use cases.

For example, it can be used to re-render a custom variant swatch like the one below—allowing you to load additional variant images or metafields dynamically. It unlocks a range of new possibilities while keeping performance on point.

It's important to wrap the elements inside `li-render-custom="wrapper"`:

{% code title="Webflow" fullWidth="false" %}

```
li-render-custom = wrapper
```

{% endcode %}

If the `li-render-custom-trigger` elements are being re-rendered (for example, when they are in the `li-render-custom="target"` element), you need to set this attribute to the `li-render-custom="wrapper"` to re-initialize these elements.

{% code title="Webflow" fullWidth="false" %}

```
li-render-custom-reinit = true
```

{% endcode %}

All the following **attributes** must be added to the element with `li-render-custom="wrapper"`.

{% tabs %}
{% tab title="li-render-custom = wrapper" %}
The following two attributes should be added to an element that will **trigger the rendering**.

For example, you can apply them to variant selectors to dynamically fetch and update content related to the selected variant.

{% code title="Webflow" fullWidth="false" %}

```
li-render-custom-value = {{ product.url }}?section_id={{ section.id }}&variant={{ value.variant.id }}
```

{% endcode %}

**Optional:** Here, you can select the trigger type. These are standard JavaScript events like `click`, `input`, `change`, etc. By default, the trigger is set to `change`.

{% code title="Webflow" fullWidth="false" %}

```
li-render-custom-trigger = input
```

{% endcode %}

If you only want to render a certain part of the section, you can apply the follwing attribute

{% code title="Webflow" fullWidth="false" %}

```
li-render-custom = target
```

{% endcode %}
{% endtab %}
{% endtabs %}

***

## Events

If you are familiar with JavaScript, you can use our Events to run your own scripts. The following events are provided:

This event runs before any changes have been made to the DOM

`liquify:before-render`

This event will run once the filter-elements have been rendered

`liquify:filter-rendered`

This event will run once the custom-elements have been rendered

`liquify:custom-rendered`

This event will run once the search-elements have been rendered

`liquify:search-rendered`

This event will run once the recommended-elements have been rendered

`liquify:recommended-rendered`

This event will run any time a section has been rendered through our script

`liquify:sections-rendered`


# Format Theme (Prettier)

To improve performance, we’ve disabled the Prettier formatting step in our conversion process. This makes development faster, so you can iterate more quickly on your projects.

However, if you still want your code to be automatically formatted, you can use this GitHub Action. It sets up a workflow that runs Prettier every time you push changes to your live theme.

Here is a step-by-step guide on how to use it.&#x20;

## Installing in GitHub

{% stepper %}
{% step %}

### Go to GitHub and open the repository where you want to add this workflow.

{% endstep %}

{% step %}

### Create a file named `package.json` in your project’s root folder.

This file sets up the Prettier Liquid plugin. Copy the following JSON into your `package.json` file:

```json
{
  "devDependencies": {
    "prettier": "^3.0.0",
    "@shopify/prettier-plugin-liquid": "^1.x.x"
  }
}
```

{% endstep %}

{% step %}

### Create another file named `.prettierrc`

Copy this JSON code into your file:

```
{
  "plugins": ["@shopify/prettier-plugin-liquid"],
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": false
}
```

{% endstep %}

{% step %}

### Create another file named `.prettierignore`

This code tells Prettier which files or folders to ignore. In this example, we’re ignoring the .github and assets folders — but you can adjust it to fit your needs. Fewer files mean faster formatting. Copy the following JSON into your file:

```
node_modules
.github
assets
```

{% endstep %}

{% step %}

### Create another file named `package-lock.json`

```
{
  "name": "starter-template-2-0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "devDependencies": {
        "@shopify/prettier-plugin-liquid": "^1.x.x",
        "prettier": "^3.0.0"
      }
    },
    "node_modules/@shopify/liquid-html-parser": {
      "version": "2.8.2",
      "resolved": "https://registry.npmjs.org/@shopify/liquid-html-parser/-/liquid-html-parser-2.8.2.tgz",
      "integrity": "sha512-g8DRcz4wUj4Ttxm+rK1qPuvIV2/ZqlyGRcVytVMbUkrr/+eVL2yQI/jRGDMeOamkRqB3InuoOjF7nARH+o9UYQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "line-column": "^1.0.2",
        "ohm-js": "^16.3.0"
      }
    },
    "node_modules/@shopify/prettier-plugin-liquid": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/@shopify/prettier-plugin-liquid/-/prettier-plugin-liquid-1.9.3.tgz",
      "integrity": "sha512-XRRnwfONrzjW8AY/l39szH9OgCCg5Xx61QxxdrC3BT2RAqo229jomjhCEszGIUJ5YZYq1ewdyBwbvUVTUSTcTg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@shopify/liquid-html-parser": "^2.8.2",
        "html-styles": "^1.0.0"
      },
      "peerDependencies": {
        "prettier": "^2.0.0 || ^3.0.0"
      }
    },
    "node_modules/html-styles": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/html-styles/-/html-styles-1.0.0.tgz",
      "integrity": "sha512-cDl5dcj73oI4Hy0DSUNh54CAwslNLJRCCoO+RNkVo+sBrjA/0+7E/xzvj3zH/GxbbBLGJhE0hBe1eg+0FINC6w==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/isobject": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
      "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "isarray": "1.0.0"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/line-column": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/line-column/-/line-column-1.0.2.tgz",
      "integrity": "sha512-Ktrjk5noGYlHsVnYWh62FLVs4hTb8A3e+vucNZMgPeAOITdshMSgv4cCZQeRDjm7+goqmo6+liZwTXo+U3sVww==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "isarray": "^1.0.0",
        "isobject": "^2.0.0"
      }
    },
    "node_modules/ohm-js": {
      "version": "16.6.0",
      "resolved": "https://registry.npmjs.org/ohm-js/-/ohm-js-16.6.0.tgz",
      "integrity": "sha512-X9P4koSGa7swgVQ0gt71UCYtkAQGOjciJPJAz74kDxWt8nXbH5HrDOQG6qBDH7SR40ktNv4x61BwpTDE9q4lRA==",
      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.1"
      }
    },
    "node_modules/prettier": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
      "dev": true,
      "license": "MIT",
      "bin": {
        "prettier": "bin/prettier.cjs"
      },
      "engines": {
        "node": ">=14"
      },
      "funding": {
        "url": "https://github.com/prettier/prettier?sponsor=1"
      }
    }
  }
}
```

{% endstep %}

{% step %}

### Now, go to the “Actions” tab in your repository. Click “New workflow” and choose “Simple workflow.”

<figure><img src="/files/vgsRslTaelnDh4aELv6u" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Now copy the code below into the newly created workflow file.

```
name: Prettier Liquid

on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

jobs:
  prettier:
    runs-on: ubuntu-latest
    permissions:
      contents: write

    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
          ref: ${{ github.event.pull_request.head.ref || github.ref }}
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Set Git user
        run: |
          git config user.name 'github-actions[bot]'
          git config user.email 'github-actions[bot]@users.noreply.github.com'

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Prettify Liquid files
        uses: creyD/prettier_action@v4.6
        with:
          prettier_options: --write .

      - name: Commit and Push changes
        run: |
          if ! git diff --exit-code; then
            git add .
            git commit -m "Prettify code (automated)"

            if [[ "${{ github.event_name }}" == "pull_request" ]]; then
              TARGET_BRANCH="${{ github.event.pull_request.head.ref }}"
              echo "Pushing formatted code back to PR branch: $TARGET_BRANCH"
            elif [[ "${{ github.event_name }}" == "push" && "${{ github.ref }}" == "refs/heads/main" ]]; then
              TARGET_BRANCH="main"
              echo "Pushing formatted code to main branch..."
            else
              echo "Changes detected, but not pushing automatically for this event type or branch."
              exit 0
            fi

            git push origin HEAD:$TARGET_BRANCH
          else
            echo "No formatting changes detected. Nothing to commit."
          fi
```

{% endstep %}

{% step %}

### The setup is complete! On your next push to the main branch, Prettier will automatically format your code.

Congrats 🎉 🎉
{% endstep %}
{% endstepper %}


# Cheat Sheet

Here is a list of all the currently available <code class="expression">space.vars.Company</code> attributes. The “Compatible with” section indicates whether an attribute can be used on the same element alongside others. However, be aware that using multiple attributes on the same element might cause one to override the other.

<table data-full-width="true"><thead><tr><th width="256.796875" valign="top">Attribute name</th><th width="227.2265625" valign="top">Compatible with</th><th valign="top">Description</th></tr></thead><tbody><tr><td valign="top"><code>li-object</code></td><td valign="top"><code>li-attribute</code>, <code>li-object</code></td><td valign="top">To insert a <a href="https://shopify.dev/docs/api/liquid/objects">Shopify object</a>, use <code>li-object="product.title"</code>. This will render as <code>{{ product.title }}</code> within the attached element. You can also use a modifier to specify its position, such as <code>li-object:class="product.title"</code>, which will render as <code>class="{{ product.title }}"</code>. <a href="/pages/LsifpRDbTL5RAubk0kt6">Learn more.</a></td></tr><tr><td valign="top"><code>li-attribute</code></td><td valign="top"><code>li-object</code>, <code>li-attribute</code></td><td valign="top">This tag allows us to use reserved attributes like class or src on every element. This is an example on how to use it: <code>li-attribute:class = "{% if product.available %} tex-color-green {% endif %}"</code> will be converted into <code>class = "{% if product.available %} tex-color-green {% endif %}"</code>. <a href="/pages/XkrLYDVr9yNXN2aQzyQQ#li-attribute">Learn more</a>.</td></tr><tr><td valign="top"><code>li-js-object</code></td><td valign="top"><code>li-js-object</code></td><td valign="top">This attribute generates an <a href="https://alpinejs.dev/start-here">Alpine.js</a> object (<a href="https://alpinejs.dev/directives/bind">x-bind</a> or <a href="https://alpinejs.dev/directives/text">x-text</a>) to dynamically display data without requiring a page reload, making it ideal for use in components like the mini cart or variant container. You can use modifiers to describe the position, like <code>li-object</code>. <a href="/pages/fCsYlnQgg6vUn6mIVgvq#li-object-vs-li-js-object">Learn more</a>.</td></tr><tr><td valign="top"><code>li-settings</code></td><td valign="top"><code>li-settings</code></td><td valign="top">You can implement <a href="https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings">settings</a> that allow your <a href="https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings">Shopify content editor</a> to modify both the content and appearance directly within Shopify. To achieve this, we've introduced the <code>li-settings</code> tag. For example, <code>li-settings:text</code> to provide a text input. <a href="/pages/KTvcyJ1ebf94BtFzkpfK">Learn more</a>.</td></tr><tr><td valign="top"><code>li-for</code></td><td valign="top">-</td><td valign="top">When you need to <a href="https://shopify.dev/docs/api/liquid/tags/for">iterate over an array</a>, such as a list of products or product tags, you can employ the <code>li-for</code> tag. This tag will duplicate the attached element. Within a loop, you have access to the object you're iterating through. For example, <code>li-for="product in collection.products"</code>. <a href="/pages/UpEH5idMo1XbX3A2bLKg">Learn more</a>.</td></tr><tr><td valign="top"><code>li-paginate</code></td><td valign="top">-</td><td valign="top">When using a forloop with <code>li-for</code>, you can manage <a href="https://shopify.dev/docs/api/liquid/tags/paginate">pagination</a> using the <code>li-paginate</code> tag. Inside the <code>li-paginate</code> tag, you’ll have access to the <a href="https://shopify.dev/docs/api/liquid/objects/paginate">pagination object</a>. This is useful, for example, on collection pages. By default, only <code>50</code> products are rendered, but with <code>li-paginate</code>, you can override this limit. <a href="/pages/XkrLYDVr9yNXN2aQzyQQ#li-paginate">Learn more.</a></td></tr><tr><td valign="top"><code>li-if</code></td><td valign="top">-</td><td valign="top">This <a href="https://shopify.dev/docs/api/liquid/tags/if">tag</a> toggles the visibility of the attached element based on a specified condition. For example, <code>li-if="product.available"</code> generates a conditional wrapping tag: <code>{% if product.available %} &#x3C;div>Product is available&#x3C;/div> {% endif %}</code><em>.</em> <a href="/pages/jHrfDsqzNE7JRe57w029#if">Learn more</a>.</td></tr><tr><td valign="top"><code>li-unless</code></td><td valign="top">-</td><td valign="top">This <a href="https://shopify.dev/docs/api/liquid/tags/unless">tag</a> functions similarly to <code>li-if</code> but displays the element when the specified condition is false. <a href="/pages/jHrfDsqzNE7JRe57w029#unless">Learn more</a>.</td></tr><tr><td valign="top"><code>li-when</code></td><td valign="top">-</td><td valign="top"><p>When you want to display an element which should meet different conditions, you can wrap these elements with the <code>li-case</code> <a href="https://shopify.dev/docs/api/liquid/tags/case">tag</a>. Inside the wrapper, you put the elements with different <code>li-when</code> <a href="https://shopify.dev/docs/api/liquid/tags/case">tags</a>. <a href="/pages/jHrfDsqzNE7JRe57w029#case">Learn more.</a></p><p><br></p></td></tr><tr><td valign="top"><code>li-js-if</code></td><td valign="top">-</td><td valign="top">This attribute generates an <a href="https://alpinejs.dev/start-here">Alpine.js</a> <code>&#x3C;template></code> with <a href="https://alpinejs.dev/directives/if"><code>x-if</code></a> applied, allowing you to dynamically hide or show elements based on various criteria without reloading the page. It is particularly useful in components like the mini cart or product variant container. <a href="/pages/fCsYlnQgg6vUn6mIVgvq#li-js-if">Learn more</a>.</td></tr><tr><td valign="top"><code>li-section</code></td><td valign="top">-</td><td valign="top">This attribute creates a <a href="https://shopify.dev/docs/storefronts/themes/architecture/sections">Shopify section file</a> containing all the HTML within the element. These sections can later be rearranged in the Shopify editor, and with <code>li-settings</code>, their content can be made editable. <a href="https://www.liquify.pro/docu/getting-started#sections">Learn more</a>.</td></tr><tr><td valign="top"><code>li-section-group</code></td><td valign="top">-</td><td valign="top">This attribute creates a <a href="https://shopify.dev/docs/storefronts/themes/architecture/section-groups">Shopify group section file</a> containing all the sections as json. Th's can be used to create dynamic header or footer groups in the Shopify Theme editor. <a href="/pages/bvA35n0MOU1TkC7aTJe2#section-groups">Learn more</a>.</td></tr><tr><td valign="top"><code>li-block</code></td><td valign="top">-</td><td valign="top">Within the <code>li-section</code> attribute, you can use <code>li-block</code> to create repeating elements (<a href="https://shopify.dev/docs/storefronts/themes/architecture/blocks">Blocks</a>) that can later be edited directly in the Shopify editor. <a href="/pages/PpF8FKYZsydxaRL0enbg">Learn more</a>.</td></tr><tr><td valign="top"><code>li-content-for-blocks</code></td><td valign="top">-</td><td valign="top">This attribute allows you to group multiple <code>li-block</code> elements, providing editors with various options to rearrange elements within a section. Additionally, it enables the inclusion of app blocks in the section. <a href="/pages/PpF8FKYZsydxaRL0enbg#li-content-for-blocks">Learn more.</a></td></tr><tr><td valign="top"><code>li-content-for-theme-blocks</code></td><td valign="top">-</td><td valign="top">This attribute allows you to create block files and nested block elements, providing editors with various options to rearrange elements within a section. Additionally, it enables the inclusion of app blocks in the section. <a href="/pages/JTae77Rgz0h8tkryhrtF">Learn more.</a></td></tr><tr><td valign="top"><code>li-page</code></td><td valign="top"><code>li-layout</code></td><td valign="top">The <code>li-page</code> attribute specifies the type of <a href="https://shopify.dev/docs/storefronts/themes/architecture/sections">template for a page</a>, such as a product or article page. This attribute must be attached to the <code>&#x3C;body></code> element of the page. <a href="/pages/frd0EP7b3ch8fEHlh3u9">Learn more.</a></td></tr><tr><td valign="top"><code>li-layout</code></td><td valign="top"><code>li-page</code></td><td valign="top">The <code>li-layout</code> attribute specifies the type of layout which should be used on this template. This helps to minimize the number of layout files in your theme. This attribute must be attached to the <code>&#x3C;body li-page=""></code> element of the page. <a href="/pages/frd0EP7b3ch8fEHlh3u9">Learn more.</a></td></tr><tr><td valign="top"><code>li-content-for-layout</code></td><td valign="top">-</td><td valign="top">Every page requires this attribute. Within the element containing this attribute, you can place all the sections that can later be rearranged using Shopify 2.0. This attribute is typically applied to the <code>main</code> element of the page. <a href="/pages/frd0EP7b3ch8fEHlh3u9">Learn more</a>.</td></tr><tr><td valign="top"><code>li-form</code></td><td valign="top">-</td><td valign="top">This attribute offers versatile functionality by wrapping the attribute value in <code>{% ... %}</code>. For example, you can easily assign a variable using <code>li-tag</code>, such as: <code>li-tag="assign title = product.title"</code>. <a href="/pages/PALon5OpWmjcxjJUPTen">Learn more.</a></td></tr><tr><td valign="top"><code>li-liquid</code></td><td valign="top">-</td><td valign="top">This attribute helps maintain the Liquid syntax within a code block. <a href="/pages/XkrLYDVr9yNXN2aQzyQQ#li-liquid">Learn more</a>.</td></tr><tr><td valign="top"><code>li-snippet</code></td><td valign="top">-</td><td valign="top">This attribute creates reusable <a href="https://shopify.dev/docs/storefronts/themes/architecture#snippets">snippets</a> in Shopify, making it easier to build scalable templates. <a href="/pages/1Cg9DODYKaCsY5FYZGR4">Learn more</a>.</td></tr><tr><td valign="top"><code>li-element</code></td><td valign="top">-</td><td valign="top">This attribute is a specialized <code class="expression">space.vars.Company</code> attribute with predefined functionalities. A complete list of all <code>li-elements</code> can be found <a href="/pages/fCsYlnQgg6vUn6mIVgvq">here</a>.</td></tr><tr><td valign="top"><code>li-cloak</code></td><td valign="top">-</td><td valign="top">Elements with the <code>li-cloak</code> attribute are hidden using CSS. The <code>li-cloak</code> tag is removed during conversion. <a href="/pages/XkrLYDVr9yNXN2aQzyQQ#li-cloak">Learn more.</a></td></tr></tbody></table>


# Debugging

Sometimes it can happen that you set some attributes wrong in Webflow. During the conversion process, we do not verify attribute values. So be careful with what you write in there. Here are some tips and tricks to help you get your theme up and running.

## <code class="expression">space.vars.Company</code> Automated Support Service

When working in Webflow, you can always publish your site and visit the staging domain. After implementing the <code class="expression">space.vars.Company</code> script from the project settings in the \<head>, you will see the <code class="expression">space.vars.Company</code> Automated Support Service. Press “Run Attribute Check” to view all bugs on the current page.

<figure><img src="/files/l3MH2atqIsJINKKElI6k" alt="" width="375"><figcaption></figcaption></figure>

```
<script defer auto min src="https://cdn.jsdelivr.net/gh/liquify-pro/core@latest/script.js"></script>
```

{% hint style="info" %}
With this configuration, a small icon will automatically appear minimized in the top right corner of your Webflow page. To make it automatically visible, remove the *auto* and *min* attributes. It will only appear on .webflow URLs.
{% endhint %}

## Shopify Logs

When working with GitHub integration, you can always check the logs in Shopify. These logs provide valuable insights into any Liquid errors and their locations. You can switch between commits using the dropdown menu. If Shopify identifies an issue, implement the solution in Webflow and convert again.

<figure><img src="/files/wpsqza2G10CiEcRJKFFO" alt=""><figcaption></figcaption></figure>

## Debugging in Shopify without GitHub

When you manually upload the Shopify theme, Shopify won’t import files that contain errors, making debugging a bit challenging. However, you can always open the Shopify Code Editor and search for missing pages. Create the file manually and paste the code into the new file. Shopify will then indicate what is wrong with your file.

<figure><img src="/files/W8xPZy7TVEsJLSTwXiHt" alt=""><figcaption></figcaption></figure>

## No errors occurred, but the page looks incorrect?

When using the GitHub integration to convert a theme, it might look different from Webflow even if no errors occur. Shopify may need some time to process the new CSS information in the Theme Editor. To see the updated page immediately, check the Page Preview, where the new CSS file will be applied.

## ZIP file is too large?

If your ZIP file is too large, it’s usually because you’ve uploaded heavy image files into Webflow. To resolve this issue, delete the images in Webflow and use a placeholder image tagged with `li-settings:image="SETTING NAME"`. This way, you can add the images later in the Shopify editor.\
\
\ <br>


# Webflow and GSAP Animations

You can absolutely use Webflow and GSAP for animations in your <code class="expression">space.vars.Company</code> ecommerce build. Just keep a few important things in mind to make sure everything works smoothly in Shopify.

### Webflow Animations

* **Use classes as targets:** Avoid targeting elements by ID, especially for repeating items like product cards or blocks. Webflow auto-generates IDs, and Shopify won’t accept duplicate IDs. Classes are safe and repeatable.
* **Don’t use Sections as triggers:** Shopify generates its own \<section> tags. You can't add attributes or IDs to them, but they’re not reliable as animation triggers. Instead, place your trigger on an element *inside* the section.
* **Always check the structure in the Shopify preview**: If an animation isn’t firing, open the Shopify preview in a new Tab and inspect the HTML. The class names or structure could differ slightly, and you’ll immediately spot what’s missing.

### GSAP Animations

* **Install GSAP in Webflow Project Settings**: To use GSAP, include the necessary libraries in your Webflow Project Settings.

<figure><img src="/files/1F0fYsAg3em0QZiYGZAw" alt=""><figcaption></figcaption></figure>

* **Use classes as targets:** Avoid targeting elements by ID, especially for repeating items like product cards or blocks. Webflow auto-generates IDs, and Shopify won’t accept duplicate IDs. Classes are safe and repeatable.


# Resources

As we develop our knowledge center, we appreciate your patience. That's why we also refer to other resources that have assisted us in our journey to become a Shopify agency.

Here, you can explore a carefully curated list of resources that we have found valuable.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Start with Webflow Template</strong></td><td>Use a fully working Template as starting point.</td><td><a href="https://www.liquify.pro/docu/liquify-starter-template">https://www.liquify.pro/docu/liquify-starter-template</a></td></tr><tr><td><strong>Shopify Cheat sheet</strong></td><td>Learn more about the core principles of liquify in a condensed view.</td><td><a href="https://www.shopify.com/partners/shopify-cheat-sheet">https://www.shopify.com/partners/shopify-cheat-sheet</a></td></tr><tr><td><strong>Shopify Dokumentation</strong></td><td>Checkout the Documentation</td><td><a href="https://shopify.dev/docs/api/liquid">https://shopify.dev/docs/api/liquid</a></td></tr><tr><td><strong>Liquid Github Cheat Sheet</strong></td><td>Checkout the Liquid Github Cheat Sheet.</td><td><a href="https://shopify.github.io/liquid/">https://shopify.github.io/liquid/</a></td></tr><tr><td><strong>What is Liquid (Video)</strong></td><td>Check out the video from Coding with Jan.</td><td><a href="https://youtu.be/zcXFBq4lv1o?si=pEe0oO8Gk2j6UBGr">https://youtu.be/zcXFBq4lv1o?si=pEe0oO8Gk2j6UBGr</a></td></tr><tr><td><strong>Join our Free Discord Group</strong></td><td>Join our Discord community to get your questions answered.</td><td><a href="https://discord.gg/56KwXaUW5X">https://discord.gg/56KwXaUW5X</a></td></tr></tbody></table>


# SEO

In general, <code class="expression">space.vars.Company</code> converts everything you build in Webflow into Shopify. We encourage you to follow best practices for SEO structure and guidelines. On this page, we share some tips we’ve learned over the years, with more to come.

## HTML Lang Attribute

During the conversion process, we replace the default `lang=""` set by Webflow with Shopify’s `request.locale.iso_code` object. This ensures the correct language attribute is applied based on the user’s request and your store’s language settings.

## Structured Data (Schema)

You can add your structured data directly in the head section of the selected page. Additionally, you can replace JSON strings with Liquid variables, making it adaptable for page templates like product or collection pages. Our default settings can be found in the [Webflow Starter Kit](/useful/liquiflow-starter-templates).

## Page Title and Meta Description

You can use page objects within Webflow’s page settings. For example, the page title can be accessed with `{{ page_title }}`, and the description with `{{ page_description }}`. These can be edited directly in Shopify. To update SEO information, go to the specific page in Shopify, scroll to the bottom, and edit the search engine listing.

## File Size

We recommend not implementing assets directly in Webflow. Instead, add them via the Shopify theme editor and CMS. There, you can use the Liquid `image_tag` [filter](https://shopify.dev/docs/api/liquid/filters/image_tag) to control image size based on its usage. This is particularly useful when content editors upload large files, which can hurt SEO. Shopify will automatically resize the image to the appropriate size using the `image_tag` filter.


# Shopify 1.0 vs Shopify 2.0

In June 2021, during the Shopify Unite event, Shopify unveiled one of its most significant updates to date: Online Store 2.0, commonly known as Shopify 2.0. This update introduced a fresh approach to Shopify’s theme architecture, profoundly impacting merchants’ operations.

Online Store 2.0 offers substantial opportunities for you and your clients. It enables your Merchant to edit the content and structure freely in Shopify.

Let’s dive in.

## Key Differences Between Shopify 1.0 and 2.0

### **Speed and Performance**

One of the most notable improvements in Shopify 2.0 is enhanced speed and performance. Shopify 2.0 is faster and more efficient, handling more traffic and transactions without performance issues.

### **Customization**

Shopify 2.0 significantly expands customization options. Users can now create custom templates and designs without needing development skills, which wasn’t possible with Shopify 1.0. This empowers store owners to design unique, personalized online stores effortlessly. Whether it’s changing your site content or rearranging sections, these tasks are now simple and do not require technical expertise.

### **Marketing Tools**

Shopify 2.0 introduces advanced marketing tools, including email campaigns, social media integrations, and SEO optimization. These tools simplify promoting products and reaching a broader audience, enhancing the overall marketing strategy for merchants.

### **Mobile Optimization**

Given the rise of mobile commerce, eCommerce platforms must be optimized for mobile devices. Shopify 2.0 is designed with mobile optimization in mind, ensuring customers have a seamless browsing and purchasing experience on smartphones and tablets. The theme customizer responds natively to mobile views, providing a better perspective on the customer experience.

### **App Integrations**

Shopify 2.0 offers a broader selection of app integrations compared to Shopify 1.0. This makes it easier for merchants to add new features and functionalities to their online stores without hiring developers. With the enhanced functionalities of Online Store 2.0, the need for multiple apps is reduced, leading to faster load speeds.

## How Those <code class="expression">space.vars.Company</code> work with Shopify 2.0?

To leverage the full benefits of Shopify 2.0, we highly recommend using our GitHub integration. The primary difference lies in the content storage format: most content is now stored in JSON templates within the template folder. Without GitHub integration, you would need to manually copy all template files to maintain your shop.

Our GitHub integration automates this process. After your initial conversion, we ensure that the template folder remains untouched in future conversions. This prevents any overrides to content changes made directly in the Shopify editor.

To enable Shopify 2.0, you need to activate it in your <code class="expression">space.vars.Company</code> Project settings. We strongly advise against attempting this with a Shopify 1.0 project. Therefore, it’s crucial to decide whether to use Shopify 1.0 or 2.0 before starting your project.

## Main Benefits with <code class="expression">space.vars.Company</code>

### **Dynamic Sections**

With Shopify 2.0 enabled, all your content must be placed within a section tagged with *li-section*=*"SECTION NAME"*. Each section should be nested inside a main element with the attribute *li-element*=*"content-for-layout"*. Any content outside the content-for-layout element will be statically written into the layout file. This setup is particularly useful for elements like the Navbar, Footer, or Announcement Bar.

Within Shopify, you now have the flexibility to move, edit, add, or delete sections. This allows merchants to modify the structure and content without affecting the underlying code.

### **Page Templates**

Each necessary page (Product, Collection, Blog, etc.) you create in Webflow must include the attribute *li-page*=*"PAGENAME"* on the body tag. This tag informs Shopify about the specific purpose of each page. Content pages do not require a *li-page* tag, as they will automatically be recognized as static pages by <code class="expression">space.vars.Company</code>.

If you do not want to import a page, simply add *li-page*=*"remove"*.

In Shopify, merchants can edit existing page templates or create new ones based on the existing templates. For instance, if you have a product that requires special features, you can create a new page template and assign it to that product. This functionality allows you to create landing pages, CMS pages (such as Jobs, Team, etc.), or alternative product pages.

### **Dynamic Content**

With Shopify 2.0, you can populate section settings with dynamic content. For example, you can create a single Hero design and use it on both the Article and Collection pages by selecting the appropriate dynamic variable for each page. This feature allows you and your merchants to build a scalable infrastructure for your shop.

### **App Blocks**

With App Blocks in Shopify 2.0, adding apps within your sections is very easy. We are currently working on implementing this feature in Shopify.

## Fazit

At Halbstark, we always use Shopify 2.0 for our projects. In our opinion, it is the best way to maintain and develop Shopify themes. If you have any questions, feel free to join our Discord server.


# Liquiflow Starter Templates

Copy the Liquiflow Starter Template from Webflow to get started!

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><code class="expression">space.vars.Company</code> <strong>Starter Template</strong></td><td><a href="/files/07QI7AH31g1Re4IWL4hA">/files/07QI7AH31g1Re4IWL4hA</a></td><td><a href="https://webflow.com/made-in-webflow/website/liquify-2-0">https://webflow.com/made-in-webflow/website/liquify-2-0</a></td></tr><tr><td><code class="expression">space.vars.Company</code> <strong>Components</strong></td><td><a href="/files/akM8zJhe4l7YNZ2YeLdt">/files/akM8zJhe4l7YNZ2YeLdt</a></td><td><a href="https://webflow.com/made-in-webflow/website/liquify-compoenents">https://webflow.com/made-in-webflow/website/liquify-compoenents</a></td></tr></tbody></table>