> ## 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).
# How to set up: Customization design image
# What is Customization Design Image?
The Customization Design Image is a thumbnail image which shows all the customization options based on the customers' choices.
When the Customers have added an item to cart, they would like to see their customized image inside the Cart Page as well.
By default, teeinblue will automatically replaces the default image of your Theme, and show our customization design image.
| The Customization design image can be shown on Cart Page, Cart Drawer, and Shopify Email Templates.
|| In case our application does not automatically replace these images, you can continue reading this article to add it on your own. (A little coding experience is required)
---
We prepared a custom coding method to help you show the design customer created (customization design) in different areas in Shopify.
In this instruction, we will instruct you to **add customization design in Cart and in Order confirmation email**.
||| If you need to place it else where, feel free to contact us.
---
# Show design in Cart
### Method 1: Adding a new Customization Image inside Cart Page
## STEP 1: Identify class for the rendered design image 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 2: Add teeinblue's script code to your cart
* Log in to your Shopify store **admin > Go to Themes > Edit code**
* Look for file called `main-cart-item.liquid`. It should be under `Sections` folder
* 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 customizationImage = item.properties._customization_image %}
{% if customizationImage %}
{% 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*items 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 customizationImage = line.properties._customization_image %}
{% if customizationImage %}
{% endif %}
```
If search result is **"for line_item"**, product is displayed in ++line_item++ ➡ Change the "item" in the script to **"line_item"**.
### Method 2: Replacing the default Theme's thumbnail Image
## STEP 1: Identify class for the rendered design image placement
* Go to **Cart page > Right click > Inspect** the default image in cart
* The developer tool will appear, please hover your mouse over to the cart item section, and select its class
|| You should select the whole cart section, not just the image itself.
## STEP 2: Add teeinblue's scripts into your Theme to replace the default thumbnail image.
Similar to the step above, log in to your Shopify store **admin > Go to Themes > Edit code**
* Look for section called `theme.liquid`.
* Under Layout folder, find the `theme.liquid` file, click on the file name to open that file on the right.
* Ctrl+F to find the tag ``
* Paste the lines of code below above `` and replace the "yourselector" with the CSS selector you copied in Step 1:
```
```
* It will look like this:
|| Each theme will have a different class name
| If you find it difficult to follow this instruction, please contact us for further support.
||| As of June 2022, Shopify had a new rule regarding Lighthouse speed which we have to comply. If you are using Cart Drawer, or Flyout Cart feature, the Customization design image will only show on the teeinblue's product pages.
---
# Show design in confirmation email
||| This method works for the basic email templates of Shopify. If you use third-party email, it might not work.
## STEP 1
Go to **Shopify Settings > Notifications > Order confirmation**
## STEP 2
Scroll down and look for a line ++"{% for line in subtotal_line_items %}"++
## STEP 3
Scroll down and find the closest ++++ tag. Then add script code below under that tag.
```
{% assign customizationImage = line.properties._customization_image %}
{% if customizationImage %}
{% endif %}
```
## STEP 4
**Remember to Save after editing email script**
# Show design in Checkout Page
As of 2023, Shopify no longer use the file `checkout.liquid` to render the Checkout Page. Shopify has since beeen moved to [Checkout Extensibility](https://www.shopify.com/enterprise/blog/checkout-extensibility-winter-editions) - a new foundation for checkout that is more secure, performant, upgrade-safe, and customized using apps.
| Teeinblue is now compatible with this new flow as well.
|| You will have to be a Shopify Plus user to use the Checkout Extensibility feature.
* If you are a Shopify Plus user, please navigate to Store Settings > Customization Images > find `For Checkout page` block > and click on `Add app block` button
After that, you will be then re-directed to your Theme's Checkout Page settings.
* In this Page, under `Order Summary` section, please click on `Add app block` button, and select the `Customization Image Preview`
* Once you're done, it will look like this:
* When clicking on the Teeinblue block there, you can further modify the Order Summary section. For example, the button label, preview type, etc.
* Once you are done, please review the result by adding a Teeinblue product to Cart and see how it goes!
---
| You can view each Preview Type below:
* **Popover**
* **Popup**
* **Expansible**
# Showing design in Thank You and Order Status Page
* Navigate to your Online Store > Theme > Customize
* Continue to navigate to `Checkout and customer accounts`
**NOTE**: Inside Teeinblue portal, you can also navigate to Store Setting > Customization Image > and select the corresponding section like so to quickly open up the same section on Shopify
* Continue to navigate to Apps > Teeinblue Product Personalizer > Customization Image Preview > Select the Page you want to add the Preview Image to.
* Be sure to enter all the necessary information there, along with the display method you want
* Once you're done, please go ahead and make a test order. On Thank You Page, the button should look like this
| If all good now, please continue to do the same step with the Order Status Page.
| If you find difficult to follow this instruction, please contact us for further support.