Case Study | Crooks & Castles

Development of a Bundle Builder with Enhanced User Experience

The project involved the development of a bundle builder that offered a modern and intuitive user experience. The objective was to create a user-friendly interface with horizontal tabs or steps, allowing users to easily navigate between different bundle customization options. The bundle builder needed to support various bundle configurations with different numbers of steps and product options within each step. Metafields were utilized to establish the relationships between collections, products, and bundle specifications, enabling seamless customization and creation of tailored bundles. Overall, the project aimed to deliver a flexible and efficient bundle building solution for users.

the process

The Scope

The objective of the project was to create a bundle builder that offers a modern and user-friendly interface, utilizing horizontal tabs or steps. The main challenge was to allow users to seamlessly navigate between steps by clicking on the tabs, while also being able to view and select product options within each step.

Another crucial requirement was the ability to accommodate different bundle options with varying numbers of steps and selectable options within each step. Each bundle would have unique specifications, such as a specific number of steps and the quantity of products that could be chosen within each step.

To address the issue at hand, we devised a solution that involved the implementation of metafields for both Collections and Products. By leveraging metafields, we could establish proper links between products associated with specific steps, enabling us to create distinct bundles with varying step configurations and product options.

The implementation

1. Designing the Bundle Builder Interface:

  • Create a visually appealing bundle builder interface with horizontal tabs/steps.
  • Ensure clear visibility of product options within each step.

2. Dynamic Step Configuration:

  • Use metafields to define bundles with varying numbers of steps.
  • Display the appropriate number of tabs based on the defined step structure.

3. Product Selection and Quantity Customization:

  • Allow users to choose and customize the quantity of products within each step.
  • Set limits for minimum and maximum product quantities using metafields.

4. Seamless Bundle Creation:

  • Capture and store user selections in a cohesive bundle structure.
  • Use metafields to organize and store chosen products within each step.
the result

Why wait? Have a project in mind? Contact us today and let's get you where you want to go!

Ready to start your next project?

Your brand deserves the best Shopify Experts. You've found them.

Have a project in mind? Contact us today and let's get you where you want to go!

Get a free quote