BigCommerce

How to display 360 product images on a Bigcommerce product page

Many online mega-retailers have discovered that 360 product images significantly boost product engagement and sales while reducing return rates. Unfortunately many shopping cart systems available to small and mid-sized businesses only allow static images be used on their product pages. Imajize solves this problem. Now you can easily integrate the Imajize 360 product viewer within your BigCommerce product pages! With BigCommerce, we have two possible integration methods.

First create an Imajize Account

• You can create one here
• Click here if you have no idea how to make "360 degree product photos"

The Simple BigCommerce Integration Method

This will add the 360 product image into the description area of a product page.

• First, log into the admin area of your BigCommerce and click "Products".
• Select the product you want to add the 360 to.
• Scroll down to the description editor, and click on the "Insert/Edit Embedded Media" button in the toolbar of the editor.
  

  

   

• In the general tab, choose the type "Iframe" and paste the URL to the 360 view. The URL looks something like this: https://embed.imajize.com/8rLM5DRyKik
  

  

• You can try using the above URL or any other URL that Imajize provides you with by logging in to Imajize, going to your 360 view, and clicking on "Embed" > "URL"

The BigCommerce Javascript Integration Method

This will allow you to replace the current main product image with a 360 product view.

• First, log into the admin area of your BigCommerce and click "Products".
• Select the product you want to add the 360 to.
• Scroll down to the description editor, and click on the "Insert/Edit HTML" button in the toolbar of the editor.
  

  

• Now paste the following code at the bottom of the description:
  
  <!-- === Imajize Embed Start === --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript">// <![CDATA[ $( document ).ready(function() { window.imajize = {}; /* ENTER IMAJIZE UUID HERE --> */ imajize.uuid = '8rLM5DRyKik'; imajize.container = $('.productView-images'); imajize.thumbs = $('.productView-thumbnails'); imajize.width = imajize.container.width(); imajize.height =imajize.container.height(); imajize.ratio = imajize.width / imajize.height; imajize.iframe = '<div style="opacity: 1; padding: ' + imajize.ratio * 100 + '% 0 0 0; width: ' + imajize.width + '; position: relative;">' + '<iframe src="https://embed.imajize.com/' + imajize.uuid + '" allowfullscreen="" frameborder="0" scrolling="no" style="background-color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>' + '</div>'; imajize.container.html(window.imajize.iframe); imajize.thumbs.hide(); });// ]]></script> <!-- === Imajize Embed End === -->

Note: Due to differences in the themes provided by BigCommerce and third-party developers the code above may need to be modified to fit your specific implementation. The code above was made for the default Cornerstone Light Theme (version 2.0). If your 360 product image doesn't appear immediately then please send us a link to your 360 product page and we will find a solution. Usually within 24 hours. Also, If your theme already uses JQuery then you can remove the reference to JQuery.

Here is an example of an Imajize 360 viewer in action.

Note

If your free Imajize trial has expired your 360 spins will no longer appear on any websites.  You can upgrade your account here.

Boost engagement & decrease returns with Imajize.

If you haven't already created an Imajize free trial account you can  create one here.

Contact our world-class support team.

Imajize is working diligently on developing new plugins and tools for popular ecommerce platforms and content management systems. If you are having trouble with any of them our dedicated team is always here to assist you. In many cases we can develop a custom solution just for you free of charge.  Contact our support team with any questions.