Magento Imagine Awards 2019 Finalist

360 degree product spinner for magento

Any eCommerce owner should know the value of accurately including relevant product details on their site. But for site owners who are interested in going the extra mile, a level of interactivity on their site’s homepage can raise the bar and put them a cut above their competitors.

We were tasked with building such an experience for one of our clients; OX Tools. Interaction needed to be an important part of the process. What better way to advertise a hand held product than to virtually touch it; and outside of Flash, javascript was the best tool to achieve our aims of product interaction.

A 360 degree product spinner was our concept, and not only did we want users to be able to view the product from all angles but we also wanted inertia, iPad compatibility, and an interactive shelf which would move tools to different points.

To make our concept a reality, we decided upon jQuery UI’s vast array of easing methods; all of which can be demonstrated on this useful website:

So the first part was complete. We had employed a javascript library to move our tools around to their various shelf positions and zoom each of them to center stage for a close-up view. To make each of the products spin, our client began by photographing thirty five frames each, all set against a white background.

As with all projects, our first attempt didn’t go smoothly. All of the images sent over by our client had shadows – which would have been fine if we intended to keep the rear of the spinner white… however we needed each image to have sharp definition around the product for it go atop an on-brand background. OX Tools had to painstakingly remove all of the shadows and re-deliver them to us.

Once the images were all correct and shadowless we began integrating each image to create the illusion that a sequence of PNG images were actually in motion. To achieve this we turned to a javascript creation called Magic 360 from Magic Toolbox which allowed customers on desktop and mobile to view each product from every angle.

View OX Tools’ 360 degree product spinner here:

Subscribe via email

Sign up to get notifications of new posts by email.

Share this article

Posted in Content Management, Development, eCommerce, iWeb, Magento

Other posts you might like

Magento Imagine in one word? Wow. It never ceases to amaze and 2017 was certainly no different. Our MD Nick…

Gloverall are a UK manufacturer of traditional duffle coats. They have been creating high quality clothing in their factory since…

We all understand how important search is to the internet, imagine trying to find things if you can’t use search…

Call us on 01785 279920

Our friendly Magento experts are happy to answer your questions.

Follow us!

Get the latest eCommerce news, reviews and expert advice in your inbox.

To find out more about how we use your data, read our Privacy Policy