> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# 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.](https://support.teeinblue.com/en/article/how-to-add-cross-sell-personalization-to-your-campaigns-o7xnwn/)
* 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
* Log in to your Shopify store **admin > Go to Themes > Edit code**
* 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 tag, it'll highlight the ++ tag++. Scroll down and look for the highlighted ++
++.
* Add the script code below right **under ++++**. 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 %}
{% 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 %}
{% 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 %}
{% 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.