For more details see how the Banner Slider for Magento 2 works.
Create an unlimited number of eye-catching banner sliders with no programming skills required. Embed Magento 2 Sliders anywhere in your store. Add target URLs to lead visitors directly to your special offers.
All sliders could be monitored and managed on the sliders grid. Please navigate to Content → Amasty Banner Slider → Manage Sliders to use it.
Here you can use mass actions to enable, disable, and delete sliders from the grid.
Click on the 'Create New Slider' button to configure a new slider.
Slider name - please specify slider name here, e.g. 'Fall sales' or 'Slider with coupon code'.
Status - use the switcher to enable and disable slider. Its status will be automatically updated on the grid in a 'Status' column.
Enable Autoplay - set 'Yes' to enable the automatic slideshow. If switched off, users will have to click on each slide manually to see the next one.
Pause Time Between Transitions - If the Autoplay is enabled (set to 'Yes'), you can specify the time between one slide changes to another, in milliseconds. If left empty, the default value (3500) will be used.
Animation Effect - use this setting to apply animation effects with which the slides transition will occur.
Slide Transition Speed - please specify in milliseconds how fast the animation will be displayed. For proper slider display, we recommend setting a value of more than 1000 here.
To simplify user navigation through the banners on a slider you create, we've added an opportunity to equip sliders with navigation bullets (they show how many banners this very slider contains) and navigation arrows (thus user naturally understands how to see other banners in your slider).
Navigation Arrows - set 'Show' to enable navigation arrows on the frontend.
Arrows Style - stylize slider navigation by choosing from three available arrow styles.
Navigation Bullets - set 'Show' to enable navigation bullets on the frontend.
Bullets Style - stylize slider navigation by choosing from three available bullet styles.
Enable Built-In Lazy Load - Use this setting to optimize your site performance through the optimization of the way how banners are loading. This option applies the Lazy Load effect only to the banners from the second to the last in the slider.
Enable Lazy Load for The First Slider's Banner - Use this setting to enable Lazy Load for the first banner on your sliders, otherwise, Lazy Load will affect all the banners starting from the second banner in the slider only.
Resize Images - If set to 'No', you'll be able to specify banner width only, and the height will be resized automatically. If set to 'Yes' images will be resized in the backend according to the width and height values you set (recommended for a better score on Google PageSpeed Insights).
Width, px - here you can specify the banner width in pixels.
Height, px - here you can specify the banner height in pixels.
Mobile Width, px - here you can specify the banner width in pixels for the mobile devices.
Mobile Height, px - here you can specify the banner height in pixels for the mobile devices.
There's a simplified grid of banners below the configuration settings of each slider.
Here you can:
The banner preview feature helps to quickly navigate through the banners assigned to a specific slider.
There's a separate grid with banners only where you can:
Status - Set 'Enabled' to make banner visible on the frontend.
Start/End date - Here you can limit the slider display time (i.e. your promo campaign time) by specifying a certain period when the slider will be visible for your customers on the frontend.
Name - please specify the name of your banner here.
Visible on - Specify here whether this very banner will be available for both desktop and mobile view or for the desktop/mobile view only. This feature is especially helpful for adjusting the mobile view.
Image Alt - here you can specify the image alt to provide additional information about the image.
Image - upload your banner here. Please keep in mind that supported file types are the following: JPEG (JPG), PNG, GIF.
Target URL - you can specify any URL here so the banner will lead to it by a click.
Link Target Type - Choose how pages will open for the shoppers: on a new window or in the same window.
On Hover Text - here you can specify any text to provide shoppers with more information about the offer and thus motivate them to click on a banner. This text will be shown only on a mouse hover.
Customer Group - please specify customer groups for which this banner will be displayed.
If you configured all necessary settings for the banners and sliders, then it's time to specify where your slider or sliders will be displayed.
Please navigate to the Content → Widgets and click the button 'Add Widget' to create a new one.
Then choose the Magento theme which is applicable to your case and continue configuring a new widget.
Set the widget title, assign a widget to the needed store views, and specify its sort order (Sort Order of widget instances in the same container).
In order to configure the display of a slider widget on a certain store page or pages, please use the 'Layout Updates' settings below the 'Storefront Properties' section.
First, please choose if you want to embed your widget on Categories (anchor or non-anchor), Products (depending on the product type), or Generic Pages. Depending on that choice you'll see the available containers for that type of store page.
As per products and categories you can choose whether to display the slider on all store product/category pages in bulk or on the specific only.
As per Generic pages, there's the choice from three options, depending on which you'll see the unique set of the available containers:
As you're ready with choosing a specific location for the slider display, please navigate to the 'Widget Options' to configure two more important settings:
Show Slider Name - If set to 'Yes', the slider's name will be used as a title of the widget on the frontend. Set 'No' for the slider to be displayed without any title above it.
Slider - please choose that slider the display of which you're configuring.
Click on the 'Select Slider' button to see the vertical curtain with the simplified slider grid with the sliders available for picking up.