This tutorial will show you how to work with “TM 360 View” module in Prestashop 1.6.x templates.
The module displays images in a 3D view and allows website visitors to rotate them in 360 degrees. The rotation can start automatically on page load, or the visitor can rotate the ‘image’ manually with the mouse. Moreover, the module can be used for adding panorama view (or several panorama views) to the homepage. 360 view mode is also available on a product page.
First step is module installation. Navigate to Modules and Settings -> Modules and Settings (1) in your admin panel and find the TM 360 view module (2). Then click the ‘Install’ button (3).
After the module has been successfully installed you’ll see the ‘Configure’ page with the default module settings. You can find here settings for 360 view and for panorama view. The settings are described below the screenshot. Choose them according to your needs and click the ‘Save’ button (1).
Enable on Home – option to show the 360 view of the product on Homepage.
Select a product (appears if ‘Enable on Home’ is set to ‘Yes’) – choose a product which should be displayed in 360 view.
Animate – option to display the product automatically rotating on page load.
Frame time (appears if ‘Animate’ is set to ‘Yes’) – time period before one image in the set will be changed to another; should be entered in milliseconds.
Now in order to configure product 360 degrees view, you need to upload images. Navigate to Catalog -> Products in your admin panel, choose the product and click the ‘Edit’ button. Open the ‘TM 360 view’ tab in product settings and click ‘Add files’ button. Hit the ‘Upload images’ and then save the changes.
To make the rotation smooth, add more images and make a very slight change in position while making photos. After you’ve added image pictures, the product 360 view will be shown on the Homepage. It will also appear on the product page after the description*.
*Make sure TM 360 view module is added to hooks at Modules > Positions or to both home and product pages layout if you are utilizing ‘TM Mega layout’ module.
To disable 360 view on the Homepage, simply go to 360 view settings and switch the ‘Enable on Home’ option to ‘No’. To disable 360 view on the product page, open the ‘TM 360 view’ tab in product settings and remove all images.
This module can be also used for adding panorama view to the homepage. You can add as many panorama blocks as you need.
To add new panorama open the module configuration page and click ‘+’ (‘Add new item’) button.
You’ll see the panorama settings which are described below.
Select a file – choose a panorama image; this field is required (at least for the default language).
Title – enter a title for the panorama; this field is required (at least for the default language).
Width – panorama block width; this field is required.
Height – panorama block height; this field is required.
Status – enable/disable panorama item on Homepage.
Loop – start rotating the image from the beginning after it’s end.
Animate – option to display the panorama automatically rotating on page load.
Frame time (appears if ‘Animate’ is set to ‘Yes’) – time period during which the panorama image makes a full circle; should be entered in milliseconds; this field is required.
After you save the changes, the panorama view should appear on your homepage.
That’s it. Now you know how to work with “TM 360 View” module in Prestashop 1.6.x templates.
Feel free to check the detailed video tutorial below:
Also, look through the collection of other PrestaShop Themes.