Documentation
Back to website >

Quick Tabs Documentation

Nop Quick Tabs allows the products in your nopCommerce web site to contain content\information tabs that can be mapped to single products, all products in a category or all products for a manufacturer. The tabs are developed using the popular JQuery UI Tabs plugin, which also brings powerful theming capabilities.

Live DEMO - see how the Nop Quick Tabs plugin would look like in your public store.
Admin DEMO - see the plugin administration.

With Nop Quick Tabs you can enable default product information like Full Description, Specifications, Reviews and more to appear in Product Tabs for all products in your store or define custom tabs for each product.

Certain tab will only appear if there is information for it. For example if you have enabled the Specifications tab, but on some product you do not have specification, the tab won't appear on this product page, but if you add specification to your product the tab will appear.

Settings

From the Settings section you could manage the plugin settings, default Product Tabs, and whether or not to use Ajax to load Tabs content.

With Nop Quick Tabs you can specify the following product characteristics to appear in Product Tabs for each product:

  1. Full Description - this tab contains the product's full description as it is set for the product.
  2. Specifications - this tab contains all product specification that are marked as show on product page.
  3. Reviews - this tab contains all existing reviews for the product and allows the customers to add new reviews.
  4. Contact Us - this tab allows you to show a contact us form on product page.
  5. Attachments - this tab allows you to show the Attachments on product page as tab.

    Note: You would need to have Product Attachments Plugin installed.
The Enable setting is used to enable your tabs. Every tab has one and it allows you to have any combination of tabs on product pages as you like.
The Display Order setting is used to set a position for the tab. The tab with the lowest display order will be displayed first and the one with the biggest display order - last on the product page.

Attachments Tab

To add a product attachment tab you will need to have the Attachments Plugin installed and to enable the Attachment tab from the Plugins -> Nop Quick Tabs -> Settings.

  1. Enable Product Attachments tab - Check this setting if you want to enable the Attachments Tab.
  2. Attachments tab display order - This setting will allow you to choose a sorting value for your Attachment Tab, relative to the sorting value (Display Order) for the other tabs.

After you enable the Attachments tab you would need to add your attachment to specific widget zone - as you can see from the documentation for Widget Zones of the Nop Attachments Plugin.

You would need to add the attachment to quick_tab_product_attachments_tab widget zone if you want it to be displayed as quick tab.

Defining custom product tabs

With Nop Quick Tabs you can define your own custom tabs. For example a "Computers Buying Guide" tab, which will contain instructions for customers when choosing a computer.
You can manage custom tabs from the Admin panel by going to Plugins -> Nop Quick Tabs -> Manage Tabs.
From there you can add new tabs, edit or delete existing ones.

With the Display Name you can set your tab name in the public area.

In Description you can set your tab content. In here you can add almost everything - video, images, text, links and many more. You could also add formatting to your custom tab content. By going to Tools -> Source code option in the editor you could edit your tabs markup itself.

You could also map your custom tab to certain product or products matching certain condition. You could also display your tab on every product page. With the display order you could specify the exact position of your custom tab, among the other tabs.

Conditions

In the Conditions tab you can specify conditions that define on which product pages your custom tab will appear.

To go to this tab you must select the Automatically select products based on conditions option from Select products setting in the Tab Info.

You could find more information of how the conditions work in the following article - Conditions.

PRODUCT OVERRIDES 

From the Product Overrides tab you can include or exclude products regardless of the conditions. For example if you add a product with the include state, the tab will be shown on that product page, regardless of the conditions. If you add a product with the exclude state, the tab will not be shown on that product, regardless of the conditions.

To go to this tab you must select the Automatically select products based on conditions option from Select products setting in the Tab Info.

You could find more information of how the product overrides work in the following article - Conditions.

Product Mappings

From this tab you can specify exact products on whose product pages you want your custom tab to appear.

To add a new product mapping click the Add A New Product button on top left corner on the grid. When you click the button a popup will appear from which you can select the products on which you want to display your custom tab.

Adding custom product tabs to a product

After you have defined your custom product tabs, you can add them to a product.
To do this, you can do this by using the Product Mappings, Conditions or Product Overrides. You could also do it from the product edit page. 

Go to Catalog -> Products -> Manage Products. Find your product and click edit. In the grid you will see a tab named Tabs. If you click on it you will see two grids showing the custom tabs that are already mapped to this product. From here you can easily control the tabs mapped to the current product. You can also add New or Existing tabs to this product by clicking on the respective buttons located at the top left corner.