Edit customization in cart page

You can add a Edit Customization button inside Cart Page so that the Customers can re-do their customization there.

A little coding experience is required. If you have trouble following the guide, please send our Support Team a ticket and we will do so for you.

Add edit button to cart page

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

Log in to Teeinblue Portal Store settings > General settings > Cart items > Enable the "Edit 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

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 %}
  {% assign addon_variants = item.product.metafields.teeinblue.addon_variants.value %}
  {%- if addon_variants -%}
  <script>
    window.teeinblueAddonVariants = (window.teeinblueAddonVariants || []);
    {% for variant in addon_variants %}
      {% if variant %}
        if (!window.teeinblueAddonVariants.find(item => item.id === {{variant.id}})) {
          window.teeinblueAddonVariants = [
            ...window.teeinblueAddonVariants,
            {{ variant | json }}
          ];
        }
      {% endif %}
    {% endfor %}
  </script>
  {%- endif -%}
  <div
    class="tee-edit-customization"
    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 %}
  {% assign addon_variants = line.product.metafields.teeinblue.addon_variants.value %}
  {%- if addon_variants -%}
  <script>
    window.teeinblueAddonVariants = (window.teeinblueAddonVariants || []);
    {% for variant in addon_variants %}
      {% if variant %}
        if (!window.teeinblueAddonVariants.find(item => item.id === {{variant.id}})) {
          window.teeinblueAddonVariants = [
            ...window.teeinblueAddonVariants,
            {{ variant | json }}
          ];
        }
      {% endif %}
    {% endfor %}
  </script>
  {%- endif -%}
  <div
    class="tee-edit-customization"
    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 %}
  {% assign addon_variants = line_item.product.metafields.teeinblue.addon_variants.value %}
  {%- if addon_variants -%}
  <script>
    window.teeinblueAddonVariants = (window.teeinblueAddonVariants || []);
    {% for variant in addon_variants %}
      {% if variant %}
        if (!window.teeinblueAddonVariants.find(item => item.id === {{variant.id}})) {
          window.teeinblueAddonVariants = [
            ...window.teeinblueAddonVariants,
            {{ variant | json }}
          ];
        }
      {% endif %}
    {% endfor %}
  </script>
  {%- endif -%}
  <div
    class="tee-edit-customization"
    data-customization-id="{{ customization_id }}"
  ></div>
{% endif %}

Save and the 'Edit 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: 14/11/2025

Was this article helpful?

Thank you!