Clear the Box Builder Form Once Complete

Introduction

By default, the Box Builder saves a customer’s selections in their browser. This allows them to leave the store and return later without losing progress.

However, some stores prefer the form to clear automatically once the box has been added to the cart. To set this up, you’ll need to add a code snippet to your theme.liquid file.

Before you start:

• Find your Box Builder ID by going to Apps → Giftship → Box Builders → Your Box.
• In the proxy URL, note the unique number (e.g., /a/gs/builder/537 means your ID is 537).

Add the Code Snippet

1. In your Shopify admin, go to Online Store → Themes → Your Theme → Actions → Edit Code.
2. Open your theme.liquid file.
3. Just above the closing </body> tag, paste one of the following snippets depending on which cart type you use.

Standard Cart Page

If your store uses Shopify’s standard cart page, use this snippet. Replace 537 with your Box Builder ID:

{%- if template == "cart" -%}
<script>
  localStorage.removeItem('gsBuilderItems_537');
</script>
{%- endif -%}

This clears the Box Builder form as soon as an item built through the builder is added to the cart.

Giftship’s Drawer Cart (Recommended)

If your store uses Giftship’s drawer cart, use this snippet instead. Replace 25 with your Box Builder ID:

{% if request.path contains '/a/gs/builder/' %}
<script>
  document.addEventListener('giftship.builder.step-loaded', function(event) {
    var box_id = event.detail.id;
    document.addEventListener('giftship.builder.added-to-cart', function() {
      localStorage.removeItem('gsBuilderItems_' + box_id);
    });
  });
</script>
{% endif %}

This ensures the Box Builder form clears once the item has been added to the drawer cart.