Unlock Custom Product Bundles: Shopify Mix & Match Box Builders Explained

Hey everyone,

One of the coolest ways to boost average order value and give your customers a truly personalized shopping experience on Shopify is through a 'mix and match' or 'build your own box' feature. We see this question pop up quite often in the community, and recently, @veluxe1 brought it up, asking about how to set up a custom box builder with minimum and maximum quantity conditions, especially when free app plans often fall short. It’s a fantastic question, and our community members jumped in with some really insightful solutions!

Let's dive into the different approaches discussed, so you can figure out what works best for your store.

The App-Powered Solution: Easify Box Bundle Builder

First up, @Easify-Jennifer from the community offered a straightforward app-based solution: the Easify Box Bundle Builder BYOB. If you’re looking for a user-friendly way to get this done without touching any code, this app seems like a solid contender. It’s designed specifically for creating those flexible mix-and-match experiences, complete with those crucial minimum and maximum quantity conditions @veluxe1 was asking about.

Here’s a quick rundown of how it works inside the Easify app, based on Jennifer’s explanation and screenshots:

• First, you’ll create a new box within the app and select the Regular Box type. This is key because it allows your customers the freedom to pick and choose items to build their unique bundle.

• Next, you’ll add the specific collections or individual products you want your customers to choose from for their custom box. As they pick items, those selections will automatically show up in a neat box summary, making it easy for them to track their choices before adding the whole thing to their cart.

• Finally, for those minimum and maximum conditions – say you want customers to pick at least 3 items but no more than 6 – you just click on Add conditions and set your quantity rules. The app takes care of the rest, validating their choices before they can proceed.

The beauty of this approach is that it’s super beginner-friendly and doesn’t require any coding expertise. You set it up directly within the app, and you’re good to go! Here's a visual of what the finished product might look like:

The DIY Code Approach: Custom Liquid Section

Now, if you're a bit more tech-savvy or have a developer on your team, @topnewyork shared a fantastic custom code solution. This is perfect if you want maximum control over the look and feel, or if you're trying to avoid monthly app subscriptions. It involves creating a new section in your theme's code.

Here's how you can implement this custom box builder, step-by-step:

1. Create a New Section File: Go to your Shopify admin, navigate to Online Store > Themes > Actions > Edit Code. In the sections folder, create a new file named custom-box-builder.liquid.
2. Paste the Code: Copy and paste the following code into your newly created custom-box-builder.liquid file. This code includes the necessary HTML, CSS for styling, JavaScript for the logic (adding items, tracking counts, enforcing min/max, and adding to cart), and a Schema for customizer settings.

  
{{ section.settings.title }}

  
Select between {{ section.settings.min_items }} and {{ section.settings.max_items }} items.




  


    {% for product in collections[section.settings.collection].products %}

      

 

    
      


        

        
{{ product.title }}

        
{{ product.price | money }}

        Add to Box

        
Count: 0

      

    {% endfor %}

  




  


    
Your Box (0 items)

    Add Box to Cart

  











{% schema %}
{
  "name": "Box Builder",
  "settings": [
    { "type": "text", "id": "title", "label": "Heading", "default": "Mix & Match Box" },
    { "type": "collection", "id": "collection", "label": "Select Collection" },
    { "type": "number", "id": "min_items", "label": "Minimum Items", "default": 3 },
    { "type": "number", "id": "max_items", "label": "Maximum Items", "default": 6 }
  ],
  "presets": [{ "name": "Box Builder" }]
}
{% endschema %}

3. Save the File: Click 'Save'.
4. Add Section to Your Page: Now, go back to your Theme Customizer (Online Store > Themes > Customize). On any page (like a custom page or your homepage), click 'Add section' and search for 'Box Builder'.
5. Configure the Section: Once added, you can select the collection of products you want to include in your box builder and set the minimum and maximum number of items directly within the theme customizer settings.

This method gives you a lot of flexibility and can be a great way to implement a custom solution without ongoing app costs, though it does require a comfort level with code or a developer's help.

An Alternative: Fixed-Price Bundles

While not exactly what @veluxe1 was asking for, @Shadab_dev offered an interesting alternative for "bundled discounted collections" that allows customers to mix and match products from different collections within a fixed-price bundle. This is a bit different from a dynamic box builder where the price might adjust based on items, but it's a valid strategy for specific promotions. Shadab even provided a demo site (shadabs-online-store.myshopify.com, password: reafur) to showcase this. This approach is great if you're looking to offer a set number of items at a single, attractive price point, and it can also be configured from the customizer to choose how many products to include.

Which Path is Right for You?

So, you've got a couple of solid options here, each with its own advantages.

If you prioritize ease of use, quick setup, and don't mind a monthly subscription, an app like Easify Box Bundle Builder BYOB is probably your best bet. It handles all the complex logic, validation, and UI for you, freeing you up to focus on your products. It directly addresses the minimum and maximum quantity conditions @veluxe1 was looking for, and it's designed to be intuitive.

On the other hand, if you or your team are comfortable with code, or if you have very specific design and functionality requirements that an off-the-shelf app can't meet, @topnewyork's custom Liquid section provides a powerful, free-to-implement solution. It gives you full control and avoids recurring app fees, though you'll be responsible for any future maintenance or updates. It also directly handles the min/max conditions and allows for multiple instances on a page (as it's a section).

And don't forget @Shadab_dev's example if a fixed-price, multi-product bundle fits your marketing strategy.

Ultimately, the choice comes down to your budget, technical resources, and how much customization you need. Both the app and the code solution offer excellent ways to create that engaging mix-and-match experience your customers will love. It's great to see the Shopify community coming together with such diverse and helpful solutions!