# Cart Item Attributes

{% hint style="info" %}
With North Commerce attributes you are essentially creating a template that can be used by the North Commerce system. This isn't your traditional query loop setup so feel free to add placeholder data to help you envison what your final design will look like
{% endhint %}

### Adding Cart Item Images

1. Add a `Bricks Image` element to your canvas. 
2. Add a placeholder image from your media library
   1. Style the placeholder image as you see fit 
3. In the content section of the image component scroll down until you see `North Commerce Attributes`
   1. **Flow**: Cart Items
   2. **Name**: image
   3. **Value**: *Leave this blank*
   4. **Link**: src

<figure><img src="https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FikfY4kfeN3e3C2rpryIn%2Fimage.png?alt=media&#x26;token=9f85317b-c2ff-44c3-98db-65dc4fe16f7a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You should also add the cart image urls to srcset
{% endhint %}

<figure><img src="https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FmNLhKcmYyLrJKkCpcLo6%2Fimage.png?alt=media&#x26;token=01bb9eec-45cf-4ada-8df9-039385bb341f" alt=""><figcaption></figcaption></figure>

### Adding Cart Item Title (Product Name)

1. Add a `Bricks Heading or Basic Text` element to your canvas.&#x20;
2. Add a placeholder text with one of your product names
   1. Style the placeholder text as you see fit&#x20;
3. In the content section of the image component scroll down until you see `North Commerce Attributes`
4. **Flow**: Cart Items
5. **Name**: title
6. **Value**: *Leave this blank*
7. **Link**: innerHTML

<figure><img src="https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FK7WnGN9HsIKNvWx786QB%2Fimage.png?alt=media&#x26;token=1cdf1273-4a7b-405f-b636-11f5becdee8c" alt=""><figcaption></figcaption></figure>

### Adding Cart Item Price (Product Price)

1. Add a `Bricks Heading or Basic Text` element to your canvas.&#x20;
2. Add a placeholder text with one of your product prices
   1. Style the placeholder text as you see fit&#x20;
3. In the content section of the image component scroll down until you see `North Commerce Attributes`
4. **Flow**: Cart Items
5. **Name**: price
6. **Value**: *Leave this blank*
7. **Link**: innerHTML

<figure><img src="https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FgXBhfiU2zj4wjzdgYSFA%2Fimage.png?alt=media&#x26;token=3bb2ea2c-6acf-4834-9d9f-7219ec4d8455" alt=""><figcaption></figcaption></figure>

### Adding Cart Item Quantity (Total # of each product in cart)

1. Add a `Bricks Heading or Basic Text` element to your canvas.
2. Add a placeholder text with one of your product prices
   1. Style the placeholder text as you see fit
3. In the content section of the image component scroll down until you see North Commerce Attributes
4. Flow: Cart Items
5. Name: quantity
6. Value: Leave this blank
7. Link: innerHTML

<figure><img src="https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FJywJVLZgZSDaF8vk5jRo%2Fimage.png?alt=media&#x26;token=09a95aff-56fb-40c9-8f98-241eebf5c98a" alt=""><figcaption></figcaption></figure>

### Adding Cart Items Total Price (Total for all items in cart)

1. Add a `Bricks Heading or Basic Text` element to your canvas.
2. Add a placeholder text with one of your product prices
   1. Style the placeholder text as you see fit
3. In the content section of the image component scroll down until you see North Commerce Attributes
4. Flow: Cart Items
5. Name: total-price
6. Value: Leave this blank
7. Link: innerHTML