Team
Senior Full Stack Developer, Mid-Level Full Stack Developer, Junior Full Stack Developer, Team Lead, Project Manager, Account Manager
Technologies
ReactJs, HTML5, SCSS, JS, Polaris, PHP, MySQL, Laravel
Time
9 weeks
The task
Develop an app that allows adding side products to the main order and saving on the whole set to motivate customers to buy in bundles and help our client increase the average order value.
NewAge Products is a leading manufacturer and distributor of high-quality organizer solutions for both garage and in-house storage. The company was founded in Canada back in 2008 and now operates throughout Canada and the USA. In addition to purchasing the goods, it’s also possible to order installation services from licensed professionals and get online technical support as well.
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.
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.
How you can benefit
Each business is unique and sometimes the only way to get the required functionality is to create your own. Check our
Custom theme development page to learn more about why and when it’s better to opt for it.
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.
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.
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.
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.
How you can benefit
Apps help to get any feature that can’t be done out-of-the-box on Shopify. We build our own in-house apps, and we know the best way to build yours. Check out our App development page and make your business easier!
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.
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.
In the end, our client received the functionality that worked exactly as needed, and we’re happy to share the results of our work:
“Their responsiveness is what stood out the most. They also had a strong interest in the success of the company and it was evident during all project planning stages and strategy. We have seen direct growth in B2C sales after all project implementations.”
Digital Manager, NewAge Products
For more details, the full review is available on our Clutch profile.
This website uses cookies.