Bundle Customisation Options

Store Design
, ,
1

Hey guys just having a problem with my bundle section on my product page, I’m doing a customisable product with bundle discounts. I want it to have the option to choose the colour and the size, as well as a text box next to it so that the customer can type the names for each 3 of the separate items.

As an example:
Summer - Large - “Benji”
Orange - Small - “Grace”
Green - Medium - “Chai”

I’m using the shrine theme and I’m just wondering if anyone can help me enter this in or tell me how to do it, thanks.

image
image820×352 16.6 KB

4

Hi,

Hope this will help

  • Search for product form template / section
    -Add these fields inside product (before Add to Cart button)
    Code example
<!-- Bundle customisation: 3 items -->
<div class="bundle-customisation">
  <!-- Item 1 -->
  <div class="bundle-item">
    <h4>Item 1</h4>
    <label>Color
      <select name="properties[Item 1 - Color]" required>
        <option value="">Choose…</option>
        <option value="Summer">Summer</option>
        <option value="Orange">Orange</option>
        <option value="Green">Green</option>
      </select>
    </label>

    <label>Size
      <select name="properties[Item 1 - Size]" required>
        <option value="">Choose…</option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
      </select>
    </label>

    <label>Name
      <input type="text" name="properties[Item 1 - Name]" placeholder='e.g. "Benji"' required />
    </label>
  </div>

  <!-- Repeat for Item 2 -->
  <div class="bundle-item">
    <h4>Item 2</h4>
    <label>Color
      <select name="properties[Item 2 - Color]" required>
        <option value="">Choose…</option>
        <option value="Summer">Summer</option>
        <option value="Orange">Orange</option>
        <option value="Green">Green</option>
      </select>
    </label>

    <label>Size
      <select name="properties[Item 2 - Size]" required>
        <option value="">Choose…</option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
      </select>
    </label>

    <label>Name
      <input type="text" name="properties[Item 2 - Name]" placeholder='e.g. "Grace"' required />
    </label>
  </div>

  <!-- Item 3 -->
  <div class="bundle-item">
    <h4>Item 3</h4>
    <label>Color
      <select name="properties[Item 3 - Color]" required>
        <option value="">Choose…</option>
        <option value="Summer">Summer</option>
        <option value="Orange">Orange</option>
        <option value="Green">Green</option>
      </select>
    </label>

    <label>Size
      <select name="properties[Item 3 - Size]" required>
        <option value="">Choose…</option>
        <option value="Small">Small</option>
        <option value="Medium">Medium</option>
        <option value="Large">Large</option>
      </select>
    </label>

    <label>Name
      <input type="text" name="properties[Item 3 - Name]" placeholder='e.g. "Chai"' required />
    </label>
  </div>
</div>

  • Make sure theme doesn’t block the properties

  • Validation (prevent empty submission)
    Code example

(function(){
  var form = document.querySelector('form[action*="/cart/add"]');
  if(!form) return;
  form.addEventListener('submit', function(e){
    var missing = [];
    for(var i=1;i<=3;i++){
      var color = form.querySelector('[name="properties[Item '+i+' - Color]"]');
      var size  = form.querySelector('[name="properties[Item '+i+' - Size]"]');
      var name  = form.querySelector('[name="properties[Item '+i+' - Name]"]');
      if(!color || !size || !name) continue; // safety
      if(!color.value || !size.value || !name.value.trim()){
        missing.push(i);
      }
    }
    if(missing.length){
      e.preventDefault();
      alert('Please fill Color, Size and Name for item(s): ' + missing.join(', '));
      return false;
    }
  });
})();
  • Show custom inputs on cart page
5

Hi

For this request, I recommend trying a third-party app like BOGOS.

Our advanced Volume Discount feature allows you to set up bundles with discounts, and customers can easily select different variants (such as color and size) for each product in the bundle.

You can look at the example below:

image
image537×419 22.6 KB

Try BOGOS for free here

6

Hi @Furro,

Sorry for the late reply,

Yes, this is possible using a third-party app like Profit Bundles, where customers can choose what goes inside the bundle. Since the bundles created through this app are regular Shopify products, you can use any product option app from the Shopify App Store to add custom fields and collect input from customers. This will be a much cheaper option to you as compare to other options mention here.

As these products are standard Shopify products, each option will be treated as a variant in Shopify, and you can set prices at the variant level. This means each variant can have its own price based on whatever discount strategy you choose.

7

Hi @Furro

I highly recommend checking out the Shopify app BiDeal Bundle Volume Discounts. It’s a great tool for increasing sales by encouraging customers to buy more through effective bundle deals and volume discounts. It’s user-friendly and can help boost your average order value.

image
image1160×911 106 KB

You can find it here: BiDeal Bundle Volume Discounts - Volume discount Shopify app | Tiered pricing & Bundles | Shopify App Store . Give it a try!