Custom Box Builder for xx Pieces without Third-Party Apps

Shopify Discussion
1

I would like to implement a feature that allows customers to create their own custom products box (16 pieces in total) directly on the product page without using any third-party apps. The goal is to let users freely choose the desired quantities for each of the 5 available kind of products while ensuring the total number of products selected does not exceed 16.

**Required Features:**1. Quantity Selection:

  • Each product/beer should have a field that allows customers to choose the desired quantity (e.g., with + and - buttons or a numerical input field).
  • The quantities should be dynamically adjustable on the product page in real-time.

  1. Real-Time Total Counter:

    • A visible counter should display the total number of products/beers selected.
    • The counter should update dynamically whenever the user modifies a quantity, without requiring a page reload.

  2. Limit Enforcement:

    • Once the total number of selected products/beers reaches the limit of 16, it should no longer be possible to add more (e.g., disable the + buttons or display a warning message).

  3. Dynamic Price Update:

    • The box price should automatically update based on the user’s selection, reflecting the cost of the selected products/beers (if each products/beer has a different price, the total should be calculated dynamically).

  4. Add to Cart Button:

    • The “Add to Cart” button should only be enabled once the user has configured the box correctly (exactly 16 pieces).
    • The selected quantities for each beer should be passed to the cart in a clear and structured way.

  1. Scope of Work:

    • Could the builder must not be developed within the existing Shopify theme using HTML, CSS, JavaScript, and Liquid?
    • I do not want to use third-party apps, so everything should be managed with Shopify’s native tools.

  2. User Experience:

    • The process should be seamless and user-friendly, without requiring page reloads.
    • It should be fully responsive and function smoothly on both desktop and mobile devices.

  3. Data to Save in Cart:

    • The selected quantities for each beer should be stored as custom product properties in the cart, ensuring they are visible during checkout.

**Questions for the Developer:**1. Is it possible to implement this functionality without using only Liquid, JavaScript, and CSS?

  1. Which theme files will need to be modified to integrate this feature?
  2. What is the estimated time required to develop this solution?

thanks in advance
Marco

2

Hi @Marco_cesari Really this is just done using a bundle app, or draft orders api.

This is possible without apps but having dynamic pricing will make it really complicated as a theme cannot mutate prices nor generate products so it the options swap premade products around based on chosen options.

Beyond that you need to ask singular specific scoped questions as full implementations of this many moving parts and excess are waaay beyond the scope of a forum post.

If you have a realistic budget and need paid consultation, or advanced theme customizations then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.