Once the Nop Cloud Zoom plugin is installed you need to integrate it in your web site. You have two options for this: Automatic or Manual.

1. Automatic Integration

WARNING: The Automatic Integration of the Nop Cloud Zoom does not work with Nop Quick Tabs' Automatic Integration. You can use only one of them at a time.
If your are working of the default NopCommerce installation and the Dark Orange theme and you have not done any modifications to the layout of your nopCommerce web site, then
you can use the Automatic Integration option of the Nop Cloud Zoom. To enable this option, from the Admin panel:

a) Go to Plugins -> Nop Cloud Zoom-> Settings

Go to the Nop Cloud Zoom Settings and make sure you check the Enable Automatic Integration checkbox at the bottom and then Save. Note that you also need to have the Cloud Zoom plugin enabled, so make sure you check the Enable Cloud Zoom checkbox too.

2. Manual Integration

If you have done modifications to your nopCommerce installation, for example you have a customized the ProductTemplate.SingleVariant.cshtml and/or ProductTemplate.VariantsInGrid.cshtml Views,
you need to integrate your Nop Cloud Zoom manually. To integrate your Nop Cloud Zoom manually:

a) Make sure that the Enable Automatic Integration option in the Nop Cloud Zoom Settings is Unchecked.

b) To integrate the plugin you need to edit the Views\Catalog\ProductTemplate.SingleVariant.cshtml and Views\Catalog\ProductTemplate.VariantsInGrid.cshtml views.

Add the following line of code right under the <div class="product-details-info"> div tag replacing

@Html.Partial("_ProductDetailsPictures", Model):

with

@Html.Action("CloudZoom", "CloudZoom", Model)

and if you want to use the 'element' Zoom Type, add the following line of code right under the <div class="overview"> div tag:

<div id="cloudZoomWindowElement" style="position: absolute"></div>

For example:

Before the manual integration

After the manual integration

 

Congratulations

Your Nop Cloud Zoom plugin should now be successfully integrated.

After installing and integrating the Nop Cloud Zoom plugin you can change the various settings of the Nop Cloud Zoom by going to the Admin panel and choosing the Plugins -> Nop Cloud Zoom -> Settings menu.