Merged Bundles

Display Merged Bundles in the Cart

If you're using the Merged Bundle feature of Angle 3D Configurator, you’ll need to make a small edit to your Shopify theme so bundle details display properly on the cart page.

🛒 This does not affect checkout — Shopify displays bundles correctly there by default.

---

✅ Step 1: Create a New Snippet

1. Go to your Shopify Admin → Online Store > Themes > Edit Code

2. Under the Snippets folder, click “Add a new snippet”

3. Name the snippet:

   angle-3d-cart-merged-bundle

4. Paste the code below into that file:

📄 Click to show the full snippet code

{% comment %}Angle 3D - Custom display for Merged Bundle{% endcomment %}
{% if item.item_components %}

  {% assign display_secondary_products_images = true %}
  {% assign display_3d_customizer_url = true %}
  {% assign display_main_product_line_item_properties = true %}
  
  <ul style="font-size: 0.8em;margin-top: 10px;padding-left: 0px;list-style: none;" class="tda-merged-cart-items">
    {% assign parent_item = nil %}
    
    {% for line_item in item.item_components %}
      {% if line_item.properties['_isParent'] %}
        {% assign parent_item = line_item %}
      {% endif %}
    {% endfor %}

    {% if parent_item %}
        {%- assign main_product_properties = parent_item.properties -%}
        {%- for property in main_product_properties -%}
          {% assign first_char = property.first | slice: 0, 1 %}
          {% if first_char != "_"  and display_main_product_line_item_properties  and property.first != "3D Customizer URL" %}
              <li style="padding-left: 0px">{{ property.first }}: {{ property.last }}</li>
          {% endif %}
          {% if property.first  contains "3D Customizer URL" and display_3d_customizer_url %}
              <li style="padding-left: 0px; list-style: none;">
                   <a href="{{property.last }}" class="tda-edit-customizer-btn">Edit customisation</a>
              </li>
          {% endif %}
        {%- endfor -%}
    {% endif %}

    {%- for item_component in item.item_components -%}
      {%- assign item_component_variant_options = item_component.options_with_values -%}
      {%- assign secondary_product_properties = item_component.properties -%}

      {%- if secondary_product_properties['_isParent'] == null -%}
        <li>
          <div style="display:flex; margin-top: 15px">
            {% if item_component.image != null and display_secondary_products_images %}
              <div>
                <img class="tda-merged-cart-items-img" style="border: 1px solid #efefef;margin-right: 8px;border-radius: 5px;object-fit: contain;width:60px;height:60px" src="{{ item_component | img_url: 'x60' }}" alt="{{ item_component.image.alt | escape }}" data-cart-item-image>
              </div>
            {% endif %}

            <div style="display:flex; flex-direction: column;">
              <div>
                <strong>{{ item_component.quantity }} ×</strong>
                <strong style="margin-left: 5px">{{ item_component.product.title }}</strong> 
                {%- comment -%}<span style="margin-left: 10px">({{ item_component.final_line_price | money }})</span>{%- endcomment -%}
              </div> 
  
              {%- for option in item_component_variant_options -%}
                <div class="product-details__item product-details__item--variant-option{% if item_component.product.has_only_default_variant %} tda-hide{% endif %}" data-cart-item-option>{{ option.name }}: {{ option.value }}</div>
              {%- endfor -%}
  
              {%- for property in secondary_product_properties -%}
                {% assign first_char = property.first | slice: 0, 1 %}
                {% if first_char != "_" %}
                    <div style="padding-left: 0px">{{ property.first }}: {{ property.last }}</div>
                {% endif %}
              {%- endfor -%}
            </div>
          </div>
        </li>
      {%- endif -%}
    {%- endfor -%}
  </ul>
{%- endif -%} 

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if (isMobile) {
      const itemContainers = document.querySelectorAll('.tda-merged-cart-items');
      itemContainers.forEach(function(element) {
          element.classList.add('tda-mobile-merged-cart-items');
      });
      const images = document.querySelectorAll('.tda-merged-cart-items-img');
      images.forEach(function(element) {
          element.classList.add('tda-mobile-merged-cart-items-img');
      });
    } 
  });
</script>
<style>
  .tda-edit-customizer-btn{
    background: #3b3b3b;
    padding: 10px 30px;
    color: #fff;
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
text-decoration: none;
  }
  
  .tda-mobile-merged-cart-items {
    font-size: 0.4em !important;
    padding-left:0px !important;
  }

  .tda-mobile-merged-cart-items-img {
    width: 30px !important;
    height: 30px !important;
    display: none !important;
  }

  .tda-hide {
    display: none;
  }
</style>
{% comment %}END - Angle 3D - Custom display for Merged Bundle{% endcomment %}

---

✅ Step 2: Add the Snippet to Your Cart Template

(This step requires some basic coding skills, so we invite you to contact us if you are not able to do it)

1. Still in your theme code editor, locate the cart item loop. It usually lives in: (The file name could be different in your theme)

sections/cart-items.liquid. 
OR 
sections/main-cart.liquid 

1. Inside the loop, locate the area where Shopify shows the product’s line item properties.

The loop is usually similar to this code:

{%- for item in cart.items -%}
    ...
    {%- for property in item.properties -%}
        ...
    {%- endfor -%}
    ...

    ...
{%- endfor -%}

1. At the specified location above, add those 2 lines:

{% comment %} ANGLE 3D CONFIGURATOR - MERGED BUNDLE DETAILS {% endcomment %}
{% render 'angle-3d-cart-merged-bundle' with item as item %}

1. [ OPTIONAL] (The second line above assumes your line item variable is called "item". If it is called any other way, you'll need to adapt it accordingly. Ex: If your line item variable is called "myOwnItem", the line to integrate will be:

{% render 'angle-3d-cart-merged-bundle' with  as item %}

---

🧪 You're Done!

Your cart page will now show:

• The bundle breakdown (main product & secondary products)

• Customization details

• “Edit customization” button

• Variant image and quantity for each secondary product

See below, an example of a cart with a merged bundle item once the code is properly integrated:

💬 Need help? Contact our support team — we’ll be happy to assist.