With this section, you can create a product tab, a slider of product list or a combination of slider and tabs.
To add new Banner Creator Pro section, in customize page, just click "Add section" button then choose "Powerful Product Block", then click "Add" button.
Like other sections, Powerful Product block also has the gutter configuration to help you create the distance between sections. View there for the details. In addition, this section also has own common settings.
1. General Settings:
Add your heading, subheading, and the number of products you want to show. Tick "Wide display" to display the section in a wider way. And recommend using "Use lazy loading image" to improve the site's performance.
2. Product item settings:
View here for the details.
3. Tab item:
Each tab item contains a product list, to add/edit/remove a tab item, scroll down to bottom. Click the available tab items to edit/remove, or click "Add tab item" to add new tab item.
a. Collection settings:
In each tab item, you can add your tab title, pick a collection to show the products, choose a layout to display the products and set the number of products you want to display. In our theme, we have provided 4 layouts to display the product in this section.
- Slider : display the products in a slider format.
- Grid : display the products in a grid format.
- Grid + "Load more" button : display the products in a grid format and a "Load more" button. Customers can click this button to load more products in the specified collection. The "Limit" value is also the number of products in one time of loading. Note: the "Load more" button is only displayed if the number of products in the specified collection is greater than the "Limit" value.
- Grid + "View all" button : display the products in a grid format and a "View all" button. Customers can click this button to go to a corresponding collection page.Note: the "View all" button is only displayed if the number of products in the specified collection is greater than the "Limit" value.
- Grid + infinite scroll : display the products in a grid format and a scrolling button. When this button appears in a customer's viewport, the site will load more products in the specified collection. The "Limit" value is also the number of products in one time of loading, the scrolling button will be hidden when your all products in the specified collection have been loaded. If your site has so many products, you can use this layout to display your all products. Note: the scrolling button is only displayed if the number of products in the specified collection is greater than the "Limit" value. You can check this demo for more details.
- Slider settings :
- Enable center focus effect : display a slider with 3 items in the viewport. The center item will be displayed differently from other items.
b. Banner :
You can add a banner beside the product list in this section. Like below image:
Some settings for banner:
- Enable : show/hide banner.
- Hide the banner on mobile : If you tick this checkbox, the banner will not be shown on the mobile screen.
- Banner width : the width of the banner box. By default, this section is separated in 12 columns(cols) like Bootstrap structure. If you change the width of the banner, the width of the product list will be calculated automatically with the formula: 12 - [the width of the banner]. However, on the mobile screen, the width of the banner and product list are always 12 cols.
- Position : specify the position to display the banner. if you choose "Left", the banner will be displayed on the left of the product list on tablet and desktop screen, above the product list on the mobile screen. If you choose "Right", the banner will be displayed on the right of the product list on tablet and desktop screen, below the product list on the mobile screen.
- Image : use this image picker to upload your banner.
- Heading text : add your text as a heading in the banner.
- Heading text color : change the color for the heading text.
- Shop button text : add your text as a button in the banner. Ex: "shop now",...
- Button URL : add the link for the button.
- Button style : choose a style to display the button. Our themes provide 3 styles for displaying a button.
- Text box alignment : text box is an element is used to wrap the heading text and the button in the banner. You can change the position of the text box to "Top", "Center" or "Bottom".
- Use the background color for the text box : tick this checkbox to apply the settings for the background color of the text box.
- Background color : set the background color for the text box.
- Background opacity : change the background opacity to make your banner better.