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
- Go to your Shopify Admin → Online Store > Themes > Edit Code
- Under the Snippets folder, click “Add a new snippet”
- Name the snippet:
angle-3d-cart-merged-bundle
- Paste the code below into that file:
📄 Click to show the full snippet code[](#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)
- 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
- 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 -%}
- 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 %}
- [ 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.
Updated on: 07/05/2025
Thank you!