Add a Button to enlarge the Design Image inside Cart Page

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.

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

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

Was this article helpful?

Thank you!