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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.liquiflow.app/section-converter/how-it-works.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.