Articles on: Seller Cases

Add Cross-sell Personalization on Cart page

You can add a Cross-sell Personalization inside Cart Page so that the Customers can personalize and add a matching item.

A little coding experience is required. If you have trouble following the guide, please send us a message and we will do it for you.

Add button to cart page

STEP 1: Add Cross-sell Personalization to your campaigns

Make sure you have added Cross-sell Personalization to your campaigns following this guide: How to add Cross-sell Personalization to your campaigns.
In Teeinblue's Product Page Settings, the "Display on" of Cross-sell Personalization must be either "Cart" or "Both product page & cart"

STEP 2: Identify class for the rendered design placement

Go to Cart page > Right click > Inspect the item in cart

The developer tool will appear and auto detect the HTML tags of your line items details:

Find a class named ".cart-item__details". Double click on ".cart-item__details" then copy it.

Each theme will have a different class name. The purpose is to find the block containing all line item of the product inside cart page.

STEP 3: Add teeinblue's script code to your cart

Search for and edit the Liquid file that contains the content of your cart page. For example, with the Dawn theme, you would search for the main-cart-items.liquid file.

In main-cart-item.liquid, press key combination Ctrl + F (For MacOS system, it should be Command + F) to open Search box, then paste "cart-item__details" in search box to search for class

While you are there, look for the nearest <ul> tag, it'll highlight the <ul> line and its </ul> tag. Scroll down and look for the highlighted </ul>.

Add the script code below right under </ul>. Then Save it to activate design in cart.

{% assign cross_sell_product = item.product.metafields.teeinblue.cross_sell_product.value %}
{% assign cross_sell_collections = item.product.metafields.teeinblue.cross_sell_collections.value %}
{% if cross_sell_collections or cross_sell_product %}
  <div
    class="tee-edit-cross-sell-product"
    data-item-key="{{ item.key }}"
  ></div>
{% endif %}

Since product in cart can be displayed in line or item differently based on theme, to correctly adding script code, please press Ctrl + F (Command + F for MacOS) and search between "for line in cart" or "for item in cart" or "for line_item in cart".

If search result is "for item", product is displayed in item.

➡ Use the script above normally.

If search result is "for line", it indicates that your product in cart is displayed in line

➡ Replace the "item" in the script above to "line". Like this:

{% assign cross_sell_product = line.product.metafields.teeinblue.cross_sell_product.value %}
{% assign cross_sell_collections = line.product.metafields.teeinblue.cross_sell_collections.value %}
{% if cross_sell_collections or cross_sell_product %}
  <div
    class="tee-edit-cross-sell-product"
    data-item-key="{{ line.key }}"
  ></div>
{% endif %}

If search result is "for line_item", product is displayed in line_item ➡ Change the "item" in the script to "line_item". Like this:

{% assign cross_sell_product = line_item.product.metafields.teeinblue.cross_sell_product.value %}
{% assign cross_sell_collections = line_item.product.metafields.teeinblue.cross_sell_collections.value %}
{% if cross_sell_collections or cross_sell_product %}
  <div
    class="tee-edit-cross-sell-product"
    data-item-key="{{ line_item.key }}"
  ></div>
{% endif %}

Save and the 'Add a matching customizable item' button will appear on your cart page.

If you find difficult to follow this instruction, please contact us for further support.

Updated on: 22/12/2025

Was this article helpful?

Thank you!