PrestaShop

1Upload and install

Expand Modules & Services in your PrestaShop admin and select Upload Module in the top-right corner of the page. Drag the module zip onto the upload popup or select it from your hard-drive as per the instructions. Once the module is uploaded and installed by PrestaShop, open the Installed modules tab and verify that it's listed there as WebRotate 360 and the module version is correct.

2Configure placeholder

Select Configure in the module tab in admin to access the module defaults. Review field descriptions for a quick overview of the available options.

It's important to understand what the Placeholder field is. Our module uses this field (which is an html id or class) to identify a placement on product pages in Prestashop where to embed a 360 product view or a popup thumbnail.

The default value (e.g #image-block or .product-cover) is already configured to work with the default PrestaShop theme and its default product gallery specifically. You may need to change the placeholder according to your theme design, if it doesn't work for you out-of-the-box in the product gallery, or if you don't want to integrate the viewer inside the gallery. For example, you may configure the placeholder to embed the viewer in the product description section, etc.

3Set viewer dimensions and skin

Skip this step if you are using the default integration with the product gallery as discussed under bullet #2, i.e, when using the default value under Placeholder and "no" under "In Popup".

Use Width, Height and optionally Base Width and Minimum Height settings to define the best dimensions and responsive rules for your PrestaShop theme.

Most themes can use 100% for the width and you can keep the base width either empty (which makes the viewer height not responsive) or set it to the width of the viewer in its fully expanded 'desktop' layout making the viewer height responsive and proportional to the current width of the viewer. Configure the minimum height to ensure your 360 product views look good on mobile phones, i.e the views are not too small.

Note that the popup mode requires pixel dimensions for both width and height and it doesn't respect the minimum height setting as the popup automatically adjusts its dimensions to fit into smaller layouts.

4Test using packaged example

Navigate to Catalog->Products and select an existing product that you would like to test using a sample 360 product view of a sneaker that we packaged with the module. Expand WebRotate 360 under modules and enter the URL of the sample config (.xml) under Config File URL as described in the section notes above the field. For example, in PrestaShop 1.7 the location of the sample config file is /modules/webrotate360/360assets/sampleshoe/sampleshoe.xml.

5Product combinations

When using with product combinations, it's possible to assign a different 360 product view to each combination. Simply enter the URL of the viewer config xml for the corresponding combination under Caption for the first image of the combination under Basic Settings:

Please note that you still have to make sure a default viewer config URL is entered under Modules as per #4.

6Publish and upload your own product views

Download our desktop software and publish a 360 product view using your own product images or use our sample images that are linked under additional resources. FTP upload is available in the software or you may upload the published assets to your server manually (via FileZilla, etc). Consider using our optimized PixRiot service to host and manage your spins online for unmatched convenience. You only need to upload a single folder located under published/360_assets of your published SpotEditor project for each product view. You may also publish multiple 360 product views into a single 'published' location and upload all product views at once.

Once uploaded, note the URL of the configuration file (.xml) in the uploaded folder and then enter a relative URL of the configuration file on your server in Config File URL as described in Step 4 above.

7Load images from CDN or use master config (PRO)

You can specify an alternative location of the 360° or 3D product images for each product using the Root Path field located under Config File URL (see the previous screenshot). The root path value is a URL that points to a folder with the "images" folder (e.g http://mycdn.com/360_assets/product1/). When it's configured, the module adds the relative image path from the viewer configuration xml to this root URL to create a combined image location. This is valuable when you need to host the image assets on a dedicated file server or CDN.

The same feature can be also used to load multiple product views via a single "master" config xml (URL) which is configurable under the module settings as Master Config URL, assuming the number of images and their file names are the same across selected product views. If Master Config URL is set in the module admin, you don't need to specify Config File URL in the Catalog for those products that share the same "master" config , i.e you would only use Root Path, pointing to the "images" folder on your server or CDN.