Having an HTML 360 product viewer is growing more and more popular. You can create interactive, 3D product images with 360-degree image rotation capabilities and a zooming function to provide a full 360 product view, display product customization and configuration options with enhanced 3D product photography, and more.
Every day, more people are discovering how many different uses 360-degree product viewers have. The possibilities are almost endless.
But image viewers like these are pretty advanced, leading to plenty of really great questions. People usually want to know things like:
-
What exactly is an HTML 360 product viewer?
-
Is that the only kind?
-
How does it work?
-
And most importantly, how do they help eCommerce retailers better serve their customers?
Let's start at the beginning.
What Is an HTML 360 Product Viewer?
A 360 product viewer is an app that opens in a web browser to display product images and other visuals. Instead of displaying normal, static 2D images one at a time, it uses software to put a number of images together in order to create a 3D model that you can spin for a complete, unobstructed and continuous 360 product view.
You can seamlessly embed it in HTML pages so it becomes part of your site without clashing with your brand and style. An HTML 360 product viewer can use good quality JPG, PNG, and SVG IMG files to easily create and display:
-
3D-rendered 2D photorealistic virtual images indistinguishable from traditional product photography. You can use them to create picture-perfect ads, product catalogs, thumbnails, and more.
-
Interactive 3D product models with product rotation on one axis or more so users can see different angles, even as they customize and configure their ideal product.
-
360-degree images with zoom, spin, and rotate functionality. You’ll also have the option to add "hotspots" or places on the product visuals with added interactivity like text or photos that display when users click or hover over them.
-
Short GIFs to show off new products and features. They’re perfect for sharing on social media.
-
360-degree product videos to show off your products in action. You can spotlight certain features and give potential customers a realistic idea of how they work.
-
Tutorials and explainer videos to help customers navigate the product in a more digestible way than your standard user manual.
-
Visuals with Augmented Reality (AR) capabilities using our AR API. Users can see products in their space before they buy to increase their confidence and chances of making a purchase.
Pro Tip:
Putting tutorial and explainer videos on your brand's YouTube channel can drive traffic, engagement, and interactions. It can also save your company money by reducing customer service calls. The benefits are endless!
How Does It Work?
An HTML 360 product viewer is basically used to create a very advanced, digital 3D flipbook stitched together by a computer program. When the images are displayed in order (and with some extremely complex programming), it looks like a spinning 3D model or video.
A number of images are created with special software. Then the 360 product viewer displays them in order as a 360-degree 3D image or video. It uses a Config.XML file containing the instructions for displaying the customizable elements, like what you want the image to look like and do.
That's pretty much the basics of how it works.
Click here to learn more about Threekit's HTML 360 Product Viewer or find out about our integrations and plugins for WooCommerce, BigCommerce, Magento, and Shopify. You can also find our app with free installation in places like the Shopify app store.
What Role Does HTML Play?
The role of HTML in actually running an HTML 360 product viewer varies depending on the type of viewer. However, HTML is always used to load the page and viewer. Then the viewer displays the visuals.
HTML is also used to code some customizable elements of the viewer like the size (if it's not full screen, you can specify dimensions), the appearance of the toolbar, the border, and some of the functionality of your hotspots as well.
HTML is used primarily to code site structure and define how information is displayed. For example, when you put an image on a site, the HTML code tells the site which image to display.
Then all the text has what are called div tags. The code uses the designated div class to determine what kind of text it is (e.g., paragraph, header, bullet point, etc.). Then your website styles the text using CSS.
Are 360 Product Viewers Built/Run in HTML?
Most HTML 360 product viewers actually use Adobe Flash or JavaScript, but some also use HTML or HTML5. If it's a Flash-based viewer and the visitor doesn't have Flash installed, it will automatically install the latest version.
The problem with Flash-only viewers is that iOS devices can't use them because they aren't compatible. Flash tools are also fading away. That's why many also allow JavaScript, HTML, HTML5, or some combination.
How eCommerce Retailers Benefit From This Structure
HTML code is very basic. If an HTML 360 product viewer used only HTML code, it would have less functionality and speed. However, using the HTML to code some of the viewer's surrounding elements allows you to customize the viewer's look to match existing style elements.
You can pick important functions and display elements like iframe color, size, zoom, and hotspot features mentioned earlier. Don't worry; there's a template (usually with the file name Index.HTML) to walk you through creating your Config.XML file.
HTML 360 Product Viewer Best Practices
Let's go over some HTML 360 product viewer best practices that help your product viewer function at its best:
-
Always make sure your site is mobile-friendly so that it displays correctly on mobile devices.
-
Use two sets of images: one high resolution, one low resolution. This allows the low-resolution images to load first and quickly so the user has something to look at right away. The high-resolution images then load in the background.
-
Format the size of the high-resolution images for the zoom percentage you have set.
-
Low-resolution images should start at medium quality to allow faster loading.
Be a Trendsetter
HTML 360 product viewers are growing more popular. However, a small enough number of eCommerce businesses have adopted them that having one can really set you apart.
If you embed a product viewer in your eCommerce site now, you'll have a huge edge over the competition. Given the huge spike in conversion rates and decline in returns they cause, it's an investment that really pays off!
Get in touch to learn more about how Threekit's product customization platform can help your business.
