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.
In Sales channels, click Online Store.
Find the theme you want to edit, and click "...", then Edit code.
Locate the cart file (e.g. cart.liquid, cart-template.liquid, main-cart.liquid, etc.)
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 %}
