...
On Slider Setting section:
- Enable or disable the slider/ banner
- Slider/ Banner Name: insert the name of the banner/slider
- Type: Choose Banner's type
Banner
Single Slider
2 Sliders with Synchronized Transition.
- Active From Date: Choose the day to activate the banner/slider.
- Active to Date: Choose the day to deactivate the banner/slider.
Add custom CSS there to style your new banner
...
- Click on the Edit icon next to the Banner Container
- Image File: Upload a new background image for the banner.
Please note that you can only upload the image with png, .jpeg, .jpg. format with a maximum size of 2MB
- Image (mobile) File: Upload a new background image for Mobile Please note that you can only upload the image with png, .jpeg, .jpg. format with a maximum size of 2MB
Note: you can choose custom upload or Select from Gallery.
- Background Image Attribute
- Padding and Margin: adjust the dimension of the banner according to your requirement. View the effects of your changes on the demo banner on the left side.
- Choose Category: select one category on the drop-down list to get data for the banner.
- Banner/Slider URL: You can fill in a URL under the http/https, ftp format to redirect users to an external link when they click on the banner.
- Opening Banner/Slider URL in a new tab: Choose Yes to set when users click on Banner with URL, there will be a new tab
- Custom Class: enter the name of the custom class which is defined on the Banner Configuration.
Custom the Banner Content
Click on the Edit icon next to the Banner Content
- Animation: Choose banner content animation.
There is a wide range of options for you to select according to your needs
- Animation Delay: Set the time (per second) to delay the banner content's effect.
- Width, Height: Set size for the content of Banner
- Padding and Margin: Adjust the dimension for the banner padding and margin to fit your requirement.
View the effects of your changes on the demo banner on the left side.
- Background Color, Opacity: Choose the background color for the content of Banner
Custom the Content Box
If you click on the Edit icon in the Content box, you'll be able to configure the content.
- Type: You can select Button, Text, or HTML
If you select HTML you'll be able to edit the banner button according to the image below
...
Once you select the Text type, you'll be able to configure the banner text like the image below
On tab Slider Position:
- Design Theme
- Assign to Store Views
- Sort Order: Select the order to display the banner/slider on the front end
- Layout Updates: Set up the banner/slider position
Create a Slider
Under the quick preview box, click on the Add New Slider Item button to add the number of sliders that you expected.
Click on each Slider Item button on the left to configure for each slider.
On Slider Configuration:
- Items/Slider: choose the number of slider items that will appear at the same time in a slide.
- Slider Animation: Choose Slider animation
- Animation Delay (s): Set the time (per second) to delay the slider's effect.
- Margin (Spacing between items): set the distance between the slider items. The unit for space is Px.
- Arrows: display the switch button aside.
- Dots: display the dots on the slider footer when switching the sliders.
- Auto Height: synchronize the height of slider backgrounds with different sizes. The largest height will be set as the default height.
- Loop
- Auto Play
- Draggable
- Center Mode
Under Style Configuration
- Custom Class: Enter the name of the custom class that is defined in the below section.
- Custom CSS: define the custom CSS to style the slider.
On Item Configurations and Item Content Configurations, please refer the instruction for this part of Banner Settings
...
The item on one slider will be displayed at the same time as the item in the same order on the other slider. For example, slider item 2 in slider 1 will be displayed with slider item 2 in slider 2 at once.
Import Banner/Slider
On the Admin sidebar, choose System > Data Transfer > Import
...
On the Import page
- Import CVS or XML file
- Download Sample File: You can have 10 sample templates with attractive-design layouts.
If you choose the Single Slider type:
There are some additional settings besides that in the banner setting.
Under the quick preview box, click on the Add New Slider Item button to add the number of sliders that you expected. Then click on each Slider Item button on the left to configure for each slider.
- On Slider Configuration:
- Items/Slider: choose the number of slider items that will appear at the same time in a slide.
- Margin (Spacing between items): set the distance between the slider items. The unit for space is Px.
- Then adjust the layout effect for the slider.
- Arrows: display the switch button aside.
- Dots: display the dots on the slider footer when switching the sliders.
- Auto Height: synchronize the height of slider backgrounds with different size. The largest height will be set as default height.
- Loop
- Auto Play
- Draggable
- Center Mode
- Under Style Configuration
- Custom Class: Enter the name of the custom class that is defined in the below section.
- Custom CSS: define the custom Css to style the slider.
- On Item Configurations and Item Content Configurations, follow the instruction above for this part of Banner Settings.
If you choose 2 Slider - Slider Syncing type:
- In this option, there will be 2 default sliders created. These sliders will be displayed on the front end at the same time and interact with each other.
- On each slider configuration, click on the Add New Slider Item button to create new slider items. Note that when a number of slider items created on one slider, an equal number of slider items will be generated automatically on the other slider.
Set the Slider Configurations following the instruction in the image
- Slider Item configuration
- Slider Item Content configuration
- Content configuration
Note:
- There will be a number of slider items created automatically on one slider that is equal to the number of slider items added on the other slider.
- The item on one slider will be displayed at the same time as the item in the same order on the other slider. For example, slider item 2 in slider 1 will be displayed with slider item 2 in slider 2 at once.
To add a Banner/Slider Widget
On the Admin sidebar, go to Content > Widgets > Add Widget.
On the Widget configuration page.
- Type: Category Slider
- Design theme: Magento Luma
- Then click on Continue
On the Storefront Properties
- Widget Title: Enter the name of the widget to be displayed on the backend
- Assign to Store View: All Store Views
- Sort Order: Select the order to display the banner/slider on the front end
- Layout Updates: Set up the banner/slider position
- Choose Slider: Select the banner/slider you want to add to the storefront
- Active From Date: Enter the day to activate the banner/slider. Format YYYY/MM/DD
- Active To Date: Enter the day to deactivate the banner/slider. Format YYYY/MM/DD
Note: Active To Date value must be greater than or equal to Active From Date value and Active From Date value must be greater than or equal to the current date
Report Clicks Banners/Sliders
- Entity Type: Choose Banner Slider import
- Import Behavior: Choose Type Import
You can download the sample file with clicking Download Sample File
Click Choose File to select the file to import.
Find the CSV file that you prepared to import and click Open.
After that, click Check Data button
Wait a few moments for the validation process to complete.
If the import data is valid, the following message appears:
If the file is valid, click Import.
The import process continues to the end of the data unless an error is encountered.
Report Clicks Banners/Sliders
On the Admin Sidebar, go to Banner Slider > Reports Click Banners/Sliders
On On the Report page, the admin can see the Slider Name, Clicks total, and Click Date.
One IP address can only be counted as one click.
On On Storefront
Banner
...
Single Slider
...
See more in here
- 2 Sliders - Slider Syncing
...
Sliders with Synchronized Transition
...
Update
- When a bug fix or new feature is released, we will provide you with the updated package.
- All you need to do is following the above installing steps and uploading the package to your store. The code will automatically override.
- Flush the configure cache. Your store and newly installed module should be working as expected.
...