The following article will guide you step by step on how to upload your 360 animation project to your personal Shopify Store.
The very first step is to upload your 360 animation project on a hosting website
First of all, your 360 project should be uploaded already on a hosting server. We will use https://stream.iconasys.com in this tutorial
- Log in to your personal dashboard: https://stream.iconasys.com
- Click the 'Upload New 360 Product' button to upload a new 360 animation
- Now that it uploaded successfully, every 360 project has 3 URL links: Preview, Index and iFrame. Click to copy the iFrame URL as in the picture below (Fig. 1):
Fig. 1 - The iFrame URL is located in the same block of the uploaded 360 animation project. Click 'Copy iFrame URL' to copy your link.
In this step we need to login a into your https://www.shopify.com account:
Fig. 2 - Go to https://www.shopify.com and click Log In to enter your personal Dashboard
Now you have successfully logged in, click on your Products on the left side panel (Fig. 3):
Fig. 3 - Your personal Dashboard Panel
The last part of the tutorial is how to insert your iFrame code to your personal product page.
Here is your product list. You can Add product if you want or you can simply click on the product name to start integrating your iframe animation (see Fig. 4):
Fig. 4 - Your list of products, click on the product you want to edit (in this case is the Nike shoe)
Now comes the coding part. Select html<> in the description of the product (see Fig. 5):
Fig. 5 - Select the html <> button to start coding
Click on the <> button and start inserting your 360 iframe animation (see Fig. 6):
Fig. 6 - Add your 360 project animation on the product's description div
- <iframe to open the iFrame tag
- allowFullScreen is optional, if you want to allow your 360 animation to appear on fullscreen when clicked
- src ="https://example.com/iframe.html"> here we insert the source link to our animation
- </iframe> to close the iFrame HTML tag
- Use "width" and "height" as iframe properties to enlarge you 360 animation canvas. For example add after src="source-link-to-your-file" width="600" and height="400"
Reference for the iFrame tag can be found here: https://www.w3schools.com/tags/tag_iframe.asp
Scroll down and click the 'Save' button the to see the final results (see Fig. 7):
Fig. 7 - Click the mauve Save button to apply your settings
Everything is done! Now you can review your changes by sharing the browser link to your page:
This is how the final preview of the product looks like (with preview uploaded image and 360 animation iframe):
*You can upload an image of the product for preview (recommended), because the iframe animation only appears in the description div on your product