Here's a great e-commerce template we would like to share with our followers. We prepared it for one of our clients recently but you may find it useful as well.

It was made super responsive (try resizing your browser once it's loaded) to look nice on desktops, tablets and phones, and includes our in-place reloading feature that loads 360 or 3D product views without page refresh. We don't have anything similar in SpotEditor yet, so you may grab the template below and convert it for your needs. Upcoming v3.6 release will have it integrated as an extra publishing template inside SpotEditor.

Click this image to see it in action and download below:

DOWNLOAD

To use this template for your own projects, please follow these steps:

• Publish your SpotEditor project as usual.
• Copy a single folder that you will find under published/360_assets in your SpotEditor project directory to 360_assets next to view1, etc in the root of the template.
• Open template's sample.html for edit and scroll down to the JavaScript section around line 163.
• You will see that the initial 360 product view is currently pointing to the following viewer config file: 360_assets/view3/view3.xml. You can replace this path with yours accordingly.
• The same view3.xml is then loaded again if user clicks on the third thumbnail, so you can again replace the second reference to "360_assets/view3/view3.xml" with your own xml path for your initial 3D view.
• Then replace the other two xml references inside apiObj.reload(...) with your own xml path for the first an second thumbnails.
• Replace thumb PNG files in the root of the template folder (we provided a Photoshop PSD file to help with the preferred image dimensions if needed).

If any questions, just let us know!

PS: the template uses one of our recent stable v3.6 beta builds so you may notice a couple of new things with this template:

1. New responsiveMinHeight setting that you can see in sample.html. This setting was just introduced in v3.6 to make mobile views look better. It allows to configure a minimum viewer pixel height, making sure there's enough padding space for 360 product images when the viewer resizes itself to fill your scaled web pages on small mobile screens.

2. New bounceRows flag under rotation element in view1.xml designed for 3D product views that controls whether to loop through the vertical rows when you drag images vertically or bounce at the first or last row if your 3D CAD renderings or 360 product photography doesn't have a full set of rows to cover all angles in a vertical spin. We were bouncing rows by default in the previous v3.6 beta releases and there was no way to change the behavior.. So now if you manage to export enough 3D rows to cover a full vertical spin, it will work (full 3D at last, yay!)

3. New flipHorizontalInput flag under rotation element in view2.xml which makes images spin in an opposite direction to mouse & touch drag. Note that we already had the rotateDirection flag that would make this possible, but it would also affect the playback direction and the arrow buttons accordingly. This was not good enough for one of our clients who is involved in 360 bullet time-lapses in that they needed the playback direction to work separately from the drag so that they could preserve the original order in which the images were shot. It's mind boggling, but we had to do it :)

So when the new v3.6 build is released, hopefully in the next few weeks, these settings will be available inside SpotEditor user interface (among a few more new features!).

PS: if you decide to integrate this template into some ecommerce site or your ecommerce demo, it may be more useful to reload the views at the same image position to make color changes and similar look nicer. Here's how you could change a single line in sample.html to reload a view at the same image index as currently shown:

apiObj.reload('360_assets/yourview/yourview.xml', null, null,
    apiObj.images.getCurrentImageIndex());

We have seen our share of cool DIY 360 product photography turntables, but this recent tutorial is a rare find!

Adam Pereszlenyi from Hungary shared tons of info and supporting materials for his DIY solution: from step-by-step guide on how to build the hardware and automation via Arduino Nano to free software and designs for 3D printing of some of the parts required for his assembly.

To control the camera and turntable rotation Adam developed a piece of software that requires Linux OS and which can be downloaded on his website for free (although donations are welcome!). The camera support that his Linux solution provides is impressive – more than one thousand cameras (list of supported cameras).

This motorized turntable for 360 product photography can be an answer for those folks who like to build DIY solutions and don’t want to shell out for professional equipment such as Ortery PhotoCapture 360.

We thank Adam for putting together such a neatly organized tutorial!

This post was revised on September 11, 2018 to incorporate the latest viewer release.

Even though Squarespace is still lacking support for third-party plugins, we now have a new integration option for Squarespace that looks similar to the embed shortcodes in our WordPress and Joomla plugins (full list).

Squarespace doesn't allow uploading folders with 360 product images to their hosting so a separate web hosting account is required. For example, you may use an existing website hosting you may already have outside of Squarespace, 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).

LIVE DEMO

Now lets review how to integrate your published views in Squarespace.

1) For a quick youtube-style integration using iFrame, please refer to our user guide under Web Integration -> Embed via iFrame. If this works best for you, you may ignore the rest of the post.

2) Publish a 360 product view using WebRotate 360 SpotEditor that you can download here. Here's a quick video that walks you through the basic steps.

3) Upload the contents of the 360_assets folder that you will see in the published folder under your SpotEditor project directory (or wherever you have chosen to output your published 360 product view) to your web hosting. You can upload it right away on publish in SpotEditor using our built-in FTP option (check "Upload assets only") or use a popular FTP client such as FileZilla or a browser based file manager that comes with your web hosting.

4) Once uploaded, note the location of the xml file inside the uploaded folder (e.g http://my-domain.com/360-views/my-product/my-product.xml). You'll will need this URL for the next steps.

For a quick test, you can also use this URL of our example 360 product view:

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

5) Login to Squarespace and expand a page where you plan to integrate your published view.

6) Click Settings to configure this page and then select Advanced. Paste the following lines under Page Header Code and click Save.

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

Note 1: you may not need the first line (jQuery script) as your Squarespace theme may already include it. You may also replace round.css with your skin of choice (e.g, basic.css, thin.css, empty.css, retina.css, zoom_dark.css, zoom_light.css).

Note 2: if you don't want to paste these scripts on every page where you add the product views, simply paste them under Code Injection->Header which is located under Settings->Advanced->Code Injection.

7) Add a new Squarespace Code block to the page content and paste the following, replacing the URL next to "xmlfile" with the one your have uploaded in the previous step or the example URL we show in step 4 and then update width and height as needed.

<div class="wr360embed-cdl" style="width:100%;height:600px;"
data-imagerotator='{"xmlfile":"http://your-config-url.xml"}'></div>

PS: there're few options that you can configure in the last step. Below is an example with all of the available options listed in one place:

<div class="wr360embed-cdl" style="width:100%;height:600px;" data-imagerotator='{
    "xmlfile":"http://your-config-url.xml",
    "graphics": "https://cdn.webrotate360.com/lib/imagerotator/graphics",
    "basewidth": 1024,
    "minheight": 400
    "events": true,
    "name": "my-view",
    "rootpath": "http://my-cdn-for-images.com/product1/",
    "onready": your-javascript-callback}'>
</div>

Here's more details on each option:

• basewidth - viewer width in pixel that you can set to allow the viewer window to scale not just horizontally, which works by default if a parent container has relative width, but vertically as well. It usually represents your default viewer width in the page layout before any responsive scaling is applied. When it's set, the height of the viewer is automatically scaled relative to the scaled width.
• minheight - if basewidth is specified, this setting represents the minimum viewer height in pixel. This can be helpful on small mobile screens where you may not want the viewer height to go beyond some fixed minimum. 
• events - set it to true if your website has Google Analytics integrated and you would like to track user engagement with your 3D product views as per this recent article on our blog. 
• name - if specified, this name will appear in your Google Analytics event tracking so you could sort out the events by each view. 
• rootpath - if you host images on a CDN server or if you need to have a single xml config for all of your 360 views, you can configure the image location using this path. Please find more details in our user guide under API / rootPath.
• graphics - absolute path to a folder with hotspot indicator images (if you use hotspots!). Note that we share all default indicator images on our CDN, so this path will work: https://cdn.webrotate360.com/lib/imagerotator/graphics
• onready - pass your JavaScript API callback that accepts one parameter being the viewer API object. Please refer to our user guide under API / apiReadyCallback for more details about various API functions we currently support.