Bundles app for NewAge Products

The client has a range of main products that can be enhanced with other smaller ones. For example, this cabinet set works well on its own, but can be made more functional when some display lights, additional racks, or accessory kits are added.

These additional products can be purchased from the store separately as well, but when bundled with the main product, all of them get a discount. The main goal here was to motivate customers to buy more products, which would be a win-win for everyone — the company would get an increased average order value, and the customer would enjoy better functionality of the main product for a much lower final price.

There were no ready-made solutions on the market that could be customized to fit the needs of 
the client in this case, but one of the in-house apps we had developed earlier was also dealing with discounts on bundled products. Although our app didn’t match the requirements of this project, we were already experienced on the topic and could apply some of the app’s logic while developing a new custom solution.

Good communication lies at the core of the project’s success because it guarantees that the client gets exactly what they need in the end, so our first task was to find out how exactly everything had to work together and create the detailed architecture of the app based on the client’s feedback.

It had to be a separate block that would be created in the store’s theme, with the products assigned to it. First, the admin chooses the main product and then adds the additional products to it from the store’s admin panel, forming a so-called bundle. Then a discount is applied to each smaller product individually, and a total discount for the bundle is calculated. Customers can add additional products to the cart without leaving the main product’s page, and also add installation to the order as a separate service. At each stage, customers see the final price and the dynamically changing discount, so it’s always clear how much is saved when buying products together. And finally, there’s the checkout button, which leads the user to the shopping cart page, where they confirm the order and enter payment information.

The amount of additional products is unlimited, and the page is adaptable to both desktop and mobile, with the design changing depending on the device which the customer is using.

Sounds easy, but there’s complex functionality hidden under the hood behind each element.
Let’s look into some of it.

As the storage items are professionally designed and may be hard to assemble without specialized skills, it’s also possible to add installation as a service to your cart. Its price depends on where the customer is located. To do this, we developed functionality that ties location to a postal code, which the customer types in the specific field.

After the postal code is entered, it’s redirected to a database that contains all possible postal codes for the area where the business operates. Then the algorithm checks whether the installation services are available for that area through a simple «yes/no» mark. If the postal code is marked as a «no», or there is no such code in the database, it shows the customer a message that the installation service is unavailable. If it is available, the algorithm gets the price for the service assigned for the area and shows it to the customer. It can then be added to the order, and the final price will be calculated with the installation services added.

We also made it possible to disable or hide this element if needed through the theme customizer, and then put it back at any time.

There are two ways to set up a discount, by percent or a fixed amount. The admin can set up any discount for additional products in a certain bundle. For products in different bundles the discounts can be different as well, which makes the whole process very flexible and suitable for any business needs.

When the discount is set, our app calculates the final cost and the final percent discount, which is indicated at the top of the page as «add to set and save…%». Both the price and the discount dynamically change, depending on the products that the customer adds or removes to/from the cart.

Also, it’s possible to buy a discounted product from the bundle only if the main product has already been added to the cart. If the customer clicks on «Add to your set» before adding the main product to the cart, they will be redirected to the top of the page with a reminder to put the main product in the cart first.

Customers can quickly add additional products to the cart, and if they change their mind, remove or change them just as quickly, always seeing the final price. There are no page reloads, so the whole process is smooth and creates a great customer experience.

The total cost is also calculated by our app, and is done right on the product page. This is quite unique for a Shopify store (usually the final order price is calculated at checkout), but we developed this functionality so that customers could see at any given moment the total price and the discount they receive. The final cost includes the price of the main product, the price of the additional products added with a specific discount assigned to them, and the price for any installation services.

The only additional cost that is added during checkout is sales tax, but this is how the platform works and it’s impossible to avoid.