..."Make me a Front Door Kit builder"
If Simon says, you have to do it!!
Simon Ayers, director of SDS London, has a huge range of front door furniture (that you should definitely check out). The range includes Front Door Sets, where 3 single products are sold as one bundle. Bundles are standard way of selling sets / kits on Magento, but there's a lot to be desired.
From a visual side of things, there's not a lot to shout home about, and it's almost restrictive when it comes to this product type, in that the door kits are separated into specific finishes. For example, brass and chrome are 2 separate bundles.
Simon wondered if there was anything we could do to give these bundle products a face lift, and also create a more flexible way of selling these sets / kits.
Our idea
We took a step back and considered what would be an ideal scenario as a frontend user. To us, that would be having a door kit actually building in front of your eyes while you're selecting products on the frontend.
Having this kit build visually in front of you would give the user a real feel of how the products would look in situ; from the size of the products, to the colour and how they sit together.
Also, if we give the user the ability to select a finish, it would lift the restrictions of having to have separate bundles for separate finishes.
How we did it
We added specific "kit" images to each of the simple products and set them to "hidden from product page"
Then, due to the simplicity and speed of Hyvä, we were able to add a little bit of Javascript which looks for the simple's kit image. Then, once the selection of the simple was made (using core Magento bundle functionality), we were able to show the kit image, and overlay it on top of the main image as a png.
Although it took a while to figure out the solution, it turns out that the build was simple.
Just like any good design, simplicity wins, and thanks to Hyvä themes, we were able to implement this feature very quickly.
SDS Front Door Kit Builder - Why not have a go for yourself and see it in action here