Banner Creator Pro section

To modify the theme's settings, you have to open the customize page. If you don't know how to do that, please refer to here.

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 add

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 in precia theme, 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.

banner general

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.

banner slider settings

- 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.

banner creator add item

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.

banner item size

- Item gutters: use these settings to add the distance for a banner item.

banner item gutters

4. The banner item with the texts:

This banner item type will help you create a banner with image and text, buttons.

banner text

To add a banner item with text, click "Add content" button then click "Banner with text".

For the item size or gutters, you can view the prev part.

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:

banner template top bottom

+ Image bottom - Text top:

banner template bottom top

+ Image left - Text right:

banner template left right

+ Image right - Text left:

banner template right left

+ Text inside image:

banner template inside

- 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.

Only affect when the template is "Image left - Text right" or "Image right - Text left".

c. Inside Template Settings:

Only affect when "Template" is "Text inside Image".

- Text box width : these settings will help you handle the width of a box which contains the texts and buttons.

banner text box text width

- Standard position : pick a position to display the texts and buttons. Banner creator pro provides 9 available positions.

9positions

- 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.

banner custom position

d. Own background for texts:

These settings will help you handle the background for the text box.

banner background text

e. Text 1, 2 and 3 settings:

Banner Creator Pro allows you add up to 3 texts to the banner. Each text has the same settings. In each text, you can display it as a heading, a subheading or button. Change the color, font size, font weight, line height,...

5. Create a banner with link list:

For the item size or gutters, you can view the prev part.

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:

banner link list top bottom

+ Image bottom - Link list top:

banner link list bottom top

+ Image left - Link list right:

banner link list left right

+ Image right - Link list left:

banner link list right left

+ Link list inside image:

banner link list inside

- 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.

banner link list content

c. Layout settings:

This setting will help you handle the image box width.

Only affect when the template is "Image left - Link list right" or "Image right - Link list left".

d. Inside Template Settings:

Only affect when "Template" is "Link list inside Image".

- Link list box width : these settings will help you handle the width of a box which contains the link list and title.

banner link list box width

- Standard position : pick a position to display the link list and title. Banner creator pro provides 9 available positions.

9positions

- 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.

banner link list custom positions

d. Own background for link list:

These settings will help you handle the background for the link list box.

banner link list background

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:

For the item size or gutters, you can view the prev part.

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.

banner product general

b. Product settings:

You can refer the guide for these settings at here.

7. Create a banner with the collection:

For the item size or gutters, you can view the prev part.

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.

banner collection settings

8. Create a banner with the video:

For the item size or gutters, you can view the prev part.

With these settings, you can add your video link ( Vimeo or Youtube ). Set to show/hide the banner in mobile or desktop screen.

banner video settings