We have released a new feature which enables the Customers to edit the Customization inside Cart Page. 🥳

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.

At the moment, this feature only works with SDK v1, and Campaign by Product Base.

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

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 %}
  {% 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: 10/10/2024