> For the complete documentation index, see [llms.txt](https://docs.liquiflow.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.liquiflow.app/liquid-attributes/objects.md).

# 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:

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object = product.title
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

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](https://shopify.dev/docs/api/liquid/objects). Additionally, don't forget to check out the Shopify [Cheat sheet](https://www.shopify.com/partners/shopify-cheat-sheet) for a more condensed reference.

{% embed url="<https://app.arcade.software/share/z9g0UCaZmERTbwB47StZ?ref=share-link>" %}

## **Positioning**

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

{% columns %}
{% column %}
{% code title="Webflow" fullWidth="false" %}

```
li-object:href = product.url
```

{% endcode %}
{% endcolumn %}

{% column %}
{% code title="Shopify" fullWidth="false" %}

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

{% endcode %}
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}
For positioning you can use all the [HTML attributes](https://www.w3schools.com/tags/ref_attributes.asp) 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`
  {% endcolumn %}

{% column %}

<figure><img src="/files/akM8zJhe4l7YNZ2YeLdt" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
**Tipp:**\
You can also place multiple objects with different modifiers on a single element, such as a *src* and *alt* attribute.
{% endhint %}