tel: +1 (800) 996-8617


WebRotate 360 Product Viewer for Shopify is a free app. It lets you host your 360 product images on your own servers so there are no recurring fees or vendor lock-in of any kind. And it's truly ad-hoc and in most cases doesn't require any modifications to your Shopify template. Use it on any page in your Shopify store!

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


  • Show 360 product views anywhere on your product pages or other pages in your Shopify store.
  • Use the "best of breed" 360 & 3D product viewing engine that WebRotate has been perfecting since 2009.
  • Comes with a simple yet powerful software to quickly publish interactive 3D and 360 product views on your computer.
  • Upload your published views to your own web hosting as needed (outside of Shopify).
  • Configure viewer skins, track analytics or customize further via advanced APIs.
  • Super responsive to look good on any device.
  • No changes to your template files are necessary. It's truly ad-hoc and can be deactivated instantly.
  • Manage the app via a simple dashboard inside your Shopify admin.
  • 'Master' configuration is available to simplify deployment of a large number of 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 Shopify demo with some of these capabilities, please follow this link (password 'demo'):


-> Installation service is available.

Shopify doesn't allow uploading folders with 360 product images to your Shopify store so a separate web hosting account is required. For example, you may use an existing website hosting you may already have outside of Shopify, setup an extra hosting account, or consider our optimized PixRiot service. We would be happy to upload your tests to our servers free of charge if you need to run any tests (just let us know).

Note that Shopify now requires that external files such as 360 product images are loaded over HTTPS, so the service you chose to host the images 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 a product page in Shopify).

  • 1Install the app

    Install the app by following the instructions under the App tab above. Once installed, the app will appear under the Apps section of your Shopify admin. Expand WebRotate 360 Product Viewer to see available settings. You may hover over the field names for additional information.

    App settings screen (top)App settings screen (bottom)
  • 2Publish 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.

    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.

  • 3Update image alt text

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

    Navigate to a test product under Products in your Shopify admin and select the first product image or add an image if there're none. Hover over the image to bring up image tools and click the ALT button that will appear at the bottom. 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 ALT field. The xml file is located inside the folder that you uploaded in the previous step.

    Edit ALT text of the first product imageEnter a URL of your published config xml in the ALT text field
  • 4Configure placeholder

    Placeholder is the first field in the webrotate app settings in your Shopify admin. If Placeholder field is empty, the app will try to find the first image on your Shopify pages with an image ALT 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.

    Depending on your Shopify theme, it may not be possible to elegantly replace the configured image. In this case, you or your Shopify theme developer can use the Placeholder field to specify a different page element (e.g parent container) via its html class or id. This also allows placing a 360 product view 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) within the Placeholder field to setup 360 product views on multiple pages, e.g .myClass1, .myClass2.

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

    <div class="some-div" data-imagerotator='{"config":"http://your-config-url.xml"}'>
  • 5Set viewer dimensions and skin

    Use Width, Height and optionally Base Width and Minimum Height fields to define the dimensions and responsive scaling rules for your 360 product views. Hover over the field names inside the app 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.

  • 6Save at least once

    It's important to save your app configuration at least once before proceeding to testing the integration on the front-end. Depending on your web browser, you might also need to refresh your browser cache to test any saved app modification on the front-end.


To install the app, copy the following URL to your browser address bar or simply click the link. Then replace your-domain with the actual website name of your Shopify store and hit Enter. Upon the completion of the installation, there's a blank screen which is normal and indicates that the app has been installed successfully.


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

WebRotate 360 Product Viewer for Shopify [v1.1.0] *04-Apr-2017

  • [!] Fixed an issue where 360 product view could embed in place of a related product image or another image on the same page with a configured ALT text.
  • [+] Integrated latest v3.6 viewer core (released version).

WebRotate 360 Product Viewer for Shopify [v1.0 beta] *01-Sept-2016

  • [+] This is the first release of our Shopify integration.

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!