How to upload 360 spins to your website

Lots of retailers like to upload 360 spins to their websites themselves, rather than employ the services of a web developer. That’s fine, and it’s really not that difficult.

If you have access to your server and know where to add html then the guide below will help you display your spins in no time.

It uses both html and css code, but you can just cut and paste from here into your page. So let’s get started…

Upload your spin


Firstly, you’ll need to upload your spin folder to your server. It will normally contain a folder with images (the actual images which make up your spin), an assets folder (which contains code to make the spin work) and an index.html file (which tells the other bits what to do on the website). It’s this index.html file which we’ll be concentrating on.

The easiest way to upload a 360 product spin is via FTP. We put ours in a folder called ‘360s’ which keeps things nice and simple.

So, your folder structure would look something like this:
360 spin folder structure

And the url for your index file would be:

http://www.my-website.co.uk/360s/my-spin/index.html

Create the page


Once your spin is hosted on your server you can create a page to display it in your browser. You can then display your spin in what’s called an iframe. This is a piece of code which grabs the information from the index file and displays it on your page. It’s simple because you don’t have to write lots of code to make it work. In fact, you don’t have to write any because you can copy and paste it from here!

  1. Open a new page in your favourite html program. We use WordPress for the Swiftspin website so it’s just a case of clicking ‘Add New’ under ‘Pages’.
  2. Create a container to hold the iframe:
    <div class="swiftspin-container">
    
  3. Create an iframe within the container to display the spin. Replace the ‘http source’ part with the url of the folder which holds your index file (you don’t need to include the actual index.html name)
    <iframe src="http://www.my-website.co.uk/360s/my-spin/" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    
  4. Close the container
    </div>
    
  5. Add the following style to make sure the spin displays correctly.
    <style>
    .swiftspin-container iframe {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .swiftspin-container {
        position: relative;
        padding-bottom: 60%;
        overflow: hidden;
    }
    </style>
    
  6. Test your spin by viewing your page in a browser.

That’s it. You should now be able to display spins on your website.

Fixing the size of your spin


The iframe above displays the spin at 100% of your page width. It’s also responsive which means it will scale to fit any browser or mobile device. However, you may want to constrain the width, especially for smaller spins. If so, use this style instead:

<style>
.swiftspin-container iframe {
    position: absolute;
    width: 400px;
    height: 300px;
}
.swiftspin-container {
    position: relative;
    padding-bottom: 75%;
    overflow: hidden;
}
</style>

n.b. width and height = use the actual pixel dimension of your images
padding-bottom = this makes sure your spin doesn’t cut off in the container. It is calculated like this:
height / width x 100

Adding more spins


It’s easy to add more spins to your page:

  1. Upload a second spin folder.
  2. Repeat the container/iframe code and change its url source to the new location. You don’t need to repeat the style code.
  3. Change the gap between them by experimenting with the padding.

If you have any problems uploading your Swiftspins please get in touch. We’ll be happy to help. Please Email Us.