livechat

Plugin for Shopify

This is the first release (beta v1.0) of WebRotate 360 Product Viewer for Shopify. It has not been submitted to the Shopify App store yet, so you will need to follow the instructions below to install the app in your store admin.

  • 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 their file hosting yet which is required for WebRotate 360 product views to operate, so a separate hosting account is necessary. You may use any existing FTP account, setup an Amazon S3 account, etc. We would be happy to host your sample 360 or 3D product view(s) on our Amazon S3 + CloudFront hosting free of charge if you need to run any tests (just let us know).

IMPORTANT: Shopify now requires (since Feb, 2017) that all external files such as images are loaded over HTTPS, so your image hosting server will need to have an SSL certificate configured.

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

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

    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.

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

History

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

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