Tip:
Highlight text to annotate it
X
In today's tutorial I'm going to show you how to install Magic Zoom Plus in Magento.
My product image looks flat. So I want to change that from this to
this. Do you see how the image completely changes by having a zoom effect. Add to that
the enlarged option, my image now looks really impressive. To get this effect we need to
go to the Magic Toolbox website. You can also use this video to install Magic Zoom because
the process is the same. Today though we're going to install Magic Zoom Plus, so if we
go to the main product page, you'll see the Magento icon on the right hand side which
will take you to the Magic Zoom Plus for Magento page. Click the download button and save the
zip file to your computer. Extract all the files. And the magic zoom plus folder is what
we'll upload to our server. I'm going to use FileZilla for this. Find the magic zoom plus
folder on your computer and upload it to the Magento directory on your server. This will
take a few moments 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 zoom plus 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 Zoom Plus. To do this enter your Magento website url
and after it enter magic zoom plus. 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. Magic Zoom Plus 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 zoom and enlarge effects. Magento will automatically
resize the large images to fit other areas of your website. Now that Magic Zoom Plus
is installed let's make a couple of changes. First we'll change the zoom size. Then we'll
change the background color around the enlarged image. To do this, go to the Magic Zoom Plus
settings page. Scroll down to the Zoomed Area Width option and I'll change this to from
three hundred to five hundred. I'll change the Zoomed Area Height to four hundred. Scroll
down to the Background section and change the Opacity to fifty. The background color
is defaulted to black. I'm going to change this to red. So if we fresh our product page
you can see the zoom area is now bigger and the enlarged background color is red. There's
so many simple customizations you can make which look really effective. Try all the options
on the Settings page and see what works best for your Magento website. As well as adding
Magic Zoom Plus to your product pages, you can also add it to your CMS pages. First you'll
need to select Yes next to 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 Zoom Plus Integration page.
Under point four of the Installation section, copy the code shown and paste it into your
HTML window. The href reference is the large image which will be your zoom and enlarge
effect. We have the Magic Zoom Plus class and the image source is the small image which
will appear on your web page. So I'm just going to enter my large and small image references.
Click Update And save your page Now if we refresh our home page You can see Magic Zoom
Plus 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.