Banner creator pro

Combine your texts and image to create awesome banners.

1. Open the existing section

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit and click Customize.

  3. Click the Banner Creator Pro section.

2. Add a Banner Creator Pro section to your home page

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit and click Customize.

  3. Click Add section > Banner Creator Pro > Add.

  4. Use the settings to customize your Banner Creator Pro section.

  5. Click Save.

3. Settings

Background

  • Enable: turn on/off the background.

  • Pick a color: choose a color to set the background color. If the background is empty, the background color will be displayed.

  • Background image: pick or upload your image to display it as the background image.

  • Background size: set the size of the background image.

  • Background style: set the style of the background image.

Section gutters

  • Enable top gutter: turn on/off the space distance on the top of the section.

  • Enable bottom gutter: turn on/off the space distance on the bottom of the section.

General settings

  • Section name: add the section name that is only used to help you find the section in Theme Settings easily. It will not be shown at the storefront.

  • Heading: add the section title.

  • Subheading: add section subtitle.

  • Wide display: turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).

  • Full width: turn on/off displaying the section in full width of the window(no gutter on the left and right). If you enable this setting, the Wide display setting will be ignored.

  • Revert the left and right position in the RTL layout: turn on this setting to reverse the text position, arrow in the RTL layout automatically.

Slider settings

Help you display a list of banners in a slider format. Example: display a slideshow,...

  • 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. In the slider format, the size of each item will be ignored. All items will have the same size, and you can change it in this setting.

Banner item size

The number of items in the user's viewport

Desktop & tablet

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.

Small vertical banners

Display the small vertical banners beside the main banners.

General settings:

  • Enable: show/hide the small vertical banners.

  • Width: adjust the width of the area that contains the small vertical banners. The width of the area contains the main banners will be calculated base on this setting.

  • Position: specify the position to show the small vertical banners. There are 2 values: left or right of the main banners.

  • Remove the distance with the main banners: turn on/off the distance between the main banners and the small vertical banners.

Effect settings:

  • Enable: turn on/off the effect.

  • Transition effects: specify the transition effect of the image when users hover the mouse on the banner.

  • Color effects: specify the color effect of the image when users hover the mouse on the banner.

Add your images:

Banner Creator Pro offers at most 3 images in the small vertical banners area. You can configure the URL for each image.

4. Add/Edit/Remove a banner item

Scroll down to the bottom, you will see an Add content button, click this button to add a new banner item. Or you can click one of the available banner items to edit/remove it and drag/drop items to rearrange them.

Banner Creator Pro section provides 5 item types: Banner with text, Banner with link list, Product, Collection, and Video. Each type has common and own settings. Now let us explore how they work.

5. Common settings in all banner item types

These are the common settings that appear in all banner item types.

A. Item size

Banner Creator Pro uses the grid layout like Bootstrap. The content box will be separated in the 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 on desktop and mobile screen.

  • Item size: adjust the width of the item on desktop and tablet screens.

  • Item size in mobile screen: adjust the width of the item on the mobile screen.

B. Item gutters

Use these settings to add the distance for a banner item on the desktop, tablet, and mobile screens.

6. "Banner with text" item type

This banner item type will help you create a banner with images and texts, buttons.

For the item size or gutters, you can view the common settings.

A. GENERAL SETTINGS:

  • Template: this setting will help you specify a way for displaying a banner item. There are 5 values for this setting. Below is the demonstration for 5 templates.

  • Image: pick or upload your image.

  • Mobile image: pick or upload your image to display it on the mobile screen. If empty, the image from the above setting will be displayed instead.

  • The link for image: add your URL so that users can click the image to go to a new page with this URL.

  • Open link in a new tab: open a new page in a new tab when users click the image.

  • Image alignment: align the image in its wrap area. Only affect when the image does not fit the wrap area.

  • Hide this banner on mobile: not show the banner on the mobile screen.

  • Hide this banner on the desktop: not show the banner on the desktop and tablet screens.

  • Enable background color: turn on/off the background color.

  • Background color for banner: pick a background color.

If you are configuring the template is Text inside the image and the image fits its wrap area, you are not able to see the background color.

  • Enable text effect in the slider: turn on/off the effect to show texts after the slider is initialized.

If the banner is the first slide, and it is shown in the first screen when the page is loaded, recommend turning off this setting for optimizing Google Pagespeed Insights score.

B. EFFECTS:

  • Enable: turn on/off the effect.

  • Transition effects: specify the transition effect of the image when users hover the mouse on the banner.

  • Color effects: specify the color effect of the image when users hover the mouse on the banner.

C. LAYOUT SETTINGS:

Adjust the width of the image and text box on the desktop, tablet, and mobile screens.

  • Align the text box in the vertical center: align the text box in the center of the image box. Only work when Template is Image left - Text right or Image right - Text left.

Note: To avoid broken layout, if the Template setting is configured to Image left - Text right or Image right - Text left, the sum of Image box width and Text box width in a level screen should be 12 or 24.

D. INSIDE TEMPLATE SETTINGS:

These settings are only implemented if the Template is configured to Insight.

  • Wrap the text box in a container: use this setting to avoid the text box reaches the border left or right of the window.

  • Standard position: our theme offers 9 standard positions that help you display the text box inside the image.

  • Custom positions: If you would not like to use the standard positions, you can create a custom position by yourself.

    • Use custom position: tick this checkbox to use the custom position instead of the standard position.

    • Text box left position: adjust the left coordinate. Unit: %.

    • Text box top position: adjust the top coordinate. Unit: %.

E. OWN BACKGROUND FOR TEXTS

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

  • Enable: show/hide the background.

  • Background color: pick a color to display the background.

  • Opacity: Adjust the background blur.

  • Layout: set the layout of the background.

  • Background image: pick or upload your image to display it as a background instead of background color.

F. TEXT ITEM SETTINGS:

There are 4 text items that are provided in a banner with text item type. All text items have the same settings. So this guide only explains settings in a text item.

General settings:

  • Text: add your content to the text.

Note: break lines are only applied when the text is displayed as a paragraph. In the below content, you will see the setting that helps you display the text as a paragraph, button, H1, H2, H3, H4, H5, H6,...

  • Hide this text on mobile: tick to hide the text on the mobile screen.

  • Hide this text on desktop: tick to hide the text on the desktop and tablet screens.

  • Display as: specify the way the text is shown. That also decides which HTML tag will be used to contain your text. So good for optimizing SEO in your store. There are 11 values for this setting.

    • Button ( HTML tag: <a>your text</a> with a button style).

    • Link ( <a href="your-URL">your text</a> ). You will see the setting to configure the URL in the below content.

    • Paragraph ( <p>your text</p> )

    • HTML block ( <div>your text</div> )

    • Countdown timer: you need to add a countdown date to the text with the right syntax. Please refer to this guide for the countdown date syntax.

    • H1 tag ( <h1>your text</h1> )

    • H2 tag ( <h2>your text</h2> )

    • H3 tag ( <h3>your text</h3> )

    • H4 tag ( <h4>your text</h4> )

    • H5 tag ( <h5>your text</h5> )

    • H6 tag ( <h6>your text</h6> )

  • Link for text: pick or add your URL. Only work when the Display as setting is configured to Button or Link.

  • Open link in a new tab: open the new tab in the browser when users click your text. Only work when the Display as setting is configured to Button or Link and the Link for text setting is not empty.

  • Alignment: align the text.

  • Color: pick a color for the text. If you choose to display the text as a Countdown timer, this setting will only be applied for numbers.

  • Button settings: Only work when the Display as setting is configured to Button.

    • Button style: change the button style. Each button has a different color and background, you can edit these styles in Theme settings > Colors & font sizes > Style 1 button, Style 2 button, or Style 3 button.

    • Include icon: insert an icon to your text. You can go to the icons page to copy an icon class and paste it into this setting.

  • Countdown timer settings: Only work when the Display as setting is configured to Countdown timer.

    • Text color: pick a color for words such as "day", "year", "month",...

    • Background color: pick a color for the background of the countdown timer.

    • Extend days: adjust the number of days to extend the countdown time when it's expired.

  • Desktop styles: change the typography of the text on tablet and desktop screens.

    • Gutter top: adjust the gutter on the top of the text.

    • Gutter bottom: adjust the gutter on the bottom of the text.

    • Gutter left: adjust the gutter on the left of the text.

    • Gutter right: adjust the gutter on the right of the text.

    • Font size: adjust the size of the text.

    • Line height: adjust the line-height of the text.

    • Font style: specify the style of the text.

    • Font weight: specify the weight of the text.

    • Letter spacing: adjust the space between characters in the text.

  • Mobile styles: change the typography of the text on the mobile screen.

    • Extend from desktop styles settings: tick this checkbox to apply all settings of desktop styles on the mobile screen. Otherwise, the settings in mobile styles will be applied.

    • Other settings in mobile styles have the same meaning as in desktop styles.

  • Custom HTML(CSS) class: add your custom HTML class to the text. Our theme also provides some standard HTML class, you can use these HTML classes in this setting. Please refer to this guide for more details.

7. "Banner with link list" item type

This banner item type will help you create a banner with images and a link list.

For the item size or gutters, you can view the common settings.

A. GENERAL SETTINGS:

  • Template: this setting will help you specify a way for displaying a banner item. There are 5 values for this setting. Below is the demonstration for 5 templates.

  • Image: pick or upload your image.

  • Mobile image: pick or upload your image to display it on the mobile screen. If empty, the image from the above setting will be displayed instead.

  • The link for image: add your URL so that users can click the image to go to a new page with this URL.

  • Open link in a new tab: open a new page in a new tab when users click the image.

  • Image alignment: align the image in its wrap area. Only affect when the image does not fit the wrap area.

  • Hide this banner on mobile: not show the banner on the mobile screen.

  • Hide this banner on the desktop: not show the banner on the desktop and tablet screens.

  • Enable background color: turn on/off the background color.

  • Background color for banner: pick a background color.

If you are configuring the template is Link list inside the image and the image fits its wrap area, you are not able to see the background color.

B. THE CONTENT:

  • Link list title: add your text to display it as the link list title.

  • Hide title on mobile: not show the title on the mobile screen.

  • Link list: pick a link list to display it.

  • Hide link list on mobile: not show the link list on the mobile screen.

C. EFFECTS:

  • Enable: turn on/off the effect.

  • Transition effects: specify the transition effect of the image when users hover the mouse on the banner.

  • Color effects: specify the color effect of the image when users hover the mouse on the banner.

D. LAYOUT SETTINGS:

Adjust the width of the image and link list box on the desktop, tablet, and mobile screens.

  • Show the link list in 2 columns: use this setting if your link list is too long and need to separate it in 2 columns.

  • Align the text box in the vertical center: align the text box in the center of the image box. Only work when Template is Image left - Link list right or Image right - Link list left.

Note: To avoid broken layout, if the Template setting is configured to Image left - Link list right or Image right - Link list left, the sum of Image box width and Text box width in a level screen should be 12 or 24.

E. LABEL:

  • Text color: set the color for the text in labels.

  • Background color: set the background for labels.

For adding labels to a link list, please refer to this guide to get more details.

F. INSIDE TEMPLATE SETTINGS:

These settings are only implemented if the Template is configured to the Link list insight image.

  • Wrap the link list box in a container: use this setting to avoid the text box reaches the border left or right of the window.

  • Standard position: our theme offers 9 standard positions that help you display the text box inside the image.

  • Custom positions: If you would not like to use the standard positions, you can create a custom position by yourself.

    • Use custom position: tick this checkbox to use the custom position instead of the standard position.

    • Text box left position: adjust the left coordinate. Unit: %.

    • Text box top position: adjust the top coordinate. Unit: %.

G. OWN BACKGROUND FOR LINK LIST:

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

  • Enable: show/hide the background.

  • Background color: pick a color to display the background.

  • Opacity: Adjust the background blur.

  • Background image: pick or upload your image to display it as a background instead of background color.

H. LINK LIST TITLE SETTINGS:

  • Alignment: align the link list title.

  • Gutter top: adjust the gutter on the top of the title.

  • Gutter bottom: adjust the gutter on the bottom of the title.

  • Font size: adjust the size of the title.

  • Line height: adjust the line-height of the title.

  • Font style: specify the style of the title.

  • Font weight: specify the weight of the title.

  • Color: pick a color for the title.

  • Custom HTML(CSS) class: add your custom HTML class to the title. Our theme also provides some standard HTML class, you can use these HTML classes in this setting. Please refer to this guide for more details.

I. LINK LIST SETTINGS:

  • Alignment: align the link list on desktop and tablet screens.

  • Alignment in mobile: align the link list on the mobile screen.

  • Gutter top: adjust the gutter on the top of the link list.

  • Gutter bottom: adjust the gutter on the bottom of the link list.

  • Font size: adjust the size of the link list.

  • Line height: adjust the line-height of the link list.

  • Font style: specify the style of the link list.

  • Font weight: specify the weight of the link list.

  • Color: pick a color for the link list.

  • Custom HTML(CSS) class: add your custom HTML class to the link list. Our theme also provides some standard HTML class, you can use these HTML classes in this setting. Please refer to this guide for more details.

8. "Product" item type

This item type will help you show a product grid item.

For the item size or gutters, you can view the common settings.

A. GENERAL SETTINGS:

  • Pick a product: choose a product you want to show.

  • Hide on mobile: hide the banner item on the mobile screen.

  • Hide on desktop: hide the banner item on desktop and tablet screens.

  • Enable background color: turn on/off the background color.

  • Background color for banner: pick a color to set it as background.

B. PRODUCT SETTINGS:

These are product item settings, so please refer to this guide for more details.

9. "Collection" item type

This item type will help you show a collection grid item.

For the item size or gutters, you can view the common settings.

GENERAL SETTINGS:

  • Pick a collection: pick a collection to display it.

  • Enable background: turn on/off the background of the collection title.

  • Title background: pick a color to display it as a background of the collection title.

  • Font size: adjust the size of the collection title.

  • Hide on mobile: not show this banner item on the mobile screen.

  • Hide on desktop: not show this banner item on desktop and tablet screens.

10. "Product list" item type

This is a great combination of the texts and a list of product grid items.

For the item size or gutters, you can view the common settings.

A. GENERAL SETTINGS:

  • Heading: add your text to display it as a heading.

  • Subheading: add your text to display it as a subheading.

  • Hide on mobile: not show the banner item on the mobile screen.

  • Hide on desktop: not show the banner item on desktop and tablet screens.

B. HTML TAGS:

Pick the HTML tags to display heading and subheading for optimizing SEO in your store.

  • Heading: choose an HTML tag to display the heading. These are 7 options in this setting:

    • H1: HTML code like <h1>heading</h1>

    • H2: <h2>heading</h2>

    • H3: <h3>heading</h3>

    • H4: <h4>heading</h4>

    • H5: <h5>heading</h5>

    • H6: <h6>heading</h6>

    • Paragraph: <p>heading</p>

  • Subheading: choose an HTML tag to display the subheading. These are 7 options in this setting:

    • H1: HTML code like <h1>subheading</h1>

    • H2: <h2>subheading</h2>

    • H3: <h3>subheading</h3>

    • H4: <h4>subheading</h4>

    • H5: <h5>subheading</h5>

    • H6: <h6>subheading</h6>

    • Paragraph: <p>subheading</p>

C. COLORS:

  • Heading color: pick a color for the heading.

  • Subheading color: pick a color for the subheading.

D. FONT SIZES:

Adjust the size of heading and subheading on desktop, tablet, and mobile screens.

E. COLLECTION SETTINGS:

  • Pick a collection to display its products.

  • Limit: adjust the number of products that will be shown.

  • Choose a product item size: specify the size of a product grid item.

F. PRODUCT ITEM SETTINGS:

Please refer to this guide for more details.

11. "Video" item type

Embed a video from Youtube or Vimeo.

For the item size or gutters, you can view the common settings.

GENERAL SETTINGS:

  • YouTube or Vimeo link: enter your Youtube or Vimeo link.

  • Video thumbnail: pick or upload your image to display it as a thumbnail video. If empty, the default iframe of Youtube or Vimeo will be shown.

  • Hide on mobile: not show this banner item on the mobile screen.

  • Hide on desktop: not show this banner item on desktop and tablet screens.

PreviousBanner & imageNextLayer banner

Last updated