Tip:
Highlight text to annotate it
X
In today's tutorial I'm going to show you how to install Magic 360 in Zen Cart. You
can see the product image currently looks flat on my page. There's an option to view
a larger image but it's a pop up and to me it looks uninspiring. 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, add to that the magnify effect
option and the product looks amazing, but that's not all, Magic 360 also allows you
to see the 360 spin in a full screen option. It's 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 Zen Cart icon on the right hand side which will take you
to the Magic 360 for Zen Cart page. Click the download button and save the zip file
to your computer. Next, 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 Zen Cart 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 the magic 360 folder is showing here. Next we're going
to install Magic 360. To do this enter your Zen Cart website url and after it enter magic
360. You'll be taken to this page and all you have to do is click Install. By default
Magic 360 is Enabled. To change this, go to your Zen Cart admin, click Configuration and
then Magic 360. You can see the option Enable Zen Magic 360 is set to true. If you want
to change this click Edit and change the setting to False. The setting for Number of Images
on X-Axis defaults to 36. This is the number of images you'll use to create the 360 degree
spin on your product. We recommend you use either 18 or 36 images to create your spin.
If you have 18 images for each product, you'll need to make the change here. I'm using 36
images so I'll leave this as it is. The Product IDs default is set to All which can stay the
same, or you can change this by entering each Product ID that will use Magic 360. It's entirely
up to you. Next I’m going to add the images to my product. I'm going to use a smaller
image called shoe.jpg which I'll add last via the product page and this image will display
on the Product Results page. The rest of the images are my 36 spin images. Notice how they
all begin with the word shoe, this is so all my images will be linked to the same product.
The spin images have been numbered one to thirty six. This is the sequence I want my
images to appear in the 360 degree spin. And lastly I've labelled each image Large. You
don't have to use this label, it's just for me so at a quick glance I can see I'm using
the large versions. By using large images you'll have great magnify and full screen
effects plus a smaller resized image on your product page. If I change the view you can
see what my images look like. The first image is the image I'll be uploading via the product
page. You can see the remaining thirty six images move ever so slightly in each image
and this is what will create my 360 degree spin which I'll FTP to the dvd folder on my
server. To do this I'll use FileZilla again. On the left you can see my computer and the
36 large spin images I want to use and on the right is the Zen Cart server. I want to
put the large images into a folder called DVD which you'll find in the Images folder.
I'll just reselect my 36 images on the left and drag them over into the DVD folder. This
will take a minute so pause the video here and start again once your images have uploaded.
Now that's finished you can see all my large images are now uploaded to the Images / DVD
folder. The last image we need to upload is on the Product page which you can get to via
Catalogue / Categories/Products. Browse for the smaller image called shoe.jpg and change
the Directory to dvd in the drop down menu. I don't want to overwrite any existing images
so I'll select No here. Once that's done click Preview and Update. Now go to the Product
Results page and refresh. You can see the image we've just uploaded via the product
page is displaying here on the Results page. If we click through and go to the Product
Page you can see Magic 360 is working. The 36 large images we FTPd to the dvd folder
on the server control the 360 degree spin the magnify option and the spin in the full
screen effect. Now that Magic 360 is installed let's make a couple of changes. First, I'm
going to change the magnify option to a circle. Then I'll change the text which appears under
the image. To do this, go to the Magic 360 settings page via Configuration / Magic 360.
Change the Shape of Magnifying glass option from Inner to Circle. And click Update to
save your changes. Further down the list you can see the 'Show message under image?' option
is set to Yes. If you didn't want any text to appear then you would change this to 'No'.
I do, so I'm going to select the 'Message under images' option and change the text I
want here. Again remember to save your changes. If we go back to the website and refresh you
can see the Magnify effect is now a circle and the text has changed under the image.
To see what looks great on your Zen Cart website, try all the options on the Settings page.
At the top of each page on our website there's a Contact Us link. So if you have any questions
about Magic 360 or any of our other 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.