Kit Builder

Online shopping could be challenging and customers could get lost between too many options and combinations to remember, often these customers would open multiple tabs to keep track of products they are interested in to be able to find the best match. This practice is pretty common in many segments, clothes, and accessories included.

An issue that come with this practice is that this increases friction in the user experience, and might end up frustrating the customer. The industry came up with a couple of solutions offering kits, bundles, adding the options to shop the look, etc. Many of these solutions brought positive results, but in some cases, customers were still missing the experience of seeing multiple options on the same page and build their own options.

To present all the combinations of multiple products can be virtually impossible. As an example, if we want to show all possible combinations between 5 different t-shirts and 4 shorts, we need to show 20 options, add 3 options of hats, and you now have 60 combinations to show. This can scale pretty quickly when you realize that each t-shirt also has a variation of colors (the same goes for the hats and shorts) and the customer would probably not get to see all the options before they get bored.

But there is a solution for that and the solution is to let the customers have control over what they want to see together but individually. Confused? Let me explain. Instead of going over the 60+ options we mentioned before, the customer has the chance to find one product that they like more either the hat, the t-shirt, or the shorts, and then change only one of the other products to see how they look together, then play around with colors as they will.

Our client, Stack Athletics found themselves with this challenge, they wanted to let the customer know a variety of combinations they had to offer for an exclusive price, and as a solution, we built the kit-builder, which is an interactive and easy way for the customer to mix and match multiple products and buy all of them in only one click.

Kit Builder – Theme Customize – Giving the ability to curate kits.

In this case, our client already had a theme installed in their store so to keep the implementation with as low an impact to the code and performance as possible we used some built-in functionalities from the theme to create the double carousel. Another important point to highlight is that by using functionalities already available in the theme, we speed up the implementation by not “reinventing the wheel”, this also provides a seamless experience to the user.

Although we used existing functions, we had to adapt them to the case, because instead of a simple carousel we had to manage to place a carousel inside another and allow the merchant to provide images that would be used only for the kit builder, whilst other images would be used on the dedicated PDP for the individual product.

An implementation like this can be challenging having to find the right functionality in the theme code because in some cases the javascript code is compiled and minified. Another challenge we faced was to complete the implementation in a way that was compatible with some third-party elements that affected the native functionality of the theme.

At Silver Ponies we are committed to looking at the projects as a product to are flexible and reusable, and at the same time unique for our clients. Kit Builder was created not only as a page but as a reusable template that requires no coding experience to be used on more than one page. The merchant can reuse the template whenever they want and add multiple items to the kit.

If you have an idea for an innovative implementation in your Shopify store contact us so we can make it happen.