Product Image 360°
Product Image 360°
Welcome to the “Panorama 360° Gallery” documentation.
Looking to integrate a product image 360° into your website? Our block enables you to showcase your products in a dynamic and engaging way.
In this guide, we'll show you how to use the editor to customize your product image 360° block.
Step 1: Open the Editor
2. Click on "Edit" after choosing your template.
class="" alt="">Step 2: customize the content
1.Start by reviewing this guide to understand how to upload your product's 360° images.
class="flex justify-center items-start h-auto w-80" alt="">2. Following that, you can effortlessly add, remove, or rearrange your images as needed.
class="flex justify-center items-start h-auto w-96" alt="">3. For each image, follow the steps outlined in the guide to upload pictures and select a sample for both X and Y rotations, specifying the number of pictures for each.e.
You also have the option to choose a cover image, add descriptive text, and include hotspots.
class="flex justify-center items-start h-auto w-auto" alt="">4. Customize each hotspot by adding a title and link, specifying whether it opens in a new tab, and adjusting its position in every image.
class="flex justify-center items-start h-auto w-80" alt="">Step 3: Adjust the image 360°
1. In this panel, you'll fine-tune all the settings for your 360° images. Start by activating autoplay, specifying the speed, and defining its behavior.
You can choose to play it once and even reverse the images.
class="flex justify-center items-start h-auto w-96" alt="">2. Here, you have the option to enable or disable the drag mode, specify its speed, and decide whether the drag should be reversible.
class="flex justify-center items-start h-auto w-80" alt="">3. When it comes to content, you can toggle the fullscreen and magnifier options, as well as the visibility of the bottom circle and the 360 logo.
Additionally, you can activate keyboard controls and disable the loop.
class="flex justify-center items-start h-auto w-80" alt="">Step 4: Configure settings
Here, you'll handle the settings:
1. Start by the view section where you can decide whether to display the header or not. You can also select the width and the container height of your product's 360° images.
class="flex justify-center items-start h-auto w-96" alt="">2. For the small images, you can customize their position and the gap between them. You can also adjust their width and height, select their roundness, modify the border, apply an overlay, and choose the text size for captions.
class="flex justify-center items-start h-auto w-auto" alt="">Step 5: Choose Colors
Within this panel, you can select colors that match your website's design.
class="flex justify-center items-start h-auto w-96" alt="">Step 6: Preview
Lastly, you can click on “Preview” to see how your product image 360° block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">