OCarousel Documentation

The good old product carousel is beloved by many. Carousels, let's face it, are attractive and save a lot of web space. You can create carousels of Featured Products, Bestsellers, Recently Viewed Products, Also Purchased Products, and much more with the OCarousel Plugin for nopCommerce, and show them on any of your website pages. Furthermore, the plugin now shows product item boxes. You will not be disappointed if you ride the nopStation OCarousel. The OCarousels Plugin allows you to configure which carousels appear in which widget zones.

You may create different carousels with the OCarousel Plugin for nopCommerce, and show them on any of your website pages to give the users a wonderful view


  • Choose from a lot of pre-configured data source types, including Featured Products, Bestsellers, Recently Viewed Products, Also Purchased Products, and more
  • It supports DefaultClean themes. A custom CSS class name can be set to be applied on a carousel if needed
  • A display order which will be effective if there are multiple carousels on the same widget-zone
  • It supports views and styles are open for modification
  • It will support all the browsers
  • The carousels should slide automatically
  • The number of items to be shown at a time
  • The sliding direction. By default, it is set to left-to-right but can be configured to be right-to-left
  • The product carousel can be shown on any page and in any widget zone
  • In a carousel, you can choose the maximum number of things to include as well as the number of viewable objects.
  • Makes the homepage more attractive
  • Easy to set up


  • The plugin requires you to install the Nop-Staion Core plugin first.


  • Download the OCarousel Plugin from our store https://nop-station.com/customer/downloadableproducts
  • Upload the NopStation.OCarousel zip file using the "Upload plugin or theme" button
  • Go to Administration, reload the 'list of plugins'.Install 'Nop-Station Core' Plugin first and then install 'Nop-Station OCarousel'
  • To make the plugins functional, restart the application
  • Enable the plugin with 'Edit' option and Configure it


  • Go to Admin ≫ Nop Station ≫ Plugins ≫ OCarousel ≫ Configuration
  • Enable carousel: Check enable carousels to enable the plugin


  • Go to Admin ≫ Nop Station ≫ Plugins ≫ OCarousel ≫ List "
  • In this section you can show your list of active and inactive carousels
  • On the top you can search carousel by three fields Active, Widget zones and Store


  • Create: To create a new carousel, go to carousel list page Admin » Nop Station » Plugins » OCarousels » List and then click Add new button
  • To edit an existing carousel, click on Edit button from carousel list table


  • Name: This is the name of the carousel and is a required field. It is needed so that you can separate your carousel from each other as you can have as many carousels as you want
  • Title: Specifies a title that will display before the Carousel on the public store
  • Display Title: If you want to display the title on the home page then select this field
  • Widget zone: From the Widget Zones you could choose the locations in which you want your slider to appear in your public store. If you want to add the slider to widget zones, click the drop-down and select your desired widget zone
  • Background picture: If you want to play carousel with a background behind, you can put a background image
  • Data source type: Set a predefined type of data that will populate the Carousel plugin
  • Number of items to show: This is number of showing item field where your can put desired number of items that you want to show
  • Display order: This is a display order is the order list of the Carousel
  • Active: Determines whether Carousels will be active


  • NAV: By checking this property, it will display next/previous button on slider. If you want to hide these buttons, uncheck it
  • Autoplay: By checking this property, it enables auto play
    Auto play timeout: It defines the duration of slider autoplay interval timeout (in miliseconds)
    Auto play hover pause: It defines whether the slider autoplay will be paused on slider hover
  • Lazy load: Check to image lazy load for carousel items
  • Lazy load eager: Specify how many items you want to preload images to the right and left when the loop is selected
  • Start position: Where you want to start your product to start
  • Margin: Give the margin value in pixel. It will be reflected on Carousel design
  • Loop: Check this property, if you want to continue autoplay
  • Center: This is center position field. It works well with even and odd numbers
  • Custom CSS class: You can write your own CSS