This guide helps you add a "Preview Design" button to your Cart Page to enlarge the Customization Image.



Once clicked, it will look like this:



Please continue reading to learn more about how to do so. These steps will require a little coding skill. You can contact our Support Team should you have any troubles while doing so.

Add "Preview design" button to cart page

STEP 1: Enable the "Preview design" button display setting in the Teeinblue Portal.

Log in to Teeinblue Portal Store settings > Customization image > Enable the "Preview design" button display setting

STEP 2: 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 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 <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 customization_id = item.properties._customization_id %}
{% if customization_id %}
  <div
    class="tee-preview-design"
    data-customization-id="{{ customization_id }}"
  ></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 customization_id = line.properties._customization_id %}
{% if customization_id %}
  <div
    class="tee-preview-design"
    data-customization-id="{{ customization_id }}"
  ></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 customization_id = line_item.properties._customization_id %}
{% if customization_id %}
  <div
    class="tee-preview-design"
    data-customization-id="{{ customization_id }}"
  ></div>
{% endif %}

Save and the 'Preview design' button will appear on your cart page.

Translate the labels of the buttons.

Go to Store settings > Translation. The translations of the buttons are inside the Cart section.



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

Updated on: 20/09/2024