space.vars.Company attributes. The “Compatible with” section indicates whether an attribute can be used on the same element alongside others. However, be aware that using multiple attributes on the same element might cause one to override the other.
| Attribute name | Compatible with | Description |
|---|---|---|
li-object | li-attribute, li-object | To insert a Shopify object, use li-object="product.title". This will render as {{ product.title }} within the attached element. You can also use a modifier to specify its position, such as li-object:class="product.title", which will render as class="{{ product.title }}". Learn more. |
li-attribute | li-object, 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 %}" will be converted into class = "{% if product.available %} tex-color-green {% endif %}". Learn more. |
li-js-object | li-js-object | This attribute generates an Alpine.js object (x-bind or x-text) to dynamically display data without requiring a page reload, making it ideal for use in components like the mini cart or variant container. You can use modifiers to describe the position, like li-object. Learn more. |
li-settings | li-settings | You can implement settings that allow your Shopify content editor to modify both the content and appearance directly within Shopify. To achieve this, we've introduced the li-settings tag. For example, li-settings:text to provide a text input. Learn more. |
li-for | - | When you need to iterate over an array, such as a list of products or product tags, you can employ the li-for tag. This tag will duplicate the attached element. Within a loop, you have access to the object you're iterating through. For example, li-for="product in collection.products". Learn more. |
li-paginate | - | When using a forloop 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. Learn more. |
li-if | - | This tag toggles the visibility of the attached element based on a specified condition. For example, li-if="product.available" generates a conditional wrapping tag: {% if product.available %} <div>Product is available</div> {% endif %}. Learn more. |
li-unless | - | This tag functions similarly to li-if but displays the element when the specified condition is false. Learn more. |
li-when | - | When you want to display an element which should meet different conditions, you can wrap these elements with the |
li-js-if | - | This attribute generates an Alpine.js <template> with x-if applied, allowing you to dynamically hide or show elements based on various criteria without reloading the page. It is particularly useful in components like the mini cart or product variant container. Learn more. |
li-section | - | This attribute creates a Shopify section file containing all the HTML within the element. These sections can later be rearranged in the Shopify editor, and with li-settings, their content can be made editable. Learn more. |
li-section-group | - | This attribute creates a Shopify group section file containing all the sections as json. Th's can be used to create dynamic header or footer groups in the Shopify Theme editor. Learn more. |
li-block | - | Within the li-section attribute, you can use li-block to create repeating elements (Blocks) that can later be edited directly in the Shopify editor. Learn more. |
li-content-for-blocks | - | This attribute allows you to group multiple li-block elements, providing editors with various options to rearrange elements within a section. Additionally, it enables the inclusion of app blocks in the section. Learn more. |
li-content-for-theme-blocks | - | This attribute allows you to create block files and nested block elements, providing editors with various options to rearrange elements within a section. Additionally, it enables the inclusion of app blocks in the section. Learn more. |
li-page | li-layout | The li-page attribute specifies the type of template for a page, such as a product or article page. This attribute must be attached to the <body> element of the page. Learn more. |
li-layout | li-page | The li-layout attribute specifies the type of layout which should be used on this template. This helps to minimize the number of layout files in your theme. This attribute must be attached to the <body li-page=""> element of the page. Learn more. |
li-content-for-layout | - | Every page requires this attribute. Within the element containing this attribute, you can place all the sections that can later be rearranged using Shopify 2.0. This attribute is typically applied to the main element of the page. Learn more. |
li-form | - | This attribute offers versatile functionality by wrapping the attribute value in {% ... %}. For example, you can easily assign a variable using li-tag, such as: li-tag="assign title = product.title". Learn more. |
li-liquid | - | This attribute helps maintain the Liquid syntax within a code block. Learn more. |
li-snippet | - | This attribute creates reusable snippets in Shopify, making it easier to build scalable templates. Learn more. |
li-element | - | This attribute is a specialized space.vars.Company attribute with predefined functionalities. A complete list of all li-elements can be found here. |
li-cloak | - | Elements with the li-cloak attribute are hidden using CSS. The li-cloak tag is removed during conversion. Learn more. |