circle-info
Liquify Pro is now Liquiflow 🎉
search
LoginSign Up

Miscellaneous

During development, we identified several ways to enhance the capabilities of the process. Therefore, we implemented the following tags.

hashtag
li-attribute

The li-attribute tag allows you to assign reserved HTML attributes — such as class, src, or href — to any element. This is particularly useful in Webflow, where certain attributes are restricted or automatically managed by the designer.

Example:

Webflow
li-attribute:class = {% if product.available %} tex-color-green {% endif %}
Shopify
<div class ="{% if product.available %}tex-color-green{% endif %}"></div>

Another example:

Webflow
li-attribute:id = {{ product.id }}
Shopify
<div id="{{ product.id }}"></div>

hashtag
li-liquid

When using Liquid code directly in Shopify, Webflow may alter the formatting of certain characters —especially double quotes — within Custom Code elements or <script> tags. To prevent this, you can use the li-liquid attribute.

By applying li-liquid to a Custom Code element, the converter will detect the enclosed Liquid code and preserve its original formatting during export.

This ensures that your Liquid logic remains intact and functions correctly in the final Shopify theme.

hashtag
li-paginate

When using a for loop with li-for, you can manage paginationarrow-up-right using the li-paginate tag. Inside the li-paginate tag, you’ll have access to the pagination objectarrow-up-right. This is useful, for example, on collection pages. By default, only 50 products are rendered, but with li-paginate, you can override this limit.

Webflow
li-paginate = collection.products
li-paginate:by = 25
Shopify
{% paginate collection.products by 50 %} //children of your element {% endpaginate %}

hashtag
li-cloak

Elements with the li-cloak attribute are hidden using CSS. The li-cloak tag is removed during conversion. This helps keep them out of view in the Webflow Designer and can make editing easier. To make it work, you need to add this CSS line to your project’s <head>: [li-cloak] { display: none !important; }. It’s already included in our Starter Templatearrow-up-right.

PreviousSnippetsNextJS Events

Last updated

Was this helpful?