
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