Skip to end of metadata
Go to start of metadata

The following article will guide you step by step on how to add your 360 animation project to your BigCommerce Products Website:

Difficulty level: EASY


Step 1:

The very first step is to upload your 360 animation project on a hosting website

First of all, your 360 project should be uploaded already on a hosting server. We will use https://stream.iconasys.com and the Nike Shoe animation in this tutorial:

  • Log in to your personal dashboard: https://stream.iconasys.com
  • Click the 'Upload New 360 Product' button to upload a new 360 animation
  • Now that it uploaded successfully, every 360 project has 3 URL links: Preview, Index and iFrame. Click to copy the iFrame URL as in the picture below (Fig. 1):

     Fig. 1 - The iFrame URL is located in the same block of the uploaded 360 animation project. Click 'Copy iFrame URL' to copy your link.

 

Step 2:

   In this step we need to login into our BigCommerce page: https://login.bigcommerce.com

 

   Now you have successfully logged in, click Products on the left side dashboard panel (see Fig. 2 ):

 

    Fig. 2 - The left side panel represents your List of products

 

    Select your desired product from the list by clicking on the Product Name, in this case the name is "Test":

Step 3:

    The last part of the tutorial is how to insert your iFrame code to your personal BigCommerce page.

    After you click your Product Name, it will take you to the personal editing page of that product. Scroll down to find the Description field (see Fig. 3):

   Fig. 3 - Here we will insert our <iframe> html tags for our Nike Shoe 360 animation

 

   Click on the HTML button and insert your <iframe> code here (see Fig. 4):

      Fig. 4 - Inserting the <iframe> animation

 

Sample Code
<p>My 360 Nike shoe animation</p>
<iframe allowFullscreen='allowFullScreen' src="https://stream.iconasys.com/viewer.php?application=360&type=preview&id=069467dc327b90dbfaa422e76ffbd3cadc83cb3d" width="600" height="400">
</iframe>

Tips

Use:

  • <iframe to open the iFrame tag 
  • allowFullScreen is optional, if you want to allow your 360 animation to appear on fullscreen when clicked
  • src ="https://example.com/iframe.html"here we insert the source link to our animation
  • </iframe> to close the iFrame HTML tag 
  • Use "width" and "height" as iframe properties to enlarge you 360 animation canvas. For example add after src="source-link-to-your-file" width="600" and height="400"

iFrame Reference

Reference for the iFrame tag can be found here: https://www.w3schools.com/tags/tag_iframe.asp

 

   After you finish click the green margin button Update. And now click the blue button Save to save your product description page (see fig. 5):

     Fig. 5 - Saving your progress..

 

   Finally we can now share our 360 animation product to everyone:

    Click on "(view)" right next to your product title (in this example is "Test"). Now you can review your changes by sharing the browser link to your page: