Objects

The CMS content of your shop can be accessed using objects such as product, collection, or cart. You can place these objects in Webflow using the li-object tag. So a custom attribute for the product Title would look like the following:

Webflow

li-object = product.title

Shopify

<p>{{ product.title }}</p>

In this example, the product is the object, and you can access detailed information using dot notation (for instance product.title or product.selected_variant.price). You can explore all the available Shopify objects here. Additionally, don't forget to check out the Shopify Cheat sheet for a more condensed reference.

Positioning

With an additional modifier, you can also determine the object's positioning. For example, on a product link:

Webflow

li-object:href = product.url

Shopify

<a href="{{ product.url }}"><a>

For the positioning you can use all the HTML attributes which are available or create your own data-attributes. Here are some common HTML Attributes:

• src (for images)

• class

• value

• placeholder (for inputs)

• alt (for images)

• width

• height

• text (It's not an HTML attribute; however, both li-object and li-object:text yield the same results)

• style (for this attribute it makes more sense to use li-attribute)

• name

Tipp: You can also place multiple objects with different modifiers on a single element, such as a src and alt attribute.