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

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 selected gallery


Find a class named "product-details". Double click on "product-details" then copy it.


Each theme will have a different class name

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

Log in to your Shopify store admin > Go to Themes > Edit code


Look for section called cart.liquid. If there's no content in cart.liquid, please search for section cart-template.liquid.




In cart-template.liquid, press key combination Ctrl + F (For iOS system, it should be Command + F) to open Search box, then paste "product-details" in search box to search for class


Click on the first "product-details" text on line <ul class>, 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.

{% if item.properties.customization_id %}
  {% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ item.properties.customization_id }}.jpg{% endcapture %}
  <img class="tee-img-fluid" src="{{ customization_image }}" alt="artwork design" />
{% 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 iOS) and search between "for line in cart" or "for item in cart" or "for lineitems 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:

{% if item.properties.customization_id %}
  {% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ item.properties.customization_id }}.jpg{% endcapture %}
  <img class="tee-img-fluid" src="{{ customization_image }}" alt="artwork design" />
{% endif %}

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

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 </td> tag. Then add script code below under that tag.

{% if line.properties.customization_id %}
  {% capture customization_image %}https://cdn.teeinblue.com/customizations/{{ line.properties.customization_id }}.jpg{% endcapture %}
  <div>
    <img src="{{ customization_image }}" alt="artwork design" style="max-width: 100%; height: auto; vertical-align: middle;" />
  </div>
{% endif %}

STEP 4

Remember to Save after editing email script

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

Updated on: 20/09/2022