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.