Tulip Theme Documentation

 

Welcome to the user manual of Tulip theme for nopCommerce. Tulip is a responsive theme developed by nopStation. This document provides all the necessary information to customize a nopCommerce application using the features that come with the theme. The theme comes with 08 plugins that enable these features. The installation process along with a full description of the plugins will be described in the following chapters.

Primary Features of the Theme

  • Responsive UI design

  • Support for RTL languages e.g. Persian, Arabic

How to Install and Enable the Theme

To install the theme

  1. go to Configuration → Plugins from the Admin dashboard. [Demo image]

  2. Click on the Upload plugin or theme button and a popup will appear asking to navigate to the file that contains the theme. [Demo image]

  3. Select the downloaded .zip file named ‘Tulip-bundle’ and click Upload plugin or theme button.

  4. Install and enable all the 08 plugins whose Group name is ‘Nop Station’. Make sure the “Tulip Theme” plugin is installed and enabled.

    1. To get these plugins, search by the group name. [Demo image]

    2. To know how to install and enable a plugin, go to nopCommerce documentation describing this topic.

  5. Disable Nivo Slider plugin to get the expected view on the homepage.

To enable the theme,

  1. go to Configuration → Settings → General settings in the admin panel and

  2. choose Tulip as the Default store theme.
    [Demo image]

To enable the plugins,

  1. Go to the plugins list, [Demo image]

  2. Search the plugins associated to this theme by using the Group Name ‘Nop Station’

  3. Locate and click the Edit button for the plugin to be enabled for example, ‘Ajax Filter’

  4. In the pop-up window, tick the checkbox named ‘Is enabled’ and click Save. [Demo image]

The License Key

After buying the theme, one should contact nopStation for the licence key and it will be sent through an email. The contact info is available here.

If anyone tries to configure the theme or bundled plugins for the first time, s/he will be redirected to a page prompting to enter the Product Key. It can also be entered by going to Nop Station → Tulip Theme → Configure. [Demo image]

How to Configure the Plugins

The theme contains 08 plugins in total. All the features of these plugins will be described in this chapter.

Tulip Theme

The configuration page can be accessed by going to Nop Station → Tulip Theme → Configure. [Demo image] Here, one can set the following properties.

  1. Enable New Ribbon If checked, a ‘New’ ribbon will be shown both in the product box and details page.

  1. Enable Discount Ribbon If checked, a ‘Discount’ ribbon will be shown both in the product box and details page.

  1. Enable Bestseller Ribbon
    If checked, a ‘Best Seller’ ribbon will be shown both in the product box and details page.

  2. Email It is the mail to be shown in the footer.

Ajax Filter

This plugin enables the administrator to customize filters that work on the catalog pages i.e. category details, manufacturer details, and vendor details pages based on the following options

  1. Price range,

  2. Product specifications,

  3. Product attributes,

  4. Manufacturers,

  5. Vendors, and

  6. Shipping options indicating free or not.

Options b, c, d, and e can be set to have checkboxes or drop-down menus from this page. The configuration page can be accessed by going to Nop Station → Ajax Filter → Configure. [Demo image]

 

Blog and News

This plugin allows the administrator to configure the display options on the homepage for Blog and News display. The configuration page can be accessed by going to Nop Station → Blogs and News → Settings. This page enables administrators to set the maximum image size of pictures of blog-posts and news-items where the zero (0) value indicates that the default value would be used. Whether to show blogs and news items on the page or not can be set from here too. [Demo image]

Home Page Slider

This plugin enables the administrators to manage homepage sliders. Sliders can be added, edited, and deleted from the configuration page which can be accessed by going to Nop Station → Home page slider → Manage sliders in the admin panel.

Notes

  • A slider must be saved with a name and a widget-zone before containing any item.

  • Sliders with widget-zone ‘home_page_before_best_sellers’ can have a background image and an Alt text for it.

  • A slider can contain multiple slider-items where each item has a picture, a title, a subtitle, a URL, and a display order.

Mega Menu

This plugin allows the administrator to configure the menu to be shown on the top with multiple levels. The configuration page can be accessed by going to Nop Station → Mega Menu → Settings in the admin panel.

Configurable Features

  • Number of categories to be shown

  • Maximum category level

  • Show the total number of products in a category

  • Show the total number of products in a sub-category

  • Which categories to show

  • Whether to show the category image in the menu

  • Whether to show the subcategory image in the menu

  • Whether to show/hide manufacturers in the menu. If it is set to hide manufacturers, the following options will be hidden in the admin panel. By default, this option is disabled.

  • Number of manufacturers to be shown

  • Specific manufacturers to show

  • Whether to show the manufacturers image in the menu

 

OCarousel

This plugin allows the administrators to customize different carousels to be shown on different widget-zones. The configuration page can be accessed by going to Nop Station → OCarousel → Manage OCarousels in the admin panel.

 

Configurable Features

  • A display order which will be effective if there are multiple carousels on the same widget-zone.

  • Whether 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.

  • A custom CSS class name can be set to be applied on a carousel.

Notes
  • A carousel representing a data source of products type can have a background image. A background image can have the picture itself, a comment to be shown on hover, a URL to be redirected to on-click, and Alt text.

 

Product Picture Zoom

It enables administrators to configure the zooming capability on the product picture in the product details page. The configuration page of this plugin can be accessed by going to Nop Station → Product Picture Zoom → Configure in the admin panel.

 

Configurable Features

  • Height, width, and position of the zoomed image.

  • Application of tint with a specified opacity.

  • Lens opacity.

  • Application of soft focus.

  • Smooth move.

  • Whether to show the title with a specified opacity.

  • Adjustment of the X and Y values.

  • Size of the visible image as well as the full image.

 

Quick View

This plugin enables the administrators to configure the ability to have a quick-view from a product box without actually going to the details page. Its configuration page can be accessed by going to Nop Station → Quick View → Configure in the admin panel.

 

Features

  • Enable/disable the QuickView widget

  • Enable/disable the enlargement to the product image.

  • Enable/disable the ability to show ‘also purchased products’.

  • Enable/disable the ability to show ‘related products’.

  • Ability to set custom CSS class name for the button container.

 

Troubleshooting

If you face any problem or need help installing the theme, please contact nopStation.