Snippets

To make your Shopify theme code even cleaner, we implemented the tag li-snippet. You can think about it as symbols in Webflow. The Snippet will get its own file in the theme directory and can be placed multiple times all over your theme. This makes sense, for example, for the product item or the global styles element. Just make a symbol out of the element you want to use somewhere else. Then add the li-snippet tag with value you can choose (Character limit 15).

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.