No need to install any Shopify apps. With Banner Creator Pro 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.
Banner creator provides 5 item types: "Banner with text", "banner with link list", "Product", "Collection" and "Video". Now let us explore how they work.
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.
- Enable fade effect : tick to enable the fade effect of the slide transition.
3. Banner items:
In Banner Creator Pro section, you can add multiple banner items. To add a banner item, scroll to the bottom and click "Add content" button.
Then pick one of the banner item types. At the writing time, Banner Creator Pro section provides 5 banner item 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. The banner item with the texts:
This banner item type will help you create a banner with image and text, buttons.
To add a banner item with text, click "Add content" button then click "Banner with text".
a. General settings:
- Template: this filed will help you specify a way for displaying a banner item. There are 5 values for this field. Below is the demonstration for 5 templates.
+ Image top - Text bottom:
+ Image bottom - Text top:
+ Image left - Text right:
+ Image right - Text left:
+ Text inside image:
- 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.
b. Layout settings:
This setting will help you handle the image box width.
c. Inside Template Settings:
- 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.
e. Text 1, 2 and 3 settings:
Banner Creator Pro allows you add up to 4 texts to the banner. Each text has the same settings. In each text, you can display it as a button, a link, a paragraph, a H1, H2, H3, H$, H5 or H6 tag,... That is good for SEO. And you can also change the color, font size, font weight, line height,... in the desktop and mobile screen.
5. Create a banner with link list:
a. General settings:
- Template: this filed will help you specify a way for displaying a banner item. There are 5 values for this field. Below is the demonstration for 5 templates.
+ Image top - Link list bottom:
+ Image bottom - Link list top:
+ Image left - Link list right:
+ Image right - Link list left:
+ Link list inside image:
- 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.
- Open link in new tab : open the link in a new tab 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.
- Hide this banner on mobile : not display the banner in mobile screen.
- Hide this banner on desktop : not display the banner in tablet and desktop screens.
b. The content:
These settings will help you handle the link list title and pick a link list from your Shopify store to show.
c. Layout settings:
This setting will help you handle the image box width.
d. Inside Template Settings:
- Link list box width : these settings will help you handle the width of a box which contains the link list and title.
- 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. Own background for link list:
These settings will help you handle the background for the link list box.
e. Link list title settings and link list settings:
These settings will help you change the color, font size, font weight, line height,... of the link list title and link list.
6. Create a banner with the product:
a. General settings:
These settings will help you pick a product, set a background color for the banner, show/hide the banner in mobile and desktop screen.
b. Product settings:
You can refer the guide for these settings at here.
7. Create a banner with the collection:
And you can pick a collection, change color, font size and background color for collection title. You can also hide this banner in mobile or desktop screen.
8. Create a banner with the video:
With these settings, you can add your video link ( Vimeo or Youtube ). Set to show/hide the banner in mobile or desktop screen.
