livechat

Plugin for BigCommerce

Our BigCommerce integration is free. It allows hosting 360 and 3D product images created via WebRotate 360 publishing software on your own servers so there are no recurring fees or vendor lock-in. There're also no apps to install and no services to subscribe to, and in most cases it doesn't require any modification to your template.

  • For a quick youtube-style integration using iFrame, please refer to our user guide under Web Integration -> Embed via iFrame.
  • Features
  • Install Stencil
  • Install Blueprint
  • History

Features

  • Integrate 360 product views anywhere on your product pages or other pages in your BigCommerce store.
  • Both Stencil and Blueprint themes are supported.
  • Based on the "best of breed" 360 & 3D product viewing engine that we have been perfecting since 2009.
  • Powerful desktop software is included to quickly publish interactive views on your computer.
  • Upload your published views to your own web hosting as needed.
  • Configure viewer skins, track analytics or customize further via advanced APIs.
  • Super responsive to look good on any device.
  • No changes to your BigCommerce template files are necessary. It's truly ad-hoc and can be deactivated instantly.
  • 'Master' configuration is available to simplify deployment of a large number of 360 product views.
  • No recurring fees. Free version is available and both PRO and Enterprise editions is just a one-time payment if you decide to upgrade.

To see a live BigCommerce demo with some of these capabilities, follow this link:

Installation for Stencil themes

Even though BigCommerce allows uploading files and folders via WebDAV to your BigCommerce file store, the file hosting is not optimized for serving images to your visitors' web browsers (as it doesn't request browsers to cache images). So as with a few other hosted platforms, we recommend to use a separate web hosting account for your 360 product images. You may use an existing FTP account, setup an Amazon S3 account, etc and we would be happy to host a sample product view on our Amazon CDN free of charge if you need to run any tests (just let us know).

Note that BigCommerce as of May 2017 defaults to HTTPS for new website installations which requires that external files such as 360 product images are also loaded over HTTPS, so your image hosting server will need to have an SSL certificate configured.

Due to the nature of the integration, some basic knowledge of HTML/CSS may be required. Please also note that this app will not automatically integrate with existing image galleries (e.g. a sliding product gallery on the product pages).

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

    Footer script with the embedded integrationFooter script with the popup integration
  • 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

    To publish your own views, download our desktop software and publish a 360 or multi-row 3D product view using your product images or download our sample images that are linked under additional resources. FTP upload is available inside the desktop software or you may upload the published assets manually (e.g in FileZilla) to a hosting service of your choice. 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'; 

Installation for Blueprint themes

This section is being updated.

If your BigCommerce theme is based on the legacy Blueprint theme, please refer to the following post on our blog that covers the Blueprint integration. If you need help with the integration, just let us know.

/blog/2013/bigcommerce-360-view-integration-beta-10-released.aspx

History

Version history of the core viewer and publishing software can be found here.

WebRotate 360 Product Viewer for BigCommerce [v2.9.0] *10-Sep-2018

  • [+] Latest v3.6.2 features such as pause on load, zoom on single click, zoom in full-screen, zoom cursors, etc are now available with Stencil integration.
  • [+] Implemented automatic hiding of the placeholder element before it's replaced by a 360 product view for smoother page loading experience.
  • [+] Added WR360_CONFIG_PARENT setting to allow separating config location from placeholder.
  • [+] Improved viewer config lookup performance (i.e finding the right image with configured ALT tag).
  • [!] Fixed a popup issue where triggering full-screen could briefly flash a scrollbar inside the popup.
  • [!] Added a dummy license for free installs to not waste time loading 404 pages (page not found).

WebRotate 360 Product Viewer for BigCommerce [v2.8.0] *26-Oct-2017

  • [+] Integration for Stencil themes.

Subscribe to our newsletter

Sign up to our newsletter to keep a pulse on our latest developments, informative posts and beta releases. We don't abuse it!

Signup