BigCommerce

1Chose integration mode

WebRotate 360 integration for BigCommerce Stencil themes has two modes of operation:

• Embedded 360 product view that loads inside a BigCommerce page.
• Clickable graphic that activates a 360 product view inside a popup.

To activate either of the modes, you will need to paste a small integration script in the Footer Scripts section of your BigCommerce dashboard as described in the following sections. Alternatively, if you have access and know how to modify your template files, you can insert the script directly inside a template.

2Script for embedded integration

For embedded integration, paste the following script in the Footer Scripts section of your BigCommerce dashboard under Storefront -> Footer Scripts. Change viewer width and height as required.

Replace basic.css in the first link below with one of these to change the default viewer skin: thin.css, retina.css, empty.css, round.css.

<!-- Start WebRotate 360 integration -->

<link href="https://cdn.webrotate360.com/lib/imagerotator/latest/css/basic.css" rel="stylesheet">
<script src="https://cdn.webrotate360.com/lib/jquery/jquery.js"></script>
<script src="https://cdn.webrotate360.com/lib/imagerotator/latest/js/imagerotator.js"></script>

<script>

WR360_PLACEHOLDER = '';
WR360_VIEWER_WIDTH = '100%';
WR360_VIEWER_HEIGHT = '500px';

</script>    

<script src="https://cdn.webrotate360.com/lib/integration/bigcommerce/2.9/hook.js"></script>

<!-- End WebRotate 360 integration -->

3Script for popup integration

To enable 360 product view inside a popup, paste the following script in the Footer Scripts section of your BigCommerce dashboard under Storefront -> Footer Scripts. Change viewer width and height as required (only pixel dimensions are supported in this integration mode).

<!-- Start WebRotate 360 integration -->

<link href="https://cdn.webrotate360.com/lib/prettyphoto/latest/css/prettyphoto.css" rel="stylesheet">
<script src="https://cdn.webrotate360.com/lib/jquery/jquery.js"></script>
<script src="https://cdn.webrotate360.com/lib/prettyphoto/latest/js/jquery.prettyPhoto.js"></script>

<script>

WR360_PLACEHOLDER = '';
WR360_USE_POPUP = true;
WR360_VIEWER_WIDTH = '800px';
WR360_VIEWER_HEIGHT = '600px';
WR360_VIEWER_SKIN = 'basic'; // other skins include: empty, thin, retina, round.

</script>    

<script src="https://cdn.webrotate360.com/lib/integration/bigcommerce/2.9/hook.js"></script>

<!-- End WebRotate 360 integration -->

4Publish and upload your 360 product views

For a quick test, you can use this URL of a sample 360 product view (already uploaded to our Amazon CDN) and jump to the next step.

https://cdn.webrotate360.com/examples/3.6/sampleshoe/config.xml

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 a hosting service of your choice 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.

5Update image alt text

Unless you edit BigCommerce templates directly as described in the next step, this integration activates by finding the first image on a BigCommerce page with the ALT attribute being a URL of the viewer xml configuration file.

To make it work on the product pages, navigate to a test product under Products in your BigCommerce admin and select the first product image or add an image if there're none. Enter a complete URL of the published viewer xml file that you have uploaded in the previous step (or use provided sample xml URL) into the image 'Description' (alt) field. The xml file is located inside the folder that you uploaded in the previous step.

6Configure placeholder

Placeholder is the first parameter in the webrotate script that you enter under Footer Scripts in step 2 and 3. If Placeholder is empty, the integration will try to find the first image on your BigCommerce pages with an image ALT (description) text pointing to a viewer configuration (xml) file that you have uploaded and configured in previous steps. If such image is found and Placeholder is empty, the image is replaced with a configured 360 or 3D product view or a clickable graphic if you used the popup integration script in step 3.

Depending on your BigCommerce theme, it may not be possible to elegantly replace the configured image. In this case, you or your BigCommerce theme developer can use the Placeholder parameter (WR360_PLACEHOLDER) to specify a different page element (e.g parent container) via its html class or id. This also allows placing a product view or a clickable graphic anywhere on your product pages or other content pages. Note that you can specify multiple placeholder classes or ids at the same time (comma-delimited) in the Placeholder parameter to setup 360 product views on multiple pages, e.g WR360_PLACEHOLDER = '.myClass1, .myClass2';

For advanced integration, your theme developer can modify page templates such that the viewer config (xml) URL doesn't need to be entered manually via the image description (alt) text as described above. Instead you can use the following data attribute anywhere in your BigCommerce store templates to embed the viewer directly with a pre-configured viewer xml config (Placeholder parameter would still need to reference such element, i.e .some-div):

<div class="some-div" data-imagerotator='{"config":"http://your-config-url.xml"}'>
</div>

7Set viewer dimensions

Here's four properties that control embedded viewer dimensions that you can add or update inside the script snippet you added under Footer Scripts (example values are given below):

WR360_VIEWER_WIDTH = '100%';
WR360_VIEWER_HEIGHT = '500px';
WR360_VIEWER_BASE_WIDTH = '800px';
WR360_VIEWER_MIN_HEIGHT = '400px';

With the embedded integration mode, most website layouts would use 100% as the viewer width. Base width is optional. You can set base width to the width of the viewer in its fully expanded desktop view (in pixel) to let viewer scale its height proportional to the current viewer width. You can then control the minimum height to make sure the viewer height still makes sense on small mobile screens.

Popup integration currently doesn't support neither base width nor minimum height, and both width and height values have to be in pixel. The popup will still scale proportionally to fit pages on small mobile screens.

8Other configurable properties

Additional properties for advanced viewer configuration:

// If using custom hotspot indicators, set graphic path to a location on your server that has the indicator images.
WR360_GRAPHICS_PATH = 'http://my-domain.com/webrotate360/graphics';

// If Google Analytics is configured on the BigCommerce pages, this setting will activate the collection of 
// viewer related events that will display in your Google Analytics dashboard to give you a better perspective
// of the viewer usage. See the user guide (PDF) of the desktop software for more details. PRO only.
WR360_USE_ANALYTICS = true;

// To implement advanced features using our extensive viewer APIs, setup a callback function to
// receive a viewer API object that exposes several API interfaces. See the user guide (PDF) of the desktop 
// software for more details, or publish a SpotEditor project using JavaScript API template.
WR360_API_CALLBACK = myCallbackFunction;

// Master config is a URL of a template viewer config file (.xml). When it's set, the ALT field we discussed in
// steps 5 and 6 would have to be a URL of a folder that contains the 'images' folder as published by the 
// desktop software. This makes it possible to use a single xml file (master config) for all 360 product views as 
// long as they share the same settings and image file names. PRO only.
WR360_MASTER_CONFIG_PATH = 'http://my-domain.com/webrotate360/master.xml'; 

// By default, when placeholder is configured, the integration will try to find an image with configured ALT
// field inside this placeholder (it will go through its children). You may override this behavior by using the 
// following setting and specifying a different element on the page that wraps the configured image.
WR360_CONFIG_PARENT = '.yourHtmlClass or #yourHtmlId';