Back to Table of Contents

Configuration (Optional)

Once the Nop JCarousel plugin is installed it is by default configured to be integrated to your website using predefined widget zones. If you want to show the Nop JCarousel in a custom widget zone, please follow the steps in this lesson.

1. Add a custom widget zone and add the Nop JCarousel to it

a) Add a custom widget zone

If you want to add the Nop JCarousel to a specific part of the Home page, you need to add a custom widget zone to the Index.cshtml view.
To add a custom widget zone, use the following code:

@Html.Widget("custom_widget_name")

Instead of "custom_widget_name" add the name of your custom widget zone.

After doing this, the Nop JCarousel will be shown where you have added the custom widget zone, in this example - after the category navigation. But before that you need to complete the steps below.

NOTE: You can add this custom widget zone on multiple pages, and use it for multiple carousels.

b) Add the custom widget zone to the Nop JCarousel

To use the custom widget zone in the Nop JCarousel plugin you need to do the following:
Open the SupportedWidgetZones.xml file located in the folder of the Nop JCarousel plugin.
Add a new row like the one shown in the picture above. Replace the custom_widget_name with the name of the widget that you have created.

<WidgetZone>custom_widget_name</WidgetZone>

Save the file and restart your application.

c) Set up the Nop JCarousel to work with the custom widget zone

To add the Nop JCarousel plugin to your custom widget zone, please follow the steps below:

  1. Go to an existing carousel or create a new carousel.
  2. Go to the Widgets tab.
  3. From the Widget Zone drop-down select your custom_widget_zone.
  4. Click the Add new button.

Your carousel is now added to your custom widget zone. It will be shown only on the pages, on which you have added your custom widget zone.