Did you go through the setup for Build-A-Box Bundles and you're still seeing issues? Here are a few things that may have gone wrong that may help while troubleshooting.

No Products Showing Up in Customize Box step

Make sure all products in the Build-A-Box bundle or linked in the Add-ons are:

  • Not Sold Out

  • Have inventory > 0 or are not tracking inventory

  • Are part of the SAME subscription plan as each other, and as the "Parent" bundle product

  • Are available in the online store

  • Are active (not draft)

Order Details not Showing in the Cart

You may need to add some code to your cart file in order to make sure these properties show correctly.

This will likely go in your cart.liquid or cart-template.liquid theme file. If you have a slide out cart or other custom cart, you will need to find the file where the cart item layout is defined.

The code will not be the same for every theme - You'll need to find where item properties are referenced (often "item.properties" or "cart_item.properties") If they are not referenced anywhere, then look for where product variants are displayed for each cart item and add code under that section. Here is an example:

{% assign property_size = item.properties | size %}
{% if property_size > 0 %}
{% for p in item.properties %}
{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}
<p>
{{ p.first }}:
{% if p.last contains '/uploads/' %}
<a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
{% else %}
{{ p.last }}
{% endif %}
</p>
{% endunless %}
{% endfor %}
{% endif %}

Add to Cart button is still showing instead of 'Customize my Box'

If your "Add to Cart" button is still showing and the Build-A-Box bundle product is set to active, then likely the app is not able to detect where your "Add to Cart" button is in order to replace it. Here's what you should do:

Our app can't find your "Add to Cart" button because it's using a non standard button type (submit) so you'll have to provide a selector that will identify the button for the app. To find that identifier:

  1. Open your product page

  2. Right click on the Add to Cart button and click Inspect in the menu that appears

  3. The developer tools will appear and the Button's HTML element should be highlighted. Look for a unique classname and use that to create your unique selector. Hold on to that unique selector for the next step.

    example:

    <button type="button" name="add" class="addtocart button ajax-submit action_button button--add-to-cart action_button--secondary" data-label="Add to cart" data-add-to-cart-trigger="" style="/* display: none; */"> <span class="text">Add to cart</span> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark"> <path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path></svg></button>

    for this example, you could use the classname addtocart and your unique selector would be button.addtocart

Now we need to add some custom code in your theme:

  1. [insert steps on how to open the code editor].

  2. Add a new Snippet by finding the Snippets section in the left nav of the code editor and clicking the "Add a new Snippet" button.

  3. Name the snippet bundleapp-theme-custom

  4. Inside that snippet add the following code and replace [button selector] with the unique selector you found in the previous section:

    <script>
    (function () {
    window.bundleapp = window.bundleapp || {};
    window.bundleapp.settings = {
    addToCartButtonSel: "[button selector]",
    }
    })();
    </script>

  5. Open your theme.liquid file under the Layout section in the left hand nav

  6. Insert the following code just before the closing body tag, which looks like this: </body>

    {% render 'bundleapp-theme-custom' %}

Click Save and check your product page. The Custom my Box button should be showing now.

Did this answer your question?