'Build Your Own Bundle' Feature with Discount 🔥

On Par, an emerging American golf attire brand stands out for its dedication to crafting high-quality, bold apparel that enhances the global golfing experience. Initially focused on creating exciting apparel for golfers of all levels, the brand's mission has evolved into 'Play with Purpose,' reflecting a commitment to comfortable golf wear with a philanthropic edge. Through monthly donations to various charities, On Par aims to make a positive impact on communities in need.

I created various functional modules for them along with recreating their entire website with their new branding:

1. A customizable Bundle Builder with automatic discounts applied to the combination of products selected. This gives the end user complete control over creating a customized set of products based on their taste and size preferences.

2. A quick-add feature for all the product cards added to the Homepage and Product Listing pages which displays all possible options for the product variants and lets the user choose the variant they like without having to redirect to the Product Description page. This reduces friction and drives up conversions.

3. AJAX-based swatch links to other similar products that reload the new product on the same page without having to redirect to the new product. This creates a very smooth customer experience on the page.

4. Custom filters based on the business requirements like dual price-range selector and colors/patterns filters.

I created an intuitive "Build Your Own Bundle" feature for them where the customer can choose their own set of products based on preferred sizes and patterns.

The Module is entirely created in Javascript and all the options are Customizable from the Theme's customizer:

The Structure goes as follows: ✅️ The Client can choose three categories of Products that they want to include in the bundle. In this case, they chose a Classic Polo, a Solid Polo, and a Cap.

✅️ Within each category, the Client can add all the products that they want to present as a part of the Bundle feature:

✅️ Based on the Selection of products, the swatches are displayed. The user can switch between the swatches in their desired size. A small visual of the selected product is also displayed inside the Product Category box along with the selected size, so it's easy for the customer to visualize the bundle as they build it.

✅️ Descriptive error states are also included to elaborate the required steps necessary before the bundle can be purchased.

AJAX-based product swatches that make use of Shopify's Section Rendering API to reload the contents of the new product on the same page instead of re-directing which makes for a smooth user experience.

I also created Custom Filtering options for them like a Dual-range price filter and swatch/color filter etc.

Let's Build an Awesome Website together!!!

(૭ ｡•̀ ᵕ •́｡ )૭