Tip:
Highlight text to annotate it
X
In today's tutorial I'm going to show you how to install Magic 360 in Magento. You can
see the product image currently looks flat on my page. So I want to change that from
this to this. Look how impressive my image now looks with a three hundred and sixty spin,
so customers can see every angle of the product, and to that the magnify effect and you have
the ultimate zoom tool for selling products. To get this effect we need to go to the Magic
Toolbox website. If you go to the Magic 360 product page, you'll see the Magento icon
on the right hand side which will take you to the Magic 360 for Magento page. Click the
download button and save the zip file to your computer. Extract all the files. And the magic
360 folder is what we'll upload to our server. I'm going to use FileZilla for this. Find
the magic 360 folder on your computer and upload it to the Magento directory on your
server. This will take a few minutes so pause the video here and start again once your folder
has uploaded. My files have now finished uploading and you can see my magic 360 folder is showing
here. Next we need to disable the compilation process. We can do this by going to System,
Tools, Compilation. You can see my compiler status is Enabled so I need to disable it.
Next we're going to install Magic 360. To do this enter your Magento website url and
after it enter magic 360. You'll be taken to this page and all you have to do is click
Install. Now go back to the Compilation page we were just on and this time click Run Compilation
Process. Of course, if you don't use the Magento compiler then you don't need to do this step.
Next we need to clear the cache. Go to Cache Management. Select all. Make sure the Action
says Refresh and click Submit. You can see on my shoe product I've uploaded all my images
to make the three hundred and sixty degree spin. I'm using thirty six images for this.
You can also see I've put each image in the sort order I want them to appear on my product
page. Next we need to go to the Settings page and tell it which products we want Magic 360
to work on. The default is set to All but you can change this by entering each Product
ID. You'll also need to state how many images you'll be using to achieve your spin. I'm
using thirty six so I'll leave this as it is. Magic 360 is now installed. If you refresh
your product page you'll see it in action. Remember to only upload large images as they'll
be used for the magnify effect. Magento will automatically resize the large images to fit
other areas of your website. Now that Magic 360 is installed let's make a couple of changes.
First, I'm going to remove the Magnify option. Then I'll change the text which appears under
the image. To do this, go to the Magic 360 settings page. Change the Magnifier Effect
option to No. Go to Message Under Images and type here what you would like to appear. If
we go back to the product page and refresh you can see the Magnify option is no longer
available and the text has changed under the image To see what looks great on your Magento
website, try all the options on the Settings page. As well as adding Magic 360 to your
product pages, you can also add it to your CMS pages. Go back to the Magic 360 Settings
page and select Yes for the Include Headers on all Pages option. This will bring in the
CSS and JS files to your CMS pages. You can see at the moment my home page is blank. To
change this Go to CMS, Pages, Select the page you want Choose Content and select the HTML
icon. This will open a HTML window. Next, go to the Magic 360 Integration page. Go to
the Referencing Images section. If you only want to have a spin effect, use this code.
To have the spin and magnifier effects, scroll down to the Magnifier section copy the example
code and paste it into your HTML window. The href reference is the large image which will
be your magnifier effect. Then there's the Magic 360 class. The rel attribute filename
will pick up all your small images in sequence. Magnify is set to true and the Magnify filename
attribute will pull in all your large images in sequence. Remember if you've saved your
images in a folder on your server, you'll also need to reference that. And finally the
image source is the small image which will appear on your web page. Once you've entered
your details, click Update And save your page Now if we refresh our home page You can see
Magic 360 is now working. At the top of each page on our website is a Contact Us link.
So if you have any questions about any of our tools, just get in touch. If we're not
online when you send your message through, we'll get back to you the very next day. And
that brings us to the end of this tutorial. Thanks for watching.