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

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

  • Insert the following Javascript to the top of the file
<script>

window.imajize = {};

// CONFIGURATON BEGIN

// CSS path to find the image container
window.imajize.container_path = ".product_gallery";

// CONFIGURATON END

(function() {
  
  // Act on product pages only
  if (location.href.indexOf("/products/") > -1) {
    
    // Find container
    window.imajize.container = $(window.imajize.container_path);
    
    // Find Imajize UUID
    if (window.imajize.container.find('img[alt*="imajize"]').length) {
      window.imajize.uuid = window.imajize.container.find('img[alt*="imajize"]:first')[0].alt.match(/.*imajize.*\/([\d\w-_]+).*/)[1];
    }
    
    // Stop if no UUID provided
    if (!window.imajize.uuid) {
      return;
    }
    
    // Find dimensions
    window.imajize.width = window.imajize.container.width();
    window.imajize.height = window.imajize.container.height();
    window.imajize.ratio = window.imajize.height / window.imajize.width;
    
    // Correct dimensions if too extreme
    if (window.imajize.ratio >= 0.2) {
      window.imajize.ratio = 1;
    }
    
    // Build Imajize iframe
    window.imajize.iframe = '' +
      '<div class="imajize"' +
           'style="margin: 0 auto; padding: "' + 100 * window.imajize.ratio + '"% 0 0 0; width: 100%; position: relative;">' +
        '<iframe src="https://embed.imajize.com/' + window.imajize.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
    window.imajize.container.append(window.imajize.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.

Still need help? Contact Us Contact Us