nopCommerce Tips: Creating a Custom Layout, Part 3 – Plugins, Widgets and Customization, Oh My!

Read Part 2 here!
Plugins and widgets are features that have been introduced to nopCommerce in order to provide additional options for display of products and information, and improvement of functionality for your nopCommerce site. Today, we’ll cover the difference between a plugin and a widget, the plugins that are native to nopCommerce, and some free and commercial plugins/widgets that are available for your nopCommerce site.

The basic installation of nopCommerce includes 42 plugins/widgets. These plugins & widgets are methods of providing the basic functionality of nopCommerce in a modular fashion, and allow additional functionality to be incorporated as needed.  To see the installed plugins & widgets, go to Administration=>Configuration=>Plugins.

nopCommerce Plugin Screen

You’ll notice that on the right of each plugin, there’s a column for “Configure” and “Installation”; after your initial nopCommerce setup, you’ll see that there’s an uninstall link for all the plugins, and a “Configure” link for all the plugins that allow for customization, such as tax rate zip codes (for tax calculation).

The best way to think of a widget is to consider it an instance of a plugin. The first step is to install a plugin according to the instructions the writer of your plugin has included, then configure any settings required to customize the plugin to your needs. The plugin may be accessible through the “Widgets” menu, but is more likely to have more functionality displayed under Administration=>Configuration=>Plugins.

In my current project, my favorite plugins are the Nop Ultimate Plugin Collection (commercial) from Nop-Templates, and the MegaMenu plugin (free). Once I installed the plugins, I selected one of the WidgetZones for each of the widgets (plugin instances) to be displayed.

WidgetZones In Action

Many of the UI-based plugins come with their own custom skins; for instance, the Nop-Template plugins come with two basic skins to coordinate with the two skins nopCommerce ships with. One of the unexpected aspects of customizing them is discovering that all I had to do is rename the plugin theme folder to the same name as the custom nopCommerce skin – no further configuration required.

jQuery-based plugins often leverage the jQueryUI; in order to customize those plugins, use the jQueryUI ThemeRoller to get customized features like the tabs shown below:


Looking for quality nopCommerce Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

One Comment on nopCommerce Tips: Creating a Custom Layout, Part 3 – Plugins, Widgets and Customization, Oh My!

  1. Johny Linkon says:

    It is a very nice tutorial for beginners to start development in NopCommerce.

Leave a Reply

Your email address will not be published. Required fields are marked *