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 very important to understand what the Placeholder field is. Our module uses this value (an html id or class) to identify a spot on your product page where to place the embedded 360 product view or a popup thumbnail. There's a default value (e.g #image-block or .product-cover) that is pre-configured to work with the default PrestaShop theme but you may need to change it according to your theme to make sure the module can find its placeholder on the product pages.

3Set viewer dimensions and skin

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 a 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.

5Publish 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.

6Load 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.