How to Add Zoom to a Product Image – Hotcakes Commerce Support by Upendo Ventures

OVERVIEW

We have all been to e-commerce sites that have and haven't allowed you to get a better view of a product before purchase. The smaller the image size or the worse quality the image, the less likely a customer will convert to a sale on that product. This problem will be even more apparent for every dollar more that they have to pay.

Adding the ability to zoom in on a product image is not only easy to do, but it can give your customer that much more confidence in the product and your brand. Just be sure that you do your due diligence in implementing such a feature, because some products or product images are more geared for this feature than others. For example, a logo as a webinar product image benefits very little from zooming in.

REQUIREMENTS

The following pre-requisites will be necessary to accomplish the goals of this article:

Have one or more products with images added
Have store administration access in your Hotcakes Commerce store
Have file system access to your store
Familiarity with how to modify and create views
HTML & CSS knowledge
Familiarity with scripting methodologies or an understanding of Razor Syntax
Visual Studio 2012 or newer (only required for intellisense)

It is highly suggested that you first review the custom viewsets documentation prior to following the steps in this article. Doing so will help you understand the steps required here better.

GETTING STARTED

You should already have an understanding of how to work with and modify or create views in Hotcakes Commerce. Ideally, you should also have a viewset project ready for you to make the minor modifications suggested here.

Product Images

This is sound advice regardless to whether you decide to zoom in on your products or not. You should upload a web-friendly high resolution image for each of your product images, but especially for your primary product image. Hotcakes does the hard work of resizing the image to meet the needs of your store, and part of that is reducing the size. This always results in a lower quality image than you began with.

It is probably a good idea to keep the width and height of the image to less than 1000 pixels. Also, all product images should be the same aspect ratio for the same product to achieve the best end result. For example, if one is square, all should be square and not rectangular. If one is rectangular, all should be rectangular in the same way.

In the case of images being used for the zoom, this concept is even more important. When you zoom in on a product image, it is not usually the image that you're currently looking at that you're zooming in on, but rather a larger and higher quality version of that image. If you don't have a high quality image uploaded, your customers will instantly notice.

We suggest creating and uploading the high resolution images before proceeding with the instructions below.

Zoom Plugin

There are numerous plugins that you can use to implement the zoom feature in your viewset. We are going to use one called Elevate Zoom, but feel free to use any other plugin that you prefer. You may need to make some adjustments to the steps below if you do.

Whichever plugin you choose to implement, please download it to your computer before proceeding.

INCLUDING SCRIPTS

Every viewset can have its own custom or third party scripts included. It's completely up to you as to which ones you need to include. Regardless to the scripts that you want to include, you will want to always save them in the same place, which is the folder listed below.

~\Portals\_default\HotcakesViews\YOURVIEWSETNAME\Scripts\

If you include your scripts here, we make it incredibly easy to include those scripts in your view. See the saved plugin script below.

Elevate Zoom plugin in the correct directory of the viewset project

UPDATING THE PRODUCT VIEW

There are views for each customer-facing piece of functionality, including the Products view. The products view is similar to others in that there is a main view and then a few smaller “partial” views that are injected into the main view named Index. In this example, we will be updating the Index.cshtml file for the Products view.

PLEASE NOTE: Do not make changes to the views in the _default viewset. Your changes will be lost on upgrade.

Open the Index.cshtml partial view in your custom viewset project, found in the following location in your viewset project.

~\Portals\_default\HotcakesViews\YOURVIEWSETNAME\Views\Products\Index.cshtml

Using Reference

The first update that we'll ask that you make is to simply add a reference for another line of code that we're going to ask you to write. If you don't include this using statement, the following step will not work.

Put the code below into the header area of your view. You should at least have a @model line in your file, at or near the top. It's fine to put the line below or above that line of code.

@using Hotcakes.Modules.Core.AppCode

Register Script

Now that we have the first pre-requisite, we need to add the second and final prerequisite, which is the jQuery plugin. The code below simply requires that you pass in the file name, provided that you saved a copy of the script file in the location described above. It is probably a good idea to include it above in your design.

This is the most efficient way that we would suggest adding any script, as it takes advantage of performance settings available in the underlying CMS.

@Html.RegisterViewScript("jquery.elevatezoom.min.js")

Update Image Tag

The image tag will need a minor adjustment to it for the zoom to be able to find the original or high resolution product image. Each product will have at least one image uploaded and this image is saved in 4 sizes. The first size is the original, and the next size down is 440 x 440 pixels at the largest. The latter is called "Medium" in the API and is what a customer sees in the default viewset that Hotcakes ships with. The zoom plugin will take advantage of the original size when zooming.

You will want to add the data-zoom-image attribute as seen in the example below.

@* Find the tag that looks like this *@
<img id="hcProductImage" src="@Model.ImageUrls.MediumlUrl" alt="@Model.ImageUrls.MediumlAltText" /> 
@* Update the tag to look like this *@
<img id="hcProductImage" src="@Model.ImageUrls.MediumlUrl" alt="@Model.ImageUrls.MediumlAltText" data-zoom-image="@Model.ImageUrls.OriginalUrl" />

Call the Script

Now that all of the pieces are in place, all we have to do is call the script to make the zoom happen. This update is again going to be very simple. We are going to call the Elevate Zoom plugin once the page safely loads, specifying the main image as the image to use.

The code example below shows a script added at the bottom of the view.

<script type="text/javascript">
    $(document).ready(function() {
        $('#hcProductImage').elevateZoom();
    });
</script>

That's all there is to it! Elevate Zoom makes this process very painless. See the example image below where we used a slightly different setting of Elevate Zoom to use the lens zoom type.

Zooming in on a product in Hotcakes

MULTIPLE IMAGES

If you're like us, you'll probably next want to take this to the next level. When a product image is switched after the customer hovers over one of the additional images, you'll want that image to zoom instead. In order to support this, you'll simply want to change the src and data-zoom-image attributes using jQuery as part of the built-in event that switches the main product image.

If you do, simply want to make the necessary changes in the Product.js file in the same Scripts folder as your new zoom script. Exactly how you implement this will vary slightly from use case to use case.