Miscellaneous
During the development, we got some ideas how to enhance the capability oft the process. Therefor, we implemented a view tags.
li-attribute
The first one we want to present is li-attribute. This tag allows us to use reserved attributes like class or src on every element. This is an example on how to use it:
li-attribute:class = {% if product.available %} tex-color-green {% endif %}<div class ="{% if product.available %}tex-color-green{% endif %}"></div>Or another example:
li-attribute:id = {{ product.id }}<div id="{{ product.id }}"></div>li-liquid
When using Liquid code directly in Shopify, Webflow may disrupt the formatting of double quotes. To prevent this, we’ve introduced li-liquid, which you can add to Custom Code elements or script tags. During conversion, it detects the Liquid code and preserves the formatting.
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 the Starter Template.
li-cloak = Last updated
Was this helpful?