You definitely need a Slider for your nopCommerce webshop. Here is why:
Sliders and banners are one of the most important tools to attract your potential customers’ attention and make them stay on pages of your website. A full potential slider and banner-maker can help you to attract more customers effectively.
What does it do?
Ultra slider is a configurable tool and probably the most functional slider plugin in the market. It helps you to create a responsive slider with videos and images (or just as a single banner).
It’s a tool that fulfill all the needs of a store owner to create a full-potential slider:
- You can place it on any page and any section of the page, ( home-page, any category details page, manufacturer pages, any product detail page, any blog post, etc.).
- you can schedule it to show whenever you want and only to customers that you want them to see it.
- You can choose to have next/prev buttons, bullets at the bottom of slider, the moving style.
- Also you can adjust the speed and auto-play settings.
This Slider, because of its numerous features is the ultra silder.
what is a full potential slider? A slider that allows you to:
- Make a slider with both images and videos
- place them in any page that you want (even a specific category, manufacturer, product pageor any blog post)
- place them in any section of the page (by widget)
- show to customers only on scheduled days and hours
- Capable of making a single banner by putting 2 or more pictures next to each other in one slide
(This pictures shows a slider with 2 pages and 1 of the slides consists of 2 different pictures)
- show them only to specific customers, such as: specific roles (only guests), specific gender (only females), date births (customers who are born on November), state/province, name, IP address, etc.
- each image or slide could be redirected to a different page.
- having specific slides for different languages
- having as many as images and videos that you want
- define a title or caption for each slide
- choose to have next/pre button or pagination dots
- define the action for moving the slides in desktop, smart phones and tablets (options such as: Mouse drag, Touch drag, etc.)
Other Features & Specifications
- easy admin panel interface
- fully Responsive
- unlimited numbers of sliders
- Supports RTL
- Support multi-store
- Compatible with different versions of nopcommerce – from 3.8 to 4.2
How To Use
Step 1: If you have installed the plugin, you can activate the license by going to this address and entering the license key:
Administration area > Plugins > Ultra slider > configuration
If you need a guide to install the plugin, please go to the Download & installation tab (above this instruction).
Step 2: To create a new slider, please go to this address:
Administration area > Plugins > Ultra slider > Manage carousel sliders
Click on the Add new button to see the window below:
In this page, there are several tabs which let you customize your slider as you want. By defining the Title and saving the page, you’ll be able to access the other tabs.
1.Carousel slider Info
Tile – a title for the slider. It only appears in Manage carousel sliders page (not the public shop). to access the other tabs, you need to enter a name for the slider here and save the page.
LanguageId – If your website is multi-language, you can define different set of slides for each language. By clicking on this drop-down menu, you see a list of website’s languages and you can choose one. If you choose a specific language, the slider would appear only in the pages of that specific language.
If the language is not important, choose the “All” option.
Items – you can choose the number of pictures per slide. For example you can have 2 pictures in 1 slide (and every picture could have its own URL or not.)
Please note that the default value of this field is 3. If you need only 1 picture per slide, set the value as 1.
Please note that if you are using more than one picture per slide, it’s better to use pictures with the same height.
Margin – if you are using 2 pictures per slide (or more), you can add right margin to your pictures. You can specify the value of right margin in this field.
Loop – If this checkbox is active, and a user is clicking on navigation buttons or you have set the slider on autoplay, then the slider will show all the slides one after another and repeat the slides. There will be no end for the slides.
Center – to centralize all the pictures of a slider. In other words, activating this option let the system to make an integrated picture from all the pictures you have uploaded, so you can see them like the attached wagons of a train. ( These pictures show the first and second slides of a centered slider.)
Mouse drag – if this option is not active, users won’t be able to change the slides by dragging them.
Touch drag – if this option is not active, then users won’t be able to change the slides in touch screens by touch-dragging them.
Free drag - If you want your slider goes to the last slide in case of draging it, ( no matther which slide is showing) you can activate this option.
Stage padding – By setting a value more than zero for this field, you can give a glimpse of the next slide to your customers. By increasing the value, the next picture will be larger in width. ( e.g.: the stage padding for the in picture below is 200 pixel)
Start position - you can choose the slide that you want it to be the first slide appearing on users' screen. for example, if you want your second slide to be the first slide, you can type "2" in the text box.
Nav – If this box is checked, then the next and previous buttons (navigation arrows) appears on the slider.
Rewind – If this option is active, and user reaches to the last slide by clicking on the navigation arrows, it goes back to the first slide. Else, by reaching to the last slide, the next arrow becomes disabled.
Please note thatThis option only works when the Nav box is checked.
Slide transition- you can choose your desired transition of slides.
Dots – If this box is checked, then the bullets to show the number of pagination ( pagination dots ) appears at the bottom of the slider. ( the picture below shows a slider with both dots and navigation arrows)
Lazy load - Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not <img>
Autoplay – If this option is active, the slides move automatically.
Autoplay timeout – you can specify for how many seconds a picture must stay on the screen. For example, if you set the value as 5000, each slide will have 5 seconds to stay on the page. After 5 seconds, it moves automatically and the next slide appears.
Autoplay hover pause – if you want a slider that automatically moves, but you want it to stop whenever a user hover the mouse-pointer on the slide, you can check this checkbox.
Autoplay speed - you can specify the speed of slides’ movement. For example, if you set the value as 500 milliseconds, it will take a slide half a second to move. (transition time)
Nav speed – transition time for when a user is clicking on the navigation arrows ( next / prev buttons)
Rtl – if this option is active, then the slides will move to the opposite direction.
Active – if this option is active, then the slider will appear on your shop.
Limited to stores –If you have a multi-store system and you want a specific slide for your specific stores, you can choose the stores here.
In this tab, you can upload the image slides that you want to show to your customers.
Click on the Add a new image to see this window:
In the Pictures section, you can upload the image you want to show as a slide.
Also you can set the display order and choose the visibility state of it.
In the next section, you can enter an URL in the “Redirect to” field. In this case, the users will be redirected to the URL you have set by clicking on that slide.
Also, you can add a caption to your slides.
In the Videos section, you can upload the videos you want (on the server) to show as a slide.
OR you can enter the address of a video from Youtube or Vimeo that you want to show as a slide.
Click on Add a new video button to see this window:
Display order – you can choose the order of display for this video among all the pictures and videos.
Visible - You can choose the visibility state of this video in the set of slides.
Load video from a vimeo or youtube url – if you click on this option, a section will open that asks you to enter an URL of an uploaded video in Vimeo or Youtube.
Upload or select a video file - if you click on this option, a section will open that asks you to enter the URL of a video that you have uploaded on the server. You can upload or choose a file by clicking on Click here to select a file.
In this tab, you can choose the type of the page (category, manufacturer, product, etc.) and the section of the page that you want to place the slider. Click on add new record to choose from the available options.
Please note that if you want to show the slider on just a specific page (e.g. a specific product page, category page or a single post) you need to go to the Display in pages tab.
In this tab, you can make a group of customers and show the slider just to this group. For example, you have a special set of slides for your guest users. Or you have dedicated a section of your site to promote a product to the female or male customers of your web shop.
To do so, you should make a data source and then, choose that data source in this page.
To make the data source, click on the bule link under the Data source field. (Click to go to dynamic data list page)
You would be navigated to this page :
In this page, a list of dynamic data sources is accessible. As you can see in the picture above, there are two data sources with the entity type of “category” and “customer”.
To create a new data source, click on the Add new button.
By filling the fields in this page, you can make a dynamic group of your customers ( or any other entity in the shop) by making a query and specifying essential rules to it.
Name – enter the name of your dynamic data source in this field. This name is a system name and won’t appear in the public shop.
Entity type – you can choose between these entities from the drop-down menu:
- Blog post
By choosing any of this options, a list of results will appear at the bottom of the page. For example, if you choose customers, you will have a list of all of your shop’s customers and if you choose product, you will have a list of all of your products.
By building a query, you can narrow the list to customers or products with your favorable specifications.
Note 1: If you choose an entity and save the page, you can not change the entity of that specific data source later. You’ll need to make a new data source if you want to have a different list.
Note 2 : Only data sources with the entity type of “customer” will appear in this drop down menu.
Dynamic query builder – you can make a query and narrow your list of results. To do so click on the add new rule or add new group. You can generate as many as rules you want and you can specify the relation between them by And / Or. For example, we want to create a slider only for female customers which are born on October. To do so, add a new rule, choose gender. Two new field appears. Choose them as “equal” and “ female”.
At the end, we will have a query as the picture below:
Dynamic sort rules – you can sort the results by this field. For example you can sort the customers by their first name:
(Please note that the available options of this drop down menu is according to the entity type. For other entity types, we will have different option.)
Click on Apply filter button and then go back to the carousel slider page. Now by clicking on the Data source field, we can see the data source that we created earlier.
And by clicking on the name of data source that we want, a list of results ( in this case, a list of female customers who are born on October) will be shown in the next section.
6.Display in Pages
If you want to show your slider on specific pages, this tab is where you can set it. To do so, click on the Add new record.
A window as bellow opens:
You can choose a type of page in the first dropdown menu. The available options are:
- Blog post
In Data source menu, you can choose a data base. As we described in the last section, you can make a query of your favorable results and use it as your data source. For example, you want to show the slider in specific categories, specific blog post, etc. you can make a data source by clicking on the blue link ang going to the data source list page.
In this tab you can schedule a slider to be shown at specific times.
Active – if you want to active this feature, tick the checkbox.
From date / To date – you can choose the dates and duration for presenting the slider.
Schedule pattern type – you can show the slider in your shop as monthly, weekly or daily.
Hour range start / Hour range end – You can choose the time of day which the slider is going to be presented by system.