We have recently revamped our Shopify app, so today lets review what is currently possible in the latest WebRotate 360 Product Viewer for Shopify v2.0.

It's important to note that given Shopify limitations, your 360 product views have to be uploaded to a third-party web hosting such as webrotate's PixRiot, a GoDaddy server, etc. PixRiot, if you haven't had a chance to play with it  is our new optimized hosting solution where you simply drag a published folder from your hard-drive to your PixRiot dashboard to host and share your webrotate 360 views online. PixRiot is not a requirement for using this integration.

Install the app

There're three main integration methods available in the new app:

• Automatic PixRiot integration
• Image ALT integration
• Programmatic Integration

Let's first review Automatic PixRiot integration which is a new method we added in v2.0:

Automatic PixRiot integration

It's the simplest integration we have so far. It relies on automatic matching of a product ID in your Shopify catalog with the name of your 360 product spin in PixRiot. In other words, if a user lands on a product page and the app finds a matching 360 product spin on PixRiot, the integration is activated automatically.

Here's how to configure it step by step:

1 Let's first find out the ID of our product which we can do by simply looking at the URL of the product page in our Shopify admin. The ID is this long number at the end of the URL:

If you don't like using this ID for some reason, you Shopify developer can use a global JavaScript variable that they can output in your product template with the matching PixRiot name as needed. The name of the variable is __PixRiotAssetName.

Let's copy this number and re-publish our 360 product view in WebRotate 360 SpotEditor (download) using the Shopify number as the View Name. Alternatively, we could create a new SpotEditor project using this ID as the actual project name:

2 Now we can upload the published view to PixRiot under some folder like the shopify folder we created in the following screenshot. This folder and any sub-folders we can create there contain all required 360 product views for our app.

To upload, simply drag a single folder that just got created under published/360_assets that looks like our product id and drop it under your chosen folder in PixRiot:

3 To configure the app, first select Yes under Use PixRiot and also enter the URL of the shopify folder under PixRiot Folder in the app settings. To get the URL of the folder, click Share (globe icon) next to the folder name in PixRiot and copy-paste the URL accordingly:

Now we need to decide where to place our 360 product view on a product page in Shopify and this is what the HTML Placeholder field is for.

HTML Placeholder is either a CSS class or id of an existing HTML element (container) on a product page where we want to see our embedded 360 product spins.

It can be also a class or id of an element that triggers a popup with a 360 product view, if it's configured in the app (e.g a thumbnail with a 360 view graphic, etc). If this sounds intimidating, please get in touch with us or your Shopify developer to find out how to identify or create such placeholder.

For this exercise, we will manually replace the gallery that came with our Shopify template with this empty div container in the product template as follows:

<div class="test-360">
</div>

Alternatively, we could make it a hidden 360 graphic as shown next and place it let's say next to our main product gallery and select Show In Popup (PRO) in the app settings. The app would make it visible automatically on a product page, if a matching 360 is found in PixRiot (not all of your products may have a 360 product images). If user clicks the graphic, it opens a clean popup with a configured 360.

<div class="test-360" style="visibility:hidden;width:120px;">
    <img src="https://cdn.webrotate360.com/lib/integration/shopify/graphics/360icon.svg"/>
</div>

4 Finally, let's enter .test-360 in HTML Placeholder in the app settings in Shopify admin, save the app and clear browser cache to see our embedded 360 product spin as we intended:

You can fine-tune it further by updating viewer dimensions, its Base Width (important for responsive viewer height!), viewer skin, etc using the app settings as needed. Hover over the field names on the left in the app settings to see more details about each field there.

Remember to clear your browser cache each time you save the changes.

Image ALT integration

Instead of the automatic linking with PixRiot we reviewed earlier, here the app relies on the URL of a 360 product view that you can enter in the ALT field of any product image in your Shopify admin under Products.

The URL can point to a webrotate 360 product view on any third-party web hosting, including PixRiot. And it's the URL of a config XML file that WebRotate 360 publishing software creates on publish on your hard-drive under published/360assets/your-folder-name.

It's the same URL you see on the first tab of the Share & Embed form in PixRiot if it's uploaded there:

Here's an example URL you can use for your tests:

https://s1.pixriot.com/433181dfa6/CMS/Shopify/shirt/shirt.xml

The integration will look for the image ALT on a product page that resembles our config file to see if a given product  actually links to a 360 product view. And if it does, it will show it inside your configured placeholder (or via a popup) as we just discussed in bullet 3 under Automatic PixRiot integration.

Programmatic Integration

With this integration method, your Shopify developer can insert an HTML placeholder at a desired location on a product page programmatically and only for those products that have 360 product views. The placeholder container just needs to include the URL of the config XML file via the data attribute as shown in the following example:

<div class="test-360" data-imagerotator='{"config":"https://s1.pixriot.com/433181dfa6/CMS/Shopify/shirt/shirt.xml"}'>
</div>

Using this example, we also need to tell the app to use .test-360 as the HTML Placeholder in the app settings accordingly.

As with the other two integration methods we have reviewed, you can also configure this placeholder to work as a popup thumbnail and use the rest of the app settings as applicable.

Photo by Startup Stock Photos

Today we continue with our Missing Manuals series (see previous post) where we review more advanced product features and API examples. This time let's review a recent customization we have implemented for our client using viewer APIs.

Quick tip: to see all available APIs, simply publish your SpotEditor project using "JavaScript API" template that you can select via Template drop-down on the Publish form.

This customization was outside of our standard feature set and specifically the client wanted to really speed up the initial playback of their 360 product views on page load and then to also ensure that the 360 is always spinning as long as user doesn't interact with it. What seemed like a quick "fix" ended up being a good example of a more advanced API usage.

Check it out by opening the following link. Alternatively, download the entire SpotEditor project here and see our customized html template in the published folder.

See Example

To achieve the same result, start by creating a new project in WebRotate 360 SpotEditor (download here) or open an existing SpotEditor project. Configure everything as you would usually do. As we're going to always auto-play, make sure to hide the playback button if selected viewer skin supports it (e.g all except "empty", "zoom_light", "zoom_dark"). In our example, we use "zoom_light" so this is not a concern.

With "zoom_light" skin consider using the "Toolbar align" controls to position the full-screen button to the top right of a 360 product spin as per the example.

Next step is to verify that the playback speed is reasonable, as again our product view is going to spin non-stop pretty much. Playback speed is controlled via "Rotate period" and it's the number of seconds it takes to play once through the entire set of 360 product images.

Remember that the rotate period value is also used in the calculation of the drag speed in that we multiply "Drag factor" you see in the same section in SpotEditor by the rotate period to get our desired drag responsiveness.

Let's also configure our 360 view to zoom-in on single tap and spin on mouse wheel when it's either zoomed-in or in full-screen.

Publish the project using "Responsive" template and rename the .html file under "published" folder of your project to something else so that our manual API changes don't get overwritten accidentally if something needs to be modified in SpotEditor and re-published.

As always to use APIs we add apiReadyCallback property with the name of our callback function, i.e wr360Callback.

jQuery('#wr360PlayerId').rotator({
    ....
    apiReadyCallback: wr360Callback
});

In wr360Callback (see the entire script in the html source of the example) we first determine the number of images we want to skip during the first spin to achieve that snappy turnaround we need. In this example, it's set to 2 via startPlaySkip. Then we setup a timer to manually play through the 360 degree animation by skipping 2 images every time the timer is fired which in our example is every 120ms.

Once we finish a full loop determined by skipCount, we stop the timer and start our standard viewer playback via api.toolbar.playbackToggle().

And if our callback is called in full-screen, we skip the whole thing all together to give user full control over the 360 product view.

function wr360Callback(api, isFullScreen) {
    if (isFullScreen)
        return;  

    var totalImageCount = api.images.getTotalImageCount(),
        startPlaySpeed = 150; // Speed of the first spin in ms. The smaller the faster.
        startPlaySkip = 2; // Number of images to skip when running the first spin.
        startPlayDirection = 1; // Change to -1 to spin in opposite direction.
        
    var skipCount = Math.floor(totalImageCount / startPlaySkip);
    
    var startPlayInterval = setInterval(function() {
        api.images.showImageByDelta(startPlayDirection * startPlaySkip);
        if (--skipCount <= 0) {
            clearInterval(startPlayInterval);
            api.toolbar.playbackToggle();
        }
    }, startPlaySpeed);
	
    ....

Next section in the callback deals with the auto-playback when there's inactivity. Here we setup a separate timer that keeps tracking every 2 seconds whether the current viewer image is the same as the previous one we checked inside the timer callback. If it's not and the viewer is not in a zoomed-in state, we toggle the playback again.

....
var previousImageIndex = -1;
    isZoomed = false,
    pauseTimeout = 2000; // Time in ms to check for inactivity.

setInterval(function() {
    var newImageIndex = api.images.getCurrentImageIndex();
    if (previousImageIndex == newImageIndex && !isZoomed)
        api.toolbar.playbackToggle();
    previousImageIndex = newImageIndex;
}, pauseTimeout);

In the next v3.6.5 update, there's going to be a new api.images.onFrame that the viewer calls each time the image index changes and this may provide a bit cleaner solution without the extra timer.

All of our CMS and eCommerce plugins expose API callback so you can easily add interesting effects such as the one we reviewed above by providing the name of your callback function via a dedicated plugin property.

See the previous post in the Missing Manuals series here.

We're happy to announce that our new affiliate program is now live!

The premise is simple. Help us spread the word about our products and get a 25% share from each license sale your leads generate. With our current pricing, this is $150 from every Enterprise license and $100 from every PRO that you help us sell. If you are a photo studio that shoots 360 product photography or a 3D product modeling company with a good number of projects, this can move the needle.

PS: we have delayed the launch of the program for years since our old software for macOS admittedly was subpar and the market was not ripe enough for what we do here at WebRotate 360. Today we enjoy working with the new SpotEditor on macOS and it seems the market "overnight" started really craving all things e-commerce, e-learning & virtual, and 360 product views are on the menu.

Who is Eligible

If you have purchased our products in the past, the affiliate program is free to join and there is no minimum sales level or other requirements. This is one way to thank our clients who at the end know our products best and understand who else can benefit from using them. We also welcome serious software resellers who would be interested in joining.

How to Start

Request your affiliate account on this page. You will be provided with an affiliate link and access to your personalized tracking dashboard. Simply post your affiliate link to a blog, article, social media, forum or email. Then track your referral clicks, sales and your commissions.

Accurate Tracking and Reporting

We track website visitors and purchases that come through your affiliate links within 90 days from the first visit of your referrals and attribute them to your affiliate account. You will receive an email for each sale your referrals make and will get access to detailed reports via a personalized dashboard.

Become an Affiliate

Phil and Dyne here from Toledo, Ohio. 360 image spins of live models have proven difficult to produce using the standard turntable approach because it is difficult for even a professional model to remain motionless during the entire photo capture process.

To address this issue, we have developed a multi-camera prototype studio which can quickly produce high quality 360 spins of live models (and any other item) in a matter of minutes. Our patented process uses multiple Canon cameras, electronic logic interface circuits, LED dimmable lighting, and pan/tilt fixtures for accurate image alignment – all interfaced with our software.

Here is a typical 360 spin produced in our 16 camera "booth". You can see many more images at myshowntell.com and also use the "contact us" form for additional inquiries.

Studio construction

The studio is constructed with conventional 2x8x10 framing and drywall which allows for the subsequent addition of an outer wall with decorative logo or print media. Although a multi-camera version is required for shooting live models, we have found that using a conventional single camera and 360 product photography turntable in the structure offers a variety of benefits especially as relates to image background "washing" and object set up time. In most instances, any item can be placed or hung in the booth or set on a turntable, and the 360 product view generated with little or no post-processing required. This is because the lighting is directed evenly to the walls only and the subject is illuminated from all directions.

Here is a video of the entire image capture and display process in real time:

Lighting

We use 16 dimmable LED flood lights and 16 dimmable high frequency fluorescent flood lights - all strategically directed to the walls and NEVER directly toward the subject. Lighting directed toward the subject can cause shadowing on the background of the image which necessitates subsequent image photo processing - not much fun when there are multiple photos to address. We get the R, G and B value differentials to be less than 4 or 5 max across the entire background, which make programmatic or manual cleanup quick and easy.

Our multiple camera system software also does a background "wash" to any preset color. The magic of the studio lies with the 360 degree lighting that is made possible only with a 360 studio. When shooting live models, it was not unusual to get some shadowing around the feet, and this problem was totally eliminated by the addition of an LED back lit plastic floor insert. For this, the best results were obtained by using clear Lexan with severely abraded surfaces.

If you are using a single camera and turntable, the floor insert may not be required, but a lit or painted stand will prove beneficial. The system also works great by hanging an object from a center hook in the ceiling.

Cameras and power tilt modules

We use 16 Canon EOS cameras mounted on programmable power pan/tilt bases. Camera functions and alignments are adjusted and controlled individually or globally by the software. Below is a photo of a camera mounted on the power pan/tilt mechanism and also one of the interface circuit boards.

Software

Software for the 16-camera version has been in development over several years and it is very versatile. The software automatically does the following and more: camera alignment, light balancing, background "washing", live view capability, vertical and horizontal alignment, manual or auto focusing, cropping, resizing, color balancing and camera hole elimination.

A folder of the completed images is generated which can then be dropped into WebRotate 360's SpotEditor and subsequently to PixRiot for publication. Once the cameras have been initialized and some other parameters set (total of about 15 minutes), we can usually produce hundreds of live models rotations without any additional adjustments required.

Here is a typical screenshot of one of the many windows in the software:

Obviously the 16-camera system is not for everyone, but if you wish to capture 360 fashion photography of live models or have a high volume of other rotational image requirements, the system is ideal. Internet-ready 360 product spins can be produced in a couple of minutes and the system can also generate images of stationary objects in multiples of 16 by rotating the object and then just one more "snap" of 16 to yield 32 or 64 images if desired.

There is also a little trick with the studio that allows one to generate 3D anaglyph 360 images quite quickly. Although these types of images are a bit gimmicky and require red/cyan 3D glasses, they have proven to be popular in the education arena and fun to watch. You can see a couple of 360 anaglyph examples at myshowntell.com.

The multi-camera process and WebRotate 360's software in combination with PixRiot hosting has enabled us to produce, view and publish interactive 360 image spins of models and stationary objects in a few minutes each.

We welcome anyone who wishes to see our studio in action to come to Toledo, Ohio and get a demonstration as well as a 2 hour photo shoot and their image links for no charge!

Call 419-260-2692 fore more details (9am to 4pm EST).