Thank you for purchasing our extension. If you have any questions that are beyond the scope of this document, please feel free to contact us, we will be happy to assist.
Updated: 26/04/2019 | By: Magenest | Email: [email protected] | Support portal: http://servicedesk.izysync.com/servicedesk/customer/portal/151
Introduction
Banner Slider for Magento 2 lets merchants create and use sliders as banners on product listing pages. This allows you to promote your content and navigate traffic on your website.
Key feature
For Admin:
Choose between three types of banner and slider.
Create sliders in Magento 2 back-end.
Upload photos to use as a slide.
Add links to slides.
Highly customizable appearance.
Multiple slider animations.
For customer
- Quickly access to the outstanding product on the shop page.
System requirement
Your store must be running on:
Magento Open Source 2.1.x, 2.2.x, 2.3.x
Magento Commerce 2.1.x, 2.2.x, 2.3.x
Configuration
On the Admin sidebar, tap Slider, then choose Manage Slider.
On the Slider Page, the customer can manage the available slider or create a new one.
Then on the New Slider Page:
- Enable the slider/ banner.
- Enter the name on Slider/ Banner Name box.
- Choose the type for the banner. There are 3 types: Banner, Single Slider, 2 Sliders - Slider Sync.
On the quick preview box: This section allows the customer to decor and style the banner/ slider up to their choices.
If you choose the Banner type:
- Click on the edit icon beside each title to configure for each part of the banner on the Setting box on the right side.
On Style Configuration
- Define the Custom Css to style the banner.
On Item Configuration:
- Custom Class: enter the name of the custom class which is defined on the Style Configuration.
- Padding and Margin section, adjust the dimension for the banner padding and margin to fit your requirement. Then see the effects for 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.
- Choose Image Background:
- If you choose Category, the image of the selected Category above will be set as banner background.
- Choose Custom Upload to upload a new background image for the banner.
- Background Image Attribute: set the attribute for the background image. You can see the effect of each setting on the demo banner.
On Item Content Configurations
- Size: adjust the dimensions for the height and width of the item content box. You can choose the unit on the right.
- Padding and Margin: adjust the dimension for the banner padding and margin of the item content box to fit your requirement. Then see the effects for each of your change on the demo banner on the left side.
- Background Color
- Click on the color box and choose the color on the color board.
- Set the transparency on the opacity box beside.
- Then set the Position and Animation for the item content box on the banner.
On the Content Configuration
- Type: there are three types of content: button, text, HTML.
- Custom Class: enter the custom class which is defined on the Style Configuration.
- Then configure for the content type that you selected.
- To add more content box, click on the Add Content box button under the style box then choose the type for the new content box. Then set the configuration for it.
Note:
- The change for each setting on Content Configuration will not be displayed on the quick preview box to avoid the layout broken.
If you choose Single Slider type: There are some additional settings besides that in the banner setting.
- Under the quick preview box, click on Add New Slider Item button to add a 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 item that you want to display on the frontend.
- 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 on 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 slider created. These slider will display on the front end at the same time and interactive with each other.
- On each slider configuration, click on Add New Slider Item button to create new slider items. Note that when a number of slider items created on one slider, the equal number of slider items will be generated automatically on the other slider.
Then set the configuration for each slider and slider item by the same way with the instruction above.
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 display at the same time with the item that in the same order on the other slider. For example, the slider item 2 in slider 1 will display with the slider item 2 in the slider 2 at once.
On Slider Position:
- Design Theme: choose the theme for the new banner. There are two default options: Magento Blank and Magento Luma.
- Assign to Store Views: choose the store view that the banner will be displayed.
- Sort Order: If you set several banners, set the order for the new banner. Note that it requires the integer to define the order.
- Page: select the pages on which the banner will appear.
- Container: select the position for the banner. There are 8 options for the banner position: Page Top, Page Header Container, Page Footer Container, Main Content Area, Main Content Aside, Main Content Button, Main Content Top, Main Content Container.
Note: The extension supports the sliders and banners to display on all pages or 4 pages including Home Page, Catalog Pages, Product Pages and One Page Checkout Success. To display the sliders or banners on another page, follow the instruction below.
- On the Admin Sidebar, tap Content, then choose Pages.
- On the Pages page, create a new page or choose a page to edit. Note that the selected page is not the default page listed above.
- On the Page configuration, expand the Content section.
- On the toolbar, click on the Insert Widget symbol.
- Under the Widget Type section, choose Category Slider.
- Then select a slider or banner on Choose Slider drop-down list.
- Click on Insert Widget button on the right side.
- After finishing, click Save.
On Storefront
- Banner
- Single Slider
- 2 Sliders - Slider Syncing
The first slider on the slider 2 appear with the slider that in the same order on the slider 1.
The third slider on the slider 2 appear with the slider that in the same order on the slider 1.
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 onto your store. The code will automatically override.
- Flush the configure cache. Your store and newly installed module should be working as expected.
Support
- Support portal: http://servicedesk.izysync.com/servicedesk/customer/portal/151
- We will reply to support request within 2 business days.
- We will offer lifetime free update and 6-month free support for all of our paid products. Support includes answering questions related to our products, bug/error fixing to make sure our products fit well in your site exactly like our demo.
- Support DOES NOT include other series such as customizing our products, installation and uninstallation service.