Shopify

How do I embed 360 images on Shopify?

Imajize enables you to easily embed a 360° product spin into any Shopify product page by simply copying and pasting an embed link that is generated by the Imajize system. First you need to create an Imajize account  here and create some 360 spins. Once you have done that simply follow the instructions below to publish your 360 views on Shopify product pages.

Step 1: Sign up with Imajize

• Create your Imajize account at www.imajize.com

Step 2: Add Javascript to your theme

• Log in to your Shopify account
• Navigate to your theme editor through Online Store > Themes in the navigation on the left hand side

• Select the active theme and click on Actions > Edit Code

• Open index.liquid (theme.liquid with more recent versions of Shopify)

• Insert the following Javascript at the bottom of the index.liquid. If you are adding the code into the theme.liquid, make sure to add it right before the closing </body> tag.

<script>


window.imajize = {};


// CONFIGURATON BEGIN


// CSS path to find the image container: please adjust to match the container holding your images, depends on the theme
window.imajize.container_path = ".product__media-list";


// CONFIGURATON END


(function() {
  
  // Act on product pages only
  if (location.href.indexOf("/products/") > -1) {
    
    // Find container
    window.imajize.container = document.querySelector(window.imajize.container_path);
    
    // Find images
    window.imajize.images = window.imajize.container.querySelectorAll('img[alt*="imajize"]');
    
    for (let image of window.imajize.images) {
		
      // Find Imajize UUID
      let uuid = image.alt.match(/.*imajize.*\/([\d\w-_]+).*/)[1];
    
      // Stop if no UUID provided
      if (!uuid) {
        return;
      }
    
      // Find dimensions (optionally, try using width instead of offsetWidth and height instead of offsetHeight)
      let width = image.offsetWidth;
      let height = image.offsetHeight;
      let ratio = height / width;
    
      // Build Imajize iframe
      let iframe = '' +
        '<div class="imajize" ' +
        'style="margin: 0 auto; padding: ' + Math.round(100 * ratio) + '% 0 0 0; width: 100%; position: relative;">' +
        '<iframe src="https://embed.imajize.com/' + uuid + '" allowfullscreen="" frameborder="0" scrolling="no" style="background-color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>' +
        '</div>';

      // Insert Imajize iframe
      image.parentElement.parentElement.innerHTML = iframe;
			
    }
  }
  
})();

</script>

• Click the "Save" button

Step 3: Add a 360 product image to a Shopify product page.

• Log into your imajize account and find the product view you want to add.
• Click "Embed" and choose the "URL" tab.
• Copy the embed code. It should look like this: http://embed.imajize.com/PQUDbEJO_N4
• Log into your shopify account.
• Navigate to the product page you want to edit. 
• If you haven't already done so, add a static product image like you normally would.
• After the image has been uploaded, hover over the image preview and then click "ALT"

• Now paste the embed code that you copied from the imajize Embed page.

• That's it! You will now see the 360 view on your product page.
• Repeat Step 3 for each 360 view

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 clean integrations with popular ecommerce platforms and content management systems. If you are having trouble then our dedicated integration team is always here to either point you in the right direction, or do the dirty work for you. We offer free support with basic integrations (for example, embedding your 360 view into your webpage's product description area), and we also offer paid integration development with Shopify themes that are incompatible with our Shopify 360 view integration solution. Pro tip: Ask your CMS/theme developer first; they are the true technical gatekeeper with direct access to all of the technical back-end software for making 360 view integrations clean, simple and easy. Third party developers–like us–have limited access to Shopify's core back-end software (it's akin to working on a car's engine without being allowed to open the hood). Contact our support team with any questions–we'll stick with you every step of the way.