All Collections
Advanced
​Displaying product information on the cart page
​Displaying product information on the cart page

Show customers the tag, vendor, collection or product type on the cart page

Clemency Farmer avatar
Written by Clemency Farmer
Updated over a week ago

When using features such as conditional activation, you may wish to give customers additional information at the cart page. You can show which products are only available under certain conditions.

For example, if you have some products configured to be "Pickup Only", then it can be confusing for customers on the cart page to determine which product is not available for pickup. This solution will add "Pickup Only" text to a product on the cart page as shown below:

You can edit the code and the wording to display any information about the products, for example:

  • Which checkout methods are available for your products

  • What days or dates your products are available on

  • Which locations your products are available at

  • How long your products take to prepare

If you're not comfortable with editing code, please contact us at [email protected] and we'd be happy to help!


Edit the theme code

To show the text on the cart page, you will need to add some code to your theme files.

  1. In Sales channels, click Online Store.

  2. Find the theme you want to edit, and click "...", then Edit code.

  3. Locate the cart file (e.g. cart.liquid, cart-template.liquid, main-cart.liquid, etc.)

  4. Add the code between the sections related to item quantity and item price—or any other placing that matches your needs.

The code can be modified to show text based on:


Display tags

You can modify the code to match your business needs.

In this example code, customers will be able to see which products are available for what checkout method by the product tags.

The text doesn't need to match the tag—you can add any wording that you need.

  • If the item is tagged as "Pickup Only", the text "Pickup Only" will show in the cart

{% if item.product.tags contains "Pickup Only" %}     
<p style="color:red;text-align:center;"><strong>Pickup Only</strong></p> {% endif %}
  • If the item is tagged as "Delivery Only", the text "Delivery Only" will show in the cart

{% if item.product.tags contains "Delivery Only" %}     
<p style="color:red;text-align:center;"><strong>Delivery Only</strong</p> {% endif %}
  • If the item is tagged as "Shipping Only", the text "Shipping Only" will show in the cart

{% if item.product.tags contains "Shipping Only" %}     
<p style="color:red;text-align:center;"><strong>Shipping Only</strong></p>
{% endif %}

Display vendor

You can modify the code below to match your store.

In this example code, customers will be able to see which products are available for what checkout method by the product vendor.

The text doesn't need to match the vendor—you can add any wording that you need.

  • If the vendor is "Warehouse", the text "Shipping Only" will show in the cart

{% for vendor in item.product.vendor %}
{% if vendor == "Warehouse" %}
<p style="color:red;text-align:left;"><strong>Shipping Only</strong></p>
{% endif %}
{% endfor %}
  • If you want to compare multiple vendors, you can add them into one FOR loop.

    • If the vendor is "Warehouse", the text "Shipping Only" will show in the cart

    • If the vendor is "Store", the text "Pickup Only" will show in the cart

{% for vendor in item.product.vendor %}
{% if vendor == "Warehouse" %}
<p style="color:red;text-align:left;"><strong>Shipping Only</strong></p>
{% endif %}

{% if vendor == "Store" %}
<p style="color:red;text-align:left;"><strong>Pickup Only</strong></p>
{% endif %}
{% endfor %}

Display product type

You can modify the code below to match your store.

In this example code, customers will be able to see which products are available for what checkout method and preparation time by the product type.

The text doesn't need to match the product type—you can add any wording that you need.

  • If the product type is "Flowers", the text "Pickup Only" will show in the cart

{% if item.product.type == 'Flowers' %}
<p style="color:red;text-align:left;"><strong>Pickup Only</strong></p>
{% endif %}
  • If the product type is "Bakery ", the text "Available after 2 days" will show in the cart

{% if item.product.type == 'Bakery' %}
<p style="color:red;text-align:left;"><strong>Available after 2 days</strong></p>
{% endif %}


Display product collection

You can modify the code below to match your store.

In this example code, customers will be able to see which products are available at what location by the product collection.

The text doesn't need to match the collection—you can add any wording that you need.

  • If the collection is "London ST", the text "Available at London street" will show in the cart

{% for collection in item.product.collections %}
{% if collection.title == 'London ST' %}
<p style="color:red;text-align:left;"><strong>Available at London street</strong></p>
{% endif %}
{% endfor %}
  • If you want to compare collections, you can add them into one FOR loop.

    • If the collection is "London ST", the text "Available at London street" will show in the cart

    • If the collection is "Trafalgar SQ", the text "Available at Trafalgar Square" will show in the cart

{% for collection in item.product.collections %}
{% if collection.title == 'London ST' %}
<p style="color:red;text-align:left;"><strong>Available at London street</strong></p>
{% endif %}

{% if collection.title == 'Trafalgar SQ' %}
<p style="color:red;text-align:left;"><strong>Available at Trafalgar Square</strong></p>
{% endif %}
{% endfor %}

Did this answer your question?