Revolutionising the Supplement Buying Experience

Introduction: Transforming the Supplement Purchasing Journey

In the dynamic world of health and wellness, the demand for convenient and personalised shopping experiences has never been more pronounced. As a leading Shopify brand specialising in electrolyte drink supplements, our client recognised the need to elevate their customers' purchasing journey. The goal was clear: increase average order values and conversions, particularly for their new customer acquisition offers. This case study delves into the innovative project we undertook to develop a custom bundle builder, leveraging the power of the Replo page builder and our expertise in custom HTML, CSS, and JavaScript. By creating a solution tailored to their unique needs, we aimed not only to enhance user experience but also to drive sales growth.

The Challenge: Enhancing Customer Experience and Driving Sales

The client's existing Shopify store presented a straightforward product display and purchasing process, but they aspired to create a more engaging and personalized experience for their customers. The primary objectives were to:

Streamline the Buying Process: Simplify the customer's journey from product discovery to checkout, reducing friction and enhancing overall satisfaction.

Encourage Personalised Purchases: Enable customers to curate their own supplement bundles, catering to their unique preferences and needs while promoting higher sales through tiered discounts.

Elevate Brand Identity: Ensure the custom bundle builder seamlessly integrated with the brand's visual identity and messaging, strengthening their online presence.

The Solution: Designing a Dual-Page Bundle Builder

To address the client's goals, we embarked on a collaborative journey, leveraging the versatility of the Replo page builder and our expertise in custom web development. The bundle builder was structured across two distinct pages to facilitate an intuitive user experience.

Step 1: Page One - Selecting Tub Quantity with Dynamic Discounts

The first page of the bundle builder focused on allowing users to select the quantity of tubs they wanted to purchase. We implemented a custom buy box, which displayed tiered discounts based on the quantity selected. This strategy aimed to encourage customers to purchase more by clearly showing savings on larger quantities.

Custom Buy Box Implementation

We created a visually appealing and user-friendly custom buy box using HTML and CSS, ensuring it aligned with the brand’s aesthetic. This buy box not only displayed the available tub sizes but also included dynamic elements that updated in real time as users adjusted their selections.

JavaScript Setup for Quantity Selection

Using JavaScript, we developed functionality that updated discount information dynamically as users changed quantities. For instance, if a user selected three tubs, the discount percentage would adjust accordingly, providing immediate feedback that incentivised larger purchases.

Upon finalising their tub quantity, this selection was seamlessly passed to the next page using JavaScript, ensuring continuity in the user experience. This transition was crucial in maintaining engagement and reducing drop-off rates during the purchasing process.

Step 2: Page Two - Customising Flavours with Dynamic Placeholders

The second page of the bundle builder allowed users to select their desired flavours for the specified quantity of tubs they had chosen on the first page. This stage was designed to enhance customer satisfaction by offering personalised options while utilising dynamic code to create a seamless interaction.

Dynamic Code Integration

On this page, we implemented dynamic code that fetched the previously selected tub quantity and integrated it into text placeholders and call-to-action (CTA) buttons. For example, if a user selected three tubs, the text would reflect this by stating, "Choose your flavours for 3 tubs!" This personalisation made customers feel more connected to their choices and reinforced their purchasing intentions.

Flavour Combination Mapping

To facilitate flavour selection, we created a system where different flavour combinations could be mapped to specific bundle variants set up within Shopify. This was achieved by leveraging JavaScript functions that checked user selections against predefined combinations in the backend. When customers clicked on their preferred flavours, it would automatically associate those choices with their selected tub quantity.

Step 3: Mobile Responsiveness

To ensure an optimal user experience across all devices, the custom bundle builder was meticulously designed with mobile responsiveness in mind. Screenshots of the mobile interface illustrate how the layout adapts seamlessly to smaller screens, maintaining clarity and usability.

The intuitive navigation allows users to easily select tub quantities and flavours without any compromise on functionality or visual appeal. Key elements, such as the dynamic discount information and flavour selection options, are presented in a streamlined manner that enhances engagement and encourages conversions.

This focus on mobile responsiveness not only caters to the growing number of customers shopping on their smartphones but also reinforces the brand's commitment to providing a user-friendly experience for all visitors.

Step 4: Integrating Shopify Automatic Discounts

To further enhance the purchasing experience, we took advantage of Shopify's automatic discount feature. This allowed us to implement a new customer discount code which would be applied at checkout without requiring any additional input from the user.

Streamlined Checkout Experience

As users progressed from selecting their flavours back to checkout, they would see their applied discounts reflected immediately. This transparency not only increased trust but also encouraged users to complete their purchases confidently.

The integration of automatic discounts ensured that new customers felt they were receiving value from their first purchase. By creating this sense of reward right from the start, we aimed to cultivate long-term loyalty and drive repeat business.

Conclusion: Redefining the Supplement Buying Experience

The custom bundle builder project has been a resounding success, demonstrating how thoughtful web development can transform the supplement purchasing journey. By prioritising user experience through a unique dual-page approach, leveraging Replo for responsive design, and incorporating custom functionality with HTML, CSS, and JavaScript, we have helped our client establish a competitive edge in the health and wellness market.