How to create this page?

I would like to create this page where you select a box size (the pricing is fixed to box). Choosing a size just increases the quantity of chocolates that can be selected (for example, if a user chooses 250grms, then he can select 6 chocolates. If 500grms, then he can select 10 chocolates). The summary is shown on the right.
Shopify, Apps or custom. Any solution is appreciated.
Please help me out. Thank you.

Hey @mgx14

It’s not particularly difficult to build. it mainly depends on how you want to approach the implementation. While there are several apps available on the Shopify App Store that can help create bundles, I generally do not recommend relying on third-party apps for this. They can add unnecessary dependencies, affect performance, and limit flexibility over time.

A custom-built solution is a better long-term approach. Although it requires more development time, it offers greater control, cleaner integration with your theme, and better scalability, making it a worthwhile investment. It totally depends on you how you want to achieve this.

Cheers,
Moeed

Hey @mgx14,

This functionality requires a custom product builder. Shopify’s default product pages do not offer this level of interactive selection and quantity management with conditional logic.

You will need a third-party app or custom development.

Apps that can help with this “build your own box” functionality:

  • Bundle Builder: Allows customers to create custom product bundles with flexible rules.
  • Bold Product Builder: Enables creation of complex product bundles and custom products.
  • Custom Product Builder: Offers a flexible product customizer with conditional logic.
  • Build a Box: Specifically designed for creating custom gift boxes or product bundles.

Best,
Daniel Smith

Hi @mgx14 :waving_hand: I’m @PaulNewton shopify-partner with a range of merchant solutions.

This can be done either with app, or with advanced theme customizations.
Terms your looking for are mix and match, product/box builder, kit maker,etc.
Search forums first(it’s a rule) now that you have a better idea of what to search for.

For apps find and pay for a mix-n-match app , search the app store.
Typically such apps are a bundle system nowadays.

Or build a custom order form (~quick order form) and use the newer cart-nesting feature to keep everything visually-related, and or metaobjects to organize things without needing to pay for monthly apps.
There’s some over under on whether the choices in the “main” product should also themselves be products or just line-item-properties. Generally need to be real products if skus/custom-prices/inventory is involved for each thing.

To DIY by burning your time you can hypothetically generate such blocks with sidekick
https://help.shopify.com/en/manual/online-store/themes/customizing-themes/theme-editor/shopify-magic/generate-blocks

For development edification see the defunct order form advanced customization posthttps://web.archive.org/web/20230602223229/https://community.shopify.com/c/shopify-design/forms-add-an-order-form-to-your-store/td-p/613671
Or see bulk ordering behavior in themes like Dawn or horizon based themes.

If it’s all too much to connect with me to build it CLICK my profile-pic on the forums, or visit my profile
ALWAYS include context in new communications, e.g. reference urls, posts urls, etc

Hey,

The page you’re describing requires custom product options and conditional logic that isn’t available natively in Shopify.

You will need an app to achieve this functionality. Here are some options:

Best,
Daniel Smith

Hi,

Hope this will help

  • App solution (Recommended), Use app like BYOB (Build Your Own Bundle) or BoxBuilder. These apps allow you to set specific quantity limits (6 vs 10) based on the box size selected and handle inventory automatically.

  • If you don’t want a full “bundle” app, you can use a Product options app like HulkApps or Infinite

  • You would create a custom page template in your theme. Using JS, you’d create a counter that tracks the “slots” filled.

Here You’d set a variable (e.g., max_chocolates). When the user clicks 250g, max_chocolates = 6. As they click “Add” on a flavor, a counter increases. Once the counter hits 6 you disable the “Add” buttons.

To make this work with Shopify’s checkout developer would usually use the Ajax Cart API to bundle these items as “Line Item Properties” so they show up as notes under the main box product in your orders.

Hi @mgx14 :raising_hands:

If you’re looking to create a page where customers choose a box size first, then select a specific number of cookies based on that box size while paying a fixed price for the box, you may want to take a look at Easify Box Bundle Builder BYOB. :blush:

To help you visualize it better, I’ve created a similar demo:

  • This is the result:

  • This is the app setup:

With Easify, you can use the Predefined Box Sizes box type and create options such as a 250g Box or 500g Box. Each box size can have its own fixed price and product capacity. For example, a 250g box can be priced at $15 and contain 6 cookies, while a 500g box can be priced at $24 and contain 10 cookies.

To configure this, simply go to the Discount & Subscription tab and open Box Size Options. There, you can create different box sizes, define how many products each box can contain, set the corresponding fixed price, and even display custom badges or labels if needed.

Customers start by selecting their preferred box size in the first step. They are then guided to the cookie selection step, where they can choose their favorite flavors. The app automatically tracks their progress and displays messages such as “You’ve chosen: 4/6” or “You’ve chosen: 8/10”, making it easy for customers to see how many more cookies they need to complete their box.

As cookies are added, the selected items automatically appear in the box summary section below, along with their quantities. This gives customers a clear overview of everything they’ve chosen before adding the box to their cart.

If your goal is to offer a Build Your Own Cookie Box where customers choose a box size first, fill it with a specific number of cookies, and see a live summary of their selections, then Easify Box Bundle Builder (BYOB) could be a great fit. :heart: