Possible reasons why the bundle does not break down when checking out and how to solve them

Running into issues with your bundle content not displaying correctly during checkout using Simple Bundles version 2.0? Here's a quick guide to troubleshoot and solve common problems:

Empty bundle inside another bundle

If you're trying to create a nested bundle, ensure that each level contains its bundle content. To ensure nested bundles (a bundle within another bundle) display correctly:

Open the bundle and select a product.
In the Shopify product dashboard, choose "More actions" > "Edit bundle" via Simple Bundle.
If it's a bundle, it will open in the Simple Bundle dashboard. Ensure it's not empty.

Cart drawer or theme compatability

Certain theme developers or third-party cart drawer apps may not add properties to the cart during the POST method execution, preventing proper breakdown. Follow our technical guide for step-by-step instructions.

App block or embed system issues (Infinite options bundle)

Ensure the app block or embed system is rendered inside a <form> element in the HTML structure of your theme. Test by enabling only the app block or embed system separately.

Empty option name (Infinite options bundle)

Ensure option names are assigned, as they are crucial when products are added to the cart.

Double quotes in option names (Infinite options bundle)

Avoid using double quotes in option names, as they can disrupt the rendering process. Instead, use single quotes or other alternatives to prevent interference with the HTML attributes.

Example of use with double quotes:

Rendered attributes:

Nested level exceeds 10

Avoid creating bundles with more than 10 levels. If you surpass this limit, the bundle content will only break down to the 10th level.

Quick view or quick add to cart outside product page (Infinite options bundle)

If you are using Quick View or Quick add to cart buttons you should make sure to omit the infinite options bundle since drop-downs are usually not shown in these sections and as a consequence the bundle can be added without options selected.

If you are using a 3rd party app that allows you to skip it with a product link, ID, SKU, etc. Make sure you configure it.

Otherwise, if this is a feature of your theme, we can take advantage of the metafields and make a conditional so that when it is an Infinite options bundle, it creates a button that redirects to the product page.

Note: Before following the following steps, we recommend duplicating your theme to work more securely.

1- Open the code editor of your theme.

2- Look for the file in charge of rendering these buttons, they are usually: card-product.liquid, product.liquid, card-collections.liquid, etc.

Note: If you have basic knowledge of code, you can check the devtool of your browser and review the selectors of these buttons and thus filter the files.

3- After locating the file, make sure to find the section that renders the buttons in the file and add it after the comment "" that you will see in the code below.

On the other hand, in the element "<a href="{{ product.href }}">Choose options</a>" make sure that the product.href variable is the one indicated for your theme since sometimes it can vary, for example example: product_variant.href, variant.href, p.href, etc.

<!-- Start Simple bundles edits -->
{% if product.selected_or_first_available_variant.metafields.simple_bundles.variant_options.value == null %}
<!-- Original theme version -->

{% else %}

<!-- Element that redirects to the product page (Make sure to add the Classes or CSS rules the merchant has to match the theme) -->

<a href="{{ product.href }}">Choose options</a>

{%- endif -%}
<!-- END Simple bundles -->

Finally, make sure to add the same classes that your buttons have to maintain the styles of your store.

Recent migration to Simple Bundles V2.0 with manual installation

If you've recently migrated to version 2.0 and experience issues with your manual installation of infinite options bundle, follow these steps:

Paste the following code at the end of the "simple-bundles-options.liquid" file in your theme.

<script>
  (function() {
    // function to update the hidden input value
    function updateHiddenInputValue() {
        var selects = document.querySelectorAll('#{{ div_id }} select');
        var values = [];
        
        selects.forEach(function(select) {
            var selectedOption = select.options[select.selectedIndex];
            if (selectedOption) {
                values.push(selectedOption.value);
            }
        });
        
        if (values.length === 0) {
          return;
        }
        var hiddenInputValue = values.join(' <> ');
        var hiddenInput = document.querySelector('#{{ div_id }} input[name="properties[_bundle_selection]"]');
        if (!hiddenInput) {
            hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'properties[_bundle_selection]';
            document.getElementById('{{ div_id }}').appendChild(hiddenInput);
        }
        hiddenInput.value = hiddenInputValue;
    }
    // call the function initially to update the hidden input value
    window.addEventListener('pageshow', updateHiddenInputValue);
    // listen for changes on each select element and update the hidden input value
    var selects = document.querySelectorAll('#{{ div_id }} select');
    selects.forEach(function(select) {
        select.addEventListener('change', updateHiddenInputValue);
    });
  })();
</script>

Bundle contents not included in any sales channels

If you don't want to sell your products individually in your store, and have disabled the Online Store channel for the items, this can cause issues breaking down items at checkout. Instead, you can set the status to Draft and enable the Online Store channel.

This should resolve any disaggregation issues you're facing after a manual installation.

If you require additional assistance, do not hesitate to contact us!