WebRotate 360 Product Viewer for OpenCart
is a free extension that can be used to integrate advanced 360 and 3D product views created with WebRotate 360 Product Viewer. To see a demonstration of this extension, please visit our OpenCart demo page.
OpenCart 360 View Demo
This product was built by us from grounds up in-house in Pasadena, California with its first release dating back to 2010. Unlike other software on the Web, our 360 and 3D product viewing technology utilizes our own extensive experience producing professional 360 product photography and interactive 3D content .
- Add 360 or 3D product views anywhere on your OpenCart product pages.
- Use the "best of bread" 360 & 3D product viewing engine that WebRotate has been perfecting since 2009.
- Comes with two modes for embedded and lightbox popup presentation with a gallery support.
- Relies on vQmod for simple ad-hoc integration that doesn't break your website and is easy to rollback.
- Doesn't modify product tables in the OpenCart database, reducing the risk of damaging your setup.
- Includes simple yet powerful software to quickly publish interactive product views on your computer.
- Upload and host your published 360 product spins on your own web hosting.
- Configure viewer skins, track analytics or customize further via advanced APIs.
- Super responsive to look good on any device.
- Extensive hotspot support for advanced interactivity.
- 'Master' configuration is available to simplify the deployment of a large number of product views.
- Continuously tested on all major browsers and devices.
Check out the Installation section below for OpenCart installation instructions. For more information and your questions, please visit our product forum
or email us at support at webrotate360 dot com. We would be happy to assist with your OpenCart integration should you have any issues!
HOW TO CREATE 360 PRODUCT VIEWS:
If you haven't created 360 product views with WebRotate 360 Product Viewer before, download our free software (Windows or Mac OS X) and follow the YouTube video linked below or check out the following user guide on how to create 360 product spins on your computer which you can then upload to your OpenCart installation via FTP. Note that you only need to upload a single folder that is auto-created under 360_assets in the published folder of your SpotEditor project upon publish.
In order to use this module please ensure that you already have vQmod installed.
1 ) Download module and copy files
Login to your OpenCart account to download the module 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.
2 ) Apply 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:
a) vqmod_webrotate360_header.xml (header vQmod) activates most of the features except for the integrated product gallery and should work with any OpenCart theme.
b) 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 contact us if this is the case as we can recommend a small change to your template to activate a full-featured integration.
3 ) Activate module and configure
Login to your OpenCart Admin and navigate to Modules:
a) Click Install next to the WebRotate 360 module.
b) 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.
4 ) Publish and upload your 360 product views
Download our desktop software (linked above) and publish a 360 product view using your own product images or use our sample images that are linked under additional resources on the download page. FTP upload is available inside the software or you may upload the published assets manually (via FileZilla, etc). 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.
5 ) Set 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.
CONNECT WITH WEBROTATE 360
To follow our news, articles, beta releases and more, consider the following options: