Jan 20, 2015 - Our completely reinvisioned & reworked module for PrestaShop 1.6.x has been released. Find out more HERE

Follow this simple guide to integrate WebRotate 360 Product Viewer into your Prestashop web store. Once integrated, your visitors will see an interactive product view with zoom capability, 360 rotation, extensive hot-spot / annotation features (and more!) conveniently located in place of the main product image (if configured for a given product).

The current version of the integration was tested on 1.4.x (including 1.4.9) and 1.5.

Step 1 - Download and copy necessary files

Download WebRotate 360 Prestashop Integration, unzip, and copy files and folders as follows (you can also install directly under Modules in the Admin - please still follow these exact steps below):

• Copy 360assets folder to the root of your site (it's just a sample 360 product view).
• Copy AdminWebRotate360.php from webrotate360/admin/tabs into admin/tabs folder.
• Copy WebRotate360.php from webrotate360/classes into classes folder under site root.
• Copy webrotate360 folder from webrotate360/modules into your modules folder located in the root (overwriting any files that were created there automatically if installed using the Add from my computer option or directly from the Prestashop Addon Marketplace).

Step 2 - Install

Login in your Prestashop admin and navigate to the Modules section. Then expand Others section in the Modules list or use Search box and type webrotate to quickly find the module. Once found, select Install to install the module. Remember to backup your database before proceeding with the installation to ensure that you can restore your data if something goes wrong with the module.

Once the module is installed, please select Configure and carefully read the instructions.

Step 3 - Configure

In the most basic setup you don't need to enter anything on the module configuration screen (see immediately below). Important: if using Prestashop 1.5, please still enter your desired width and height of the viewer on your product pages or just style #image-block in your theme's CSS to have fixed width and height as Prestashop 1.5 doesn't have fixed dimensions for #image-block style in the default theme.

Step 4 - Create Admin Tab

In Prestashop version 1.4.x or lower navigate to the Employees tab and select Tabs immediately below. Then select Add new and enter WebRotate360 as Name and AdminWebRotate360 as Class. Leave the Module field empty. Set Parent to Catalog. You can also assign a tab icon that is included in the supplied zip under admin as tab_logo.png.

Save the tab which will now appear in the menu under your Catalog in the Prestashop Admin.

Step 5 - Assign Product Views

Navigate to your Catalog and note the new menu called WebRotate360 at the end of the first line below the Catalog tab (Prestashop 1.4.x). Expand the new tab and select Add new.Carefully review the instructions and follow these steps to try the test 360 rotation (sampleshoe) included with this package:

• Select your test product from the Product combo-box.
• Give this view a unique name that you could later recognize (e.g same as your product name for example).
• Enter Config URL which would be http://yourdomain/360assets/sampleshoe/config.xml that you have copied in the first step of this integration guide.

Now the sample 360 degree spin should be visible when you expand your test product page in the Prestashop front-end of your store.

To create your own interactive views download our software on our standalone product viewer page, watch tutorial videos located on the same page, or use our new forum for additional information. Visit our new equipment store to browse professional 360 photography equipment that we use in our own studio.

Appendix. Creating Admin tab (menu) in Prestashop 1.5

Prestashop 1.5 has a different location for adding your WebRotate360 Admin tab (now called menu) as discussed in the Step 4. To add the new Catalog menu for WebRotate360 in 1.5, please navigate to Administration->Menus, select Add new and enter the same information as discribed in Step 4. Once saved, the new menu will show up under Catalog.

Aug 12, 2013 - If using Prestashop 1.5.4.1 and up, please download updated AdminWebRotate360.php from here and overwrite the same file under your admin/tabs folder.

Nov 04, 2013 - If using Prestashop 1.5.6 and up please delete your /cache/class_index.php after installing the module.

Jan 20, 2015 - Our completely reinvisioned & reworked module for PrestaShop 1.6.x has been released. Find out more HERE

If you're still having issues with the module, please let us know on our forum here.

Follow this simple guide to integrate WebRotate 360 Product Viewer into your Facebook pages. Once integrated, your Facebook visitors will be able to see extra tabs such as these ones on Pepsi's Facebook page. These tabs can be clicked on and expanded to show your 360 view presentations embedded inside your Facebook pages. It's important to understand that the Facebook tabs only allow embedding content that you host on your own or third-party servers.

Step 1 - Visit Facebook Developer page

Login in Facebook using your Facbook account, and visit this page: https://developers.facebook.com/apps

Step 2 - Create new Facebook App

Select Create New App in the top-left corner and give your new app a unique name. You can leave namespace field empty. Also for the purpose of this guide, we will use your own web hosting so you can skip on the Heroku hosting offer at this time.

Select continue, enter the Security Check Requirements and then Submit your new application. Once loaded you will see the Settings page for your new application.

Step 3 - Configure Basic Information

Since this application will only be used on your own Facebook page, you can skip most of the information on the Basic Info tab and proceed directly to the Page Tab section as is.

Expand the Page Tab section located on the bottom of the Settings page. Give your tab a name and select an image that will show on your Facebook page once this tab is finalized. The image can be a nice 360 arrow graphic with your product or showcase. Set Page Tab Width to wide (810px) to give your interactive content more space inside the Facebook page.

Step 4 - Create You 360 Content

Create your 360 product spin using WebRotate 360 SpotEditor inlcuded in the free download and copy a published folder via FTP to your server. To learn more about SpotEditor, please refer to this video tutorial.

Note the location of the auto-generated html page created by SpotEditor and ftp'ed to your server and enter the URL to this html file on your server under Page Tab URL and Secure Page Tab URL under Page Tab section on the Settings screen (use https:// instead of http:// at the front of the URL secured URL).

If you don't have an SSL certificate configured on the server where you are hosting 360 degree product photos, the integration will still work for those visitors who don't have secured browsing enabled in Facebook, which is most of the Facebook users at this time. But you should consider configuring an SSL certificate to ensure this Facebook integration will work for everybody going forward.

Verify that the URLs point to your 360 degree spin and select Save Changes.

Step 5 - Add New Page Tab

Now that you have finished with the configuration of your Facebook Page Tab, you can use this URL below to add the new tab to your Facebook page. But first you will need to replace YOUR_APP_ID with the APP_ID that Facebook assigned to your application (you can see it in the image above under Step 3).

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=http://www.facebook.com

Copy this URL and paste it into your browser and then select your Facebook page where you want to integrate the new tab. It should look like this:

Just a quick announcements - our brand new viewer Support Forum is now live. It's frighteningly empty right now but we are determined to make this board one heck of a helpful resource for all of us involved in using and developing this 360 photo software. We hope that it will help gathering a wealth of information and various tips and tricks that otherwise go unnoticed or lost and can be a cause of frustration for those folks who are just starting with this technology.

We are ready to jump right in and make it work for you and share everything we know. Guest accounts are enabled, so don't hesitate to start a conversation!

Thanks to rmlowe for this great Flickr image of the Roman forum.

February 19, 2020 - reworked and much improved Mac software v3.6.4 is now available. The new installation is a simple 18 MB download and doesn't require separate third-party components that were causing issues in the older releases. PRO version is available upon request and via built-in software update option after Feb 24, 2020.

The title pretty much says it all - finally after some delays and broken promises we have something to offer to our Mac users! It doesn't look like your usual slick Mac app yet (coming later), but it gets job done and that's what matters. So if you are a Mac user, you can now create 360 views quickly and efficiently with our SpotEditor for Mac (beta) and benefit from the variety of unique features for 360 product photography and 3D modeling / CGI that we offer in WebRotate 360 Product Viewer.

Download SpotEditor for Mac (beta)

There are two prerequisites that you will need before SpotEditor can run on Mac which the app will warn you about if they are not installed already:

1. X Windowing Layer (X11), which is often already installed on older Mac machines under Applications->Utilities or bundled with Mac Install DVD (and also required if you run apps such as GIMP, Matlab or OpenOffice for example) but may need to be downloaded and installed manually if you are running newer releases of Mac OS. The XQuartz project provides this free software and you can download the most recent version of X11 app on their website here.

2. Free Mono Framework build 2.10.9_12 that you can download from Mono website using this link. To learn more about Mono project, please visit this page. Now included with the main software download. Just go though the readme in the Mac download.

Simply unzip SpotEditor.app.zip on your desktop and you are ready to go (checkout this video that shows the software in action). The very first run of SpotEditor may not be successful (due to a known issue with X11 on Mac) - simply run it one more time and it should be starting fine from now on.

We're looking forward to any feedback concerning this release as we want to ensure that Mac users have the tools they need.