# 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="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FjPhE11diuN7NDfmKgH7Z%2F67fc1da8eb5960e6bff7ffc1_theme-blocks.webp?alt=media&#x26;token=18920a9b-e721-4450-8376-dd4905d8a46e" 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="https://497333298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FheMDp56vLoqqIp7IZZ2W%2Fuploads%2FtE1fQ5e5vwcB17ZhZklp%2FBildschirmfoto%202026-01-07%20um%2016.44.02.webp?alt=media&#x26;token=50298ece-fea7-4d96-9941-dd11a6eb3a14" 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)