The “360 Product Viewer Widget” allows you to present every angle of your product through its dynamic 360-degree view, which cannot be conveyed using a static image. You also have the ability to magnify specific attributes or elements, spin the item, and draw attention to its distinctive characteristics using the hotspots feature.
You provide an array of images showcasing your product from different perspectives. The widget then smoothly blends these sequences to produce an interactive 360° product view. Users can easily engage with your product, rotate it, and examine every detail, offering an immersive experience that enhances the visual appeal of your website. Say goodbye to stagnant images and embrace the future of product presentation with our user-friendly Elementor widget.
Let’s look at each of the options in the “360 Product Viewer Widget” below.
Install 360 Product Viewer Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “360 Product Viewer”
- Hover over the widget in the search results and click install
- Add your “360 Product Viewer” widget to any Elementor Page
General Settings #
Folder URL
Paste the URL of folder where the sequence images are stored.
File Name
If filenames are product_0001.jpg, product_0002.jpg, product_0003.jpg then enter "product_ "
File Index Base Zero
If filenames are product_0001.jpg, product_0002.jpg, product_0003.jpg then put file index base zero value to 4.
File Format
Select the file format you stored earlier.
- JPEG
- JPG
- PNG
- WEBP
Image Count
Set the image count.
Drag Speed
Set the drag speed.
Drag Reverse
Turn on or off the drag reverse option.
Stop on Edge
Turn on to stop the viewer on edge.
Enable Full Screen
Enable or disable the fullscreen option.
Disable Drag
Disable the drag option.
Lazyload
When turned on, widget will only load if user scroll to it.
Control Reverse
Turn on or off the control reverse option.
Layout Settings #
Show Arrow Keys
Show arrow keys to rotate and view product.
Show Bottom Circle
Show/Hide the bottom circle.
Show Loading Progress Bar
Show loading progress bar of viewer.
Enable Zoom
Enable/disable zoom on viewer.
Zoom
Set the zoom level on viewer.
Autoplay Settings #
Autoplay
Turn on or off the autoplay option.
Autoplay Reverse
Turn on to autoplay the viewer in reverse direction.
Autoplay Speed
Set the autoplay speed in milliseconds.
Play Once
Viewer will only play once.
Hotspot Settings #
Enable Hotspots
Enable/disable hotspots on image.
Hotspots Debug Data
Enable debug data for initial image dimension width and height.
Initial Dimension Width
Set the initial width for hotspot.
Initial Dimension Height
Set the initial height for hotspot.
Hotspots #
Hotspot Type
Select the type of hotspot.
- Link
- Popup
Title
Type title for hotspot.
Link
Type or paste your URL to link with hotspot.
Hotspot Position Data
Type the hotspot position data where imageIndex used for Frame or Image number, xCoord for horizontal positioning, and yCoord for vertical positioning.
360 Product Viewer Widget Styling #
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Bottom Styling #
In this section, set the positioning of bottom circle.
Hotspots Icon Styling #
You can set the hotspot icon background, size, color, border color, background color, background border, and background border color.
Hotspots Popup Styling #
Set the background color, border, box shadow, padding, title typography, color, text shadow of hotspots popup.
Usage Examples #
Here are some live use cases for the 360 Product Viewer Widget.
