Articles on: Advanced Settings

Display Product-Wise Available Delivery Methods in Cart

You'll display available delivery methods for each product in your cart, helping customers make informed decisions before checkout.

This feature shows customers which delivery options are available for each product, reducing support questions and improving the shopping experience.

What You'll Accomplish

Your cart will display delivery method indicators like "Pickup Available" or "Local Delivery Available" next to each product, based on the product tags you've configured.

Cart page showing delivery method indicators next to product

Setup Process

Step 1: Add Delivery Method Tags to Products

Navigate to Products in your Shopify admin
Open the product you want to configure
Add delivery method tags in the Tags field:

pick up for pickup availability
local delivery for local delivery availability
Courier for shipping availability

Product edit page showing tags field with delivery method tags entered

Step 2: Access Theme Customizer

Go to Online Store → Themes
Click ••• on your active theme
Click Edit code in the menu that pops up

Theme customizer interface showing ••• button

Step 3: Locate Cart Template

The theme editor window will open
Use the Search files box to find your cart template
Look for files named:

cart.liquid
cart.js
cart-template.liquid
cart.liquid.js

Theme editor window showing file structure and search functionality

Search results showing cart template files available for editing.

Step 4: Add Delivery Method Code

Click on your cart template file
Find the cart details section (varies by theme)
Add this code snippet before the checkout section or cart totals
Click Save to apply your changes

Need help? Contact our support team for assistance with theme-specific placement.

{% if item.product.tags contains "pick up" %}
         <p style="color:green"><strong>Pickup Available</strong></p>
{% endif %}
{% if item.product.tags contains "local delivery" %}
         <p style="color:green"><strong>Local Delivery Available</strong></p>
{% endif %}
{% if item.product.tags contains "Courier" %}
         <p style="color:green"><strong>Shipping Available</strong></p>
{% endif %}

Code editor showing the delivery method snippet added to the cart template

That's it! Your cart will now display available delivery methods for each product based on their tags.

How It Works

The code checks each product's tags and displays the appropriate delivery method indicator:

Products tagged with pick up show "Pickup Available"
Products tagged with local delivery show "Local Delivery Available"
Products tagged with Courier show "Shipping Available"

Customization Options

You can modify the display by:

Changing the text labels in the code
Adjusting the color by modifying color:green
Adding additional delivery method tags as needed

Change Cart Type - Configure the app for cart page use and customize display options
How to Customize the Widget Look - Style your delivery widget appearance
Manual Widget Placement - Place the widget exactly where you want it

Updated on: 07/18/2025

Was this article helpful?

Thank you!