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.

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.

Webflow

li-snippet = product_item

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:

Webflow

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

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.

Shopify

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

Disclaimer: While not mandatory, following this step enhances the structure of your theme and makes it more reader-friendly for other Shopify developers.