Bundles app for NewAge Products — Case study

About the business

Initially, the client contacted us to customize one of our Shopify App Store’s applications, but this cooperation later turned into a long-term partnership. As the online store had quite a unique user experience that required complex solutions to make it work, we developed and integrated more than 15 custom apps into the theme. In this case study, we’ll focus on the Upsell Bundles app, the functionality that allows adding side products to the main order and saving money on the whole set.

Bundle your set and save

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.

The checkout process

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.

Product card

The title of an additional product is taken from the store’s admin panel, but product titles can be too long or not informative enough for a specific bundle. For this reason, we made it possible for the admin to set a new title if needed.

PRODUCT DESCRIPTION

Each card contains a detailed product description with all its images, as well as a link to a product video that is embedded with the help of the app. The popup also has the SKU number, and provides the possibility to choose the required number of items and add them to the bundle. This popup is implemented via the app and can be opened from the product card in two ways: by clicking on the «Learn more» link or the «+» icon under the product image. This was done to make it easier for customers to find a product description without leaving the page.

INTEGRATING A THIRD-PARTY APP

Reviews are an incredibly important part of any eCommerce store, because they strengthen a company’s credibility and gain customer trust. To show clients’ reviews and product ratings inside the custom block, we integrated a third-party app our client was using.

Installation services

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.

Getting a discount

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.

Calculating the cost

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.

Summary

Originally published at https://spur-i-t.com.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
SpurIT

A team of Shopify professionals, sharing the insights from a decade of Shopify hands-on experience.