Show custom info in cart

Show custom info in cart

As i have mentioned in an earlier post regarding adding a new image to the collection resource, so is the case in this scenario.

Read here the first article on how to add metafields

Use cases:

  • A product or variant has a longer delivery time
  • The delivery for that specific product may cost more
  • Announce something when a customer adds that specific variant to the cart
  • Pass notes to the cart or checkout
  • Show an extra button or CTA when that item is added to cart
  • Any simple task that would require a lot of if`s and elses in the code

The situation is as follows: you may have some products or product variants that have very specific notes or attributes, or some attributes that you have to show to the customer, but only if that specific item is added to cart. This behaviour can be easily achieved by using Metafield Editor app.

Like the previous post mentions, the first step is to create said metafield for the required product or variant. Choose an adequate namespace and key for the metafield and as value enter the text, link, image or whatever you will like to show for the item.

The next step is to show the content on the cart page. This step requires you to edit your theme`s code. So choose edit code and find the cart.liquid template file. Inside the template look for the perfect spot to show the desired info, such as below the product list, or under the total, or any other location you would like. 

For example I have shown a text just below the item`s price in the using this code just below the item.price tag.

<p style="color:red;">{{ item.product.metafields.test.test }}</p>

The result:

Feel free to leave comments or contact me if you have any questions regarding this article. Thank you for reading.

Leave a comment

Please note, comments need to be approved before they are published.