Skip to end of metadata
Go to start of metadata

Problem: I have difficulties to embed my 360 product views into my Wordpress or WooCommerce website.

Solution: Please take the final output folder and upload this to your webserver (I use FileZilla). For more information on how to upload your 360 files on your webserver, please go to this link:

http://confluence.iconasys.dmmd.net/display/SHSKB/Upload+360+Product+View+Creator+Files+Using+Your+FTP+Server

I had also made a folder on our server called Downloads – in which I upload the 360 output folder to this master folder, then copy the link location to the iframe.html file. For ex. our Asics shoe example:

https://www.iconasys.com/Downloads/Asics-shoe-18-mouse-wheel/iframe.html

Step by Step instructions for Embedding a 360 Product View in your Wordpress Website

To integrate the 360 view in your page, you might need to download the iframe widget for WordPress (https://wordpress.org/plugins/iframe/) – then simply upload using an iframe wrapper (although some themes will already support iframe integration).
Ex. enter this into the HTML editor area:

[iframe src="https://www.iconasys.com/Downloads/Asics-shoe-18-mouse-wheel/iframe.html" width="100%" height="600"]

You will have to replace the link https://www.iconasys.com/Downloads/Asics-shoe-18-mouse-wheel/iframe.html with your link.

You can find the iframe plugin for WordPress at the link:

https://wordpress.org/plugins/iframe/

or you can use this one:

https://wordpress.org/plugins/woocommerce-embed/

Also, as an option, there is a couple plugin options for Woocommerce that will support a tighter integration (360 product view placed in main image placeholder rather than inserting 360 view in Product Description area).

So both those would be a tighter integration, allowing customer to insert into main product image placeholder. Then it's simply upload individual frames.

To test your 360s, you don't need a website domain name, or a WordPress account. You just have to load a test output from 360Creator, on a web server, then inspect the hosted iframe.html with a web browser.

Step-by-step guide

The main steps are:

  1. upload your 360 view to your webserver
  2. you might need to download the iframe widget
  3. embed the code

Some themes already support iframe integration, so you might not need to download the iframe widget.

If your 360s are not displayed, please try with https instead of http at the beginning of your link.