Theme Blocks

li-cf-theme-blocks offers an even more flexible way. It’s based on Shopify’s new feature 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.

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).

Webflow

li-block = Item

---

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

Webflow

li-block = Item

Webflow

li-content-for-theme-blocks

---

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.

Important:

• When using li-cf-theme-blocks you are not able to use li-block or li-cf-blocks in the same section.

• You can nest li-block inside li-cf-theme-blocks

• You can not nest li-cf-blocks inside li-cf-theme-blocks

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.

Webflow

li-block:category = Category Name

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.

Webflow

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

Shopify

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

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:

Webflow

li-cf-theme-blocks="theme"

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.