Embed 360 spins in Shopify

On this page

Shopify logoShopify makes it easy to create beautiful online stores. They know how create a fast and easy shopping experience.

That's why Sirv 360 spins are such a winner on Shopify. They look gorgeous, feel sophisticated and are easy to set-up, thanks to Shopify's top-rated image app, Magic Zoom Plus. Try this demo for yourself.

Follow the steps below to add 360 spins to your product page, home page or text areas.

Add 360 spins to products

1. Install the free trial Magic Zoom Plus for Shopify app. (If you like it, get a full license for £49).

2. Create your free Sirv account (or login if you already have an account). You get a free 30 day trial, after which plans start from $19/month.

View 360 degree spins of Shopify products

3. Click "Add Spin" to upload a set of 360 images to a product:

View 360 degree spins of Shopify products

Click "Upload Images":

Upload 360 images to Shopify products

After upload, your spin will appear:

Preview 360 degree spin in Shopify admin

Custom spin settings

Your spin will be the first image to show in the product gallery. To change this or to change the thumbnail icon, click "Edit Settings". There are 12 icons to choose from (or design your own), which can be placed first, second or last in your gallery:

Choose 360 degree spin settings

We recommend placing the spin first because visitors instantly engage with spins. After viewing a 360 spin, shoppers have greater confidence in a product, they are more likely to purchase and less likely to return for a refund.

A further 40 settings are available to cusomize the 360 spin experience (direction, speed, first frame shown, watermarks, text etc.). You can either change the settings via your Default profile or create a new profile which can be applied exclusively to your Shopify spins. Apply your new profile by appending ?profile=ProfileName at the end of the folder name e.g.

products/{product-sku}/{product-sku}.spin?shiny-new-profile

Custom folder structure

If you have a large number of spins, it may be faster to upload them directly to your Sirv account. Choose the "Custom" folder name, to choose your own folder path:

Choose 360 degree spin settings

To match each spin to a product, name the folders to match one of your Shopify product codes:

  • Product ID: {product-id}
  • Product name: {product-name}
  • Product SKU: {product-sku}

A typical folder structure would be:

products/{product-sku}/{product-sku}.spin

For example, if your product had an ID of 185202, the file path in your Sirv account would be:

products/185202/185202.spin

The first folder "products/" is optional. We recommend a master folder to keep your home folder orderly. After all, you might use Sirv for hosting many other images, videos and files in future. It's a powerful CDN for any static file, not only spins.

The .spin file will inherit its folder name, so just ensure the folder has the correct name.

Product variants

You can also add 360 spins to product variants. Simply find the product in the list, reveal its variants and upload the images to the appropriate variant:

Upload variant product 360 spins 360

Supported themes

Magic Zoom Plus supports over 100 Shopify themes and installation usually works immediately. If there is an issue, click the Restore button and email the Magic Toolbox team. They'll add support for your theme within 48 hours.

Already supported themes include:

  • Adaptable
  • Atlantic
  • Blueseventy
  • Candida Maria
  • Cape Wine Charms
  • Carleton
  • Clean Live
  • Contemporary
  • Editions Tweaky
  • Envy
  • Expression
  • Fashionopolism
  • Fiumara Apparel
  • Flex
  • Fresh
  • Henrybb
  • Indie
  • Jitensha
  • Launchpad
  • Limitless
  • Lionesque2
  • Lucid One
  • Main
  • Megatronic
  • Minimal
  • Minimo White
  • Mobilia
  • Natural
  • New Standard
  • Nomadista5
  • Pandora-2
  • Panoramic
  • Philadelphia
  • Play v1-2
  • Pop
  • Providence
  • React
  • Responsive
  • Simple
  • Square
  • Sunlight
  • Supply
  • Symmetry
  • Technophile
  • Vantage
  • Vantage Responsive

Add 360 spins to a text area

You can also add spins to your Shopify home page, blog posts or product descriptions.

1. Upload your spin images to your Sirv account. If you don't have an account yet, register here.

2. Click the spin and copy the 2 lines of embed code shown under the spin (a div and a script):

360 spin Shopify all code

3. Go to the text area in Shopify where you want to add your spin and click the code icon:

Enter Shopify HTML description

4. Paste the spin code:

360 spin JavaScript and html code

5. Click "Save" and enjoy your 360 spin.

Note: spins can't be shown in both the product description and the image gallery at the same time on a product page.

Get expert help

Our customer support team is always happy to help configure Sirv on your Shopify store. Please contact the Sirv support team.

Was this article helpful?

Get help from a Sirv expert