> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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** 

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_7lme1g.png)

## STEP 2: Identify class for the rendered design image placement

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

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/inspect_1wlgwo2.jpg)

* The developer tool will appear and auto detect the HTML tags of your line items details:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/inspect2_ddi5ze.png)

* 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** 

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/step1_1z03atq.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/searchliquidfile_4g02q.png)

* 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

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/searchclass_mehssk.png)

* 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>++. 

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/ul_3beyh.png)

* Add the script code below right **under&#160;++</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 %}
```

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1lygvh2.png)

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

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/monosnap-staging-tib-2-edit-da_jaaga1.png)

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.

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/step4_1lhjg86.png)

# Translate the labels of the buttons.

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

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_x96s44.png)

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