teeinblue - How to render design image in Shopify?

How to set up: Customization design images

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

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


  1. The developer tool will appear and auto detect the HTML tags of your selected gallery

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

Note: Class name can be different in different theme

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

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


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




  1. 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


  1. 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>.


  1. 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 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:
{% if line.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.

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.


    • Related Articles

    • Set up artwork and printarea for Mug

      For mug, most fulfillment providers use the wrap-around method to print on the outside of the mug. That's why the mug's printarea is usually in a horizontal rectangle shape. Depending on the position you want to print on the mug, you will need to ...

    • FAQs (Frequent-Asked-Questions) for teeinblue

      1. Can I use teeinblue even if I don't use any fulfillment provided in app? Yes, you can use our app as normal even if you don't use the fulfillment providers which teeinblue integrates with. You can manually create your product base, and manually ...

    • Import / Add new / Edit a Product Base

      Product Base is a print-on-demand (POD) product provided by Fulfillment services, which you will use to add your design to in Campaign. Import product Allows you to look up and one-click import a product base from a fulfillment provider, including ...

    • Set up wing for different size of dogs

      STEP 1: Divide your dogs to 3 groups according to size: big dogs, medium dogs and small dogs. Then, upload "Wing" layer to your artwork. In our instruction, we will start with big size of dog breeds. STEP 2: Open personalization editor. Enable "Add ...

    • Set up Picanova required options to send to fulfill

      What are required options? For some products of Picanova, it's required to have certain extra options. These options are called required option of product. (For example: Canvas requires certain extra options, including canvas border and stretcher ...