OpenCart

1Download module and copy files

Expand the Download tab above to see the list of module downloads and pick the one that matches your OpenCart version. Unzip and copy all folders from the webrotate360 folder to the root of your OpenCart installation. This will not replace any existing OpenCart files unless you have a previous version of the WebRotate 360 module already installed.

2Apply vQmod

Copy supplied vQmod xml files (located in the root of the module zip archive) under your vqmod/xml folder.

NOTE: There are two vQmod files starting with version 1.5.x of this module:

• vqmod_webrotate360_header.xml (header vQmod) activates most of the features except for the integrated product gallery and should work with any OpenCart theme.
• vqmod_webrotate360_def_product.xml (def_product vQmod) is fine-tuned for the default OpenCart theme and specifically its product template (.tpl or .twig) implementation which is located under your theme folder. There's a chance that def_product vQmod will not work with your theme if product template is heavily customized. Please email us if this is the case as we can recommend a small change to your template to activate a full-featured integration.

3Activate module and configure

Login to your OpenCart Admin and navigate to Modules:

• Click Install next to the WebRotate 360 module.
• Click Edit to enable the module and review available options by following the text notes next to each field.
• To see a sample 360 product view supplied with this module, just enter the following url under Config File URL in the Products table next to your test product (remember to select Yes in the table as well): /360assets/sampleshoe/config.xml. Or use a full url including your domain name, e.g http://yoursite.com/360assets/sampleshoe/config.xml.

It's very important to understand what the Placeholder option 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 (#wr360embed) that is pre-configured to work with the default OpenCart template, assuming it's compatible with supplied def_product vQmod as described above, but you may need to change it according to your template to make sure the module can find its placeholder on the product pages.

4Publish and upload your 360 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.

5Set viewer dimensions and skin

Use Width, Height and optionally Base Width and Minimum Height fields to define the best dimensions and responsive scaling rules for your OpenCart theme. Hover over the field names inside the module dashboard to see additional information.

Most website layouts would use 100% as the viewer width and keep the base width either empty (which prevents viewer height from scaling responsively) or set the base width to the width of the viewer in its fully expanded desktop view. You can then control the minimum height to make sure the viewer height still makes sense on small mobile screens as the height will scale proportional to the width of the viewer when base width is specified.

Note that the popup mode requires pixel dimensions for both width and height and doesn't respect the minimum height property. It adjusts the viewer dimensions to fit into a smaller screen size automatically.

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

You can specify an alternative location of the 360 product images for each product using the Root Path field located next to Config File URL in the Products table (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, 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 Products tabe for those products that share the same config, i.e you would only use Root Path, pointing to the "images" folder on your server or CDN.