livechat

Plugin for Shopify

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!

  • Please let us know of any issues, concerns or feature requests by submitting a quick support request here. Or create a new topic on our support forum under Shopify App.
  • Features
  • Installation
  • App
  • History

Features

  • Show 360 product views anywhere on your product pages or other pages in your Shopify store.
  • Use the "best of bread" 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

Shopify doesn't allow uploading folders with files to your Shopify store which is necessary for the app to operate, so a separate web hosting account is required. 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 Shopify now requires that external files such as images are 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).

  • 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

    Download our desktop software and publish a 360 product view using your product images or use our sample images that are linked under additional resources. FTP upload is available inside the software or you may upload the published assets manually 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.

  • 3Update image alt text

    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 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 image with a product view in which case you or your Shopify theme developer can configure the Placeholder field to specify a different page element (e.g image parent) via its 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 xml 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 automatically with a pre-configured viewer configuration (Placeholder field would still need to reference such element):

    <div class="some-div" data-imagerotator='{"config":"http://your-config-url.xml"}'>
    </div>
  • 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.

App

To install this app, select Get on our app's page in the Shopify app store linked below and then follow the on-screen instructions.

History

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!

Signup