In this video, I'm going to be showing you how you can improve the conversion
rate of your eCommerce website by adding better quality images and also a zoom
functionality. Now here is a quick demo of what we will be doing. Here is the
eCommerce site that I’ve built in WordPress. On the product page as you can see,
if you select another thumbnail, it pops out in this lightbox feature. You can
scroll through. Now this is pretty nice, but there's a better way to do things. If
I jump onto this tab here, this is the web page after I have installed a zoom
plugin, which I will be showing you step-by-step how to do in this tutorial.
Now I can actually … when I … First thing when I select a product … a different
product image, it actually comes up in the area above. Furthermore, when I hover
over that product image, it actually gives me a beautiful zoom. So that the
users can actually see the finer details of your products. That's extremely
hopeful for people purchasing things from your eCommerce website. So I'll be
showing you how to implement this onto your eCommerce store. If you haven't
already, go and watch my tutorial on how to setup an eCommerce website using
WordPress. I'll be showing you step-by-step how to setup and how to add
products and receive payments via your own eCommerce website. So check that out.
I’ll leave a link in description below.
Okay. Let's log into our WordPress dashboard. Now go to Plugins. Click on the
Add New button. We want to add a plugin called YITH Zoom Magnifier. So if
you just search for that, you should see this one here.
Install Now, and Activate this Plugin.
Okay. Now if I go to my site and view any product, you'll see the difference
immediately. You'll see there was a little loading notification there. Now
when I hover over the image, I can see it zoomed in in greater detail. Just like
that. It's very very good. It's very clear./ Of course, the better your photos, the
better the quality, the better the zoom effect will be. It will be much more
clear and much more crisp. So anyway, let's go back in now, and you should see a YIT Plugins
area. Let's click on Zoom Magnifier.
There are a bunch of settings, which I will take you through. First, yep, we want
to activate this plugin. Enable that. We want to activate it on a mobile device.
Now if you get your mobile phone out, you can see how that works.
Yes, we want to force the image size. Now I strongly recommend you not to disable
this, so leave that ticked. Here in the magnify settings, for image size, this is
the size of the images used in the magnified box. So I am going to actually change
mine from 600 to 700 by 700, slightly larger than what you're seeing
here. The zoom box position, Right. You can change that if you want, so that the
zoom appears on the inside. Now let me just show you, as I go through this, what
change that makes. So it's crystal clear for you. So I’ve made that change. I'm just
refreshing my site, and that's what it looks like when the zoom functionality
is within the original box. So it's completely your choice if you want it to
appear on the inside or if you want it to appear on the outside. Now I have seen a
lot of eCommerce stores, which have both of these methods. So feel free to choose the
one which you think would be best for you. There is no right answer. It
completely depends on your personal preference. Then, you can
select a Zoom Box position for mobile devices as well.
Default Inside or you can Disable the zoom completely. Let's leave that as
Inside. Loading label, now when I load up a new image, you'll see for a split
second there is a notification that says loading. Now you can change that wording
if you like. I’ll leave Lens Opacity and Blur as is default. I’ll leave blur disabled. Now
back into the Slider Settings. Yes, I want to activate the Thumbnail Slider. That is
this part over here. So you'll remember previously, it was slightly different.
Previously when I clicked on one of these images, it would open in a lightbox.
But now when I click on one of these, it actually opens within this window here.
If I had more images, I’d be able to browse through with the left and right
arrows. I will leave everything else as default, and then save changes when
you're ready. Now I like my Zoom on the outside. So I'll keep it on the right
hand side. I'll save my settings, and I'll refresh my page. So there you go. If you
have any questions, please do ask in the comments below, and please thumbs up this
video and subscribe to my YouTube channel for more awesome stuff on
improving your eCommerce store and conversions. Speak to you next time.