No need to install any Shopify apps. With Layer Banner section, you have will a strong tool to present your creativity in Customize page. To add new Banner Creator Pro section, in customize page, just click "Add section" button then choose "Banner Creator Pro", then click "Add" button.
1. General Settings:
Like other sections, Banner creator pro 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.
2. Slider settings:
If you want to display a list of banners in a slider format, ex: display a slideshow,... You can enable the slider feature in Banner Creator Pro section.
- Enable : tick this checkbox to enable the slider feature.
- Banner item size : choose the number of items will be shown in the user's viewport.
| Banner item size | The number of items in the user's viewport | |
| Desktop | mobile | |
| Small | 5 | 2 |
| Medium | 4 | 2 |
| Large | 3 | 2 |
| Very Large | 2 | 1 |
| Full Width | 1 | 1 |
- Enable autoplay : tick this checkbox if you want to show the slider autoplay.
- Autoplay speed : Autoplay Speed in seconds. Only apply this setting if you tick "Enable autoplay".
- Show arrow : show Prev/Next arrows.
- Show dot indicators : show the navigation dots in the slider.
- Show small vertical banners : show the vertical banners on the left or the right of the main slider. There are 3 banners which you can add beside the main slider.
- Enable effects : tick to enable the effects of the slide transition.
In this settings, you can add layer name, layer size, layer gutters, upload image, and set background, effect for image
3. Banner layers:
Banner creator provides 3 item types: "Parent Layer", "Text Layer", "Product starting price". To add a banner item, scroll to the bottom and click "Add content" button.
Then pick one of the banner layer types. At the writing time, Layer Banner section provides 3 banner layer types.
- Item size: Banner Creator Pro use the grid layout like Bootstrap. The content box will be separated in same 12 columns. You can change the width of a banner item by increasing or decreasing the number of columns. You can set the different item sizes for a banner item in desktop and mobile screen.
- Item gutters: use these settings to add the distance for a banner item.
4. Parent Layer:
This is the top level layer. All other layer types will be displayed in a part of this item.
To add a parent layer, click "Add content" button then click "Parent layer".
General settings:
- Image : upload or pick an image.
- Mobile image : upload or pick an image to display on the mobile screen. If you leave empty, the image from an above field will be displayed.
- The link for image : add an URL to redirect when a user clicks the image.
- Image alignment : align the image. Only work when your image does not fit the banner box.
- Background color for banner : set a background color for the banner.
- Enable effect for banner : you can choose transition and color effects for the banner.
5. Text Layer:
This is the sub layer, let you add texts in banner. All this texts will be displayed in Parent layer.
a. General settings:
- Layer name : add name for layer
- Text content : add text contents
b. Layout settings:
This setting will help you handle the image box width.
- Text box width : these settings will help you handle the width of a box which contains the texts and buttons.
- Standard position : pick a position to display the texts and buttons. Banner creator pro provides 9 available positions.
- Custom positions :
If the available standard positions can not help you, you can use custom positions feature and set let, top of the text box to the values you want.
d. Own background for texts:
These settings will help you handle the background for the text box.
6. Product starting price:
This is the sub layer, let you add the product's price in banner. It will be displayed in Parent layer.
a. The content:
You can add Layer name. This field is only used to help you find the layer in Theme Settings easily. It will not be shown at the storefront.
- Hide this banner on mobile: this field help you hide banner on mobile
- Hide this banner on desktop: this field help you hide banner on desktop
b. Layout settings:
This setting will help you handle the wrap box width.
- Text alignment : pick a align to display the text. There are 3 chosen: left, center and right.
- Standard position : pick a position to display the link list and title. Banner creator pro provides 9 available positions.
- Custom positions :
If the available standard positions can not help you, you can use custom positions feature and set let, top of the link list box to the values you want.
d. Price settings:
- Pick a product : you can pick a product to display the exactly price or leave a blank. If you leave a blank, the price will be gotten from "starting price" field.
- Starting text : add starting text you want to display before price product.
- Starting price: add price you want to display price product. Note: the price will be gotten from the product with the priority first. If empty, the product's min price will be displayed.
- Price color: add color for price.
- Button: you can add button link, button text, and choose the button styles. There are 3 styles.