Miscellaneous
During development, we identified several ways to enhance the capabilities of the process. Therefore, we implemented the following tags.
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:
li-attribute:class = {% if product.available %} tex-color-green {% endif %}<div class ="{% if product.available %}tex-color-green{% endif %}"></div>Another example:
li-attribute:id = {{ product.id }}<div id="{{ product.id }}"></div>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.
li-paginate
When using a for loop with li-for, you can manage pagination using the li-paginate tag. Inside the li-paginate tag, you’ll have access to the pagination object. This is useful, for example, on collection pages. By default, only 50 products are rendered, but with li-paginate, you can override this limit.
li-paginate = collection.products
li-paginate:by = 25{% paginate collection.products by 50 %} //children of your element {% endpaginate %}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 Template.
li-cloak = Last updated
Was this helpful?