Step-by-Step Guide: Adding 360-Degree Product Viewers in Draftly

Adding 360-degree product viewers to your website is a game-changer for e-commerce stores, allowing customers to see every angle of your product and make informed decisions. In this guide, we’ll walk you through how to implement this feature seamlessly using Draftly.

Why 360-Degree Product Viewers Matter

360-degree product viewers have been shown to increase conversion rates by up to 25% and reduce return rates by as much as 40%. They offer immersive product visualization, helping customers feel confident about their purchase.


• Enhance product trust by showing every angle
• Reduce uncertainty, which drives higher conversions
• Improve user engagement and dwell time on your site

Steps to Add 360-Degree Product Viewers in Draftly

Follow these steps to integrate 360-degree product viewers into your Draftly site without touching a single line of code.

Step 1: Prepare Your Product Images

To create a 360-degree viewer, you’ll need a series of high-quality images taken from multiple angles. A typical setup requires 24–36 images for smooth rotation.

• Use a turntable to photograph your product at equal intervals.
• Ensure consistent lighting and a neutral background.
• Compress your images using tools like TinyPNG to optimize loading speed.

Step 2: Upload Images to Draftly

Draftly makes it simple to upload and organize your media files:

• Navigate to the Media Library in your Draftly dashboard.
• Create a folder for your product images to keep things organized.
• Upload the images in sequence, ensuring they are properly labeled.

Step 3: Add the 360-Degree Viewer Block

Draftly’s Section Library includes a customizable block specifically for 360-degree product viewers.

• Go to the Section Library and search for the “360 Viewer” block.
• Drag the block onto your desired page section.
• Configure the settings to match your product dimensions and rotation speed.

Step 4: Optimize for Mobile and Speed

With more than 80% of users shopping via mobile, ensuring your viewer works flawlessly across devices is critical.

• Test the viewer on mobile using Draftly’s preview mode.
• Enable lazy loading for images to improve PageSpeed scores.
• Compress images to WebP format for faster loading times.

Best Practices for 360-Degree Product Viewers

Design Tips

• Keep it simple: Avoid clutter around the viewer to focus attention on the product.
• Add a zoom feature: Let users explore finer details.

SEO Integration

• Include descriptive alt text for each image.
• Use schema markup for product pages to boost visibility.