# 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](https://docs.liquiflow.app/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`](https://docs.liquiflow.app/section-settings/theme-blocks) is not supported yet. But you can still use [`li-block`](https://docs.liquiflow.app/section-settings/blocks) or [`li-content-for-blocks`](https://docs.liquiflow.app/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`](https://docs.liquiflow.app/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`](https://docs.liquiflow.app/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](https://docs.liquiflow.app/section-settings/settings) and[ li-objects](https://docs.liquiflow.app/liquid-attributes/objects)
{% endstep %}

{% step %}
Then copy the element with the [`li-section`](https://docs.liquiflow.app/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="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2Fypmgx3pbLRbuMA9OBE5p%2F685e4ba92e4ada99c3a4ca89_Bildschirmfoto%202025-06-27%20um%2009.43.02.avif?alt=media&#x26;token=37e523ea-8ddc-4cd9-88f6-ba11a51a59a8" 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`](https://docs.liquiflow.app/section-settings/theme-blocks) to create Theme Blocks. Use li-block or  [`li-content-for-blocks`](https://docs.liquiflow.app/section-settings/blocks) instead.
* If you add **Add to Cart** functionality, make sure you use your Shopify theme’s native method. [`li-element`](https://docs.liquiflow.app/add-ons/liquiflow-elements) attributes only work with a full <code class="expression">space.vars.Company</code> theme.
* You can use [`li-snippet`](https://docs.liquiflow.app/liquid-attributes/snippets) to reference an existing snippet from your Shopify theme.
  {% endhint %}