Layer banner

No need to install any Shopify apps. With the Layer Banner section, you have will a strong tool to present your creativity.

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 Layer banner section.

2. Add a Layer banner 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 > Layer banner > Add.

4. Use the settings to customize your Layer banner 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.

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

• 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 layer 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". Unit: seconds.

• Show arrow: show Prev/Next arrows.

• Show dot indicators: show the navigation dots in the slider.

Small vertical banners

Display the small vertical banners beside the main banners.

2 small vertical banners are displayed on the right of 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:

Layer banner offers at most 3 images in the small vertical banners area. You can configure the URL for each image.

4. Add/Edit/Remove a layer item

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

The Layer banner section provides 3 item types: parent layer, text layer, and Product starting price. Each type has common and own settings. Not like the Banner Creator Pro section, each banner in the Layer banner section is a combination of a parent layer, multiple text layers, and Product starting price layers. Now let us explore how they work.

5. Parent layer

This is the top-level layer. All other layer types will be displayed in a part of this item.

A. GENERAL SETTINGS:

• Layer name: This setting is only used to help you find the layer in Theme editor easily. It will not be shown at the storefront. Tips: use the prefix "Parent -" for the parent items and "---" for the sub-layers will help you organize the items better.

B. LAYER SIZE:

The Layer banner section 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.

• Layer size: adjust the size of the banner on desktop and tablet screens.

• Layer size on the mobile screen: adjust the size of the banner on the mobile screen.

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

C. GUTTERS ON TABLET AND DESKTOP:

Turn on/off gutters on desktop and tablet screens.

• Top: turn on/off the top gutter.

• Bottom: turn on/off the bottom gutter.

• Left: turn on/off the left gutter.

• Right: turn on/off the bottom gutter.

D. GUTTERS ON MOBILE:

Turn on/off gutters on the mobile screen.

• Top: turn on/off the top gutter.

• Bottom: turn on/off the bottom gutter.

• Left: turn on/off the left gutter.

• Right: turn on/off the bottom gutter.

E. UPLOAD IMAGE:

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

F. BACKGROUND COLOR:

• Enable: turn on/off the background color.

• Pick a color: pick a color for the background.

If the image fits its wrap area, you are not able to see the background color.

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

6. Text layer

This is the sub-layer, let you add texts in the banner. All these texts will be displayed in the Parent layer.

Note: all sublayer will be displayed in the parent layer which is adjacent just in front of their position. Check below image:

A. GENERAL SETTINGS:

• Layer name: add a name for the layer.

• Text content: add text contents.

Note: the breadlines are only applied when the text is displayed as "paragraph".

B. LAYOUT SETTINGS:

This setting will help you handle the width of the text box that contains the texts and buttons.

• Text box width: adjust the width on the desktop and tablet screens.

• Text box width on the mobile screen: adjust the width on the mobile screen.

• Standard position: pick a position to display the text box. The Layer banner provides 9 available positions.

9 standard positions that are used to display the text box

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

  • Left position: adjust the left coordinate. Unit: %.

  • Right position: adjust the right coordinate. Unit: %. Note: The right position only works if the "Left position" is less than zero.

  • Top position: adjust the top coordinate. Unit: %.

  • Bottom position: adjust the bottom coordinate. Unit: %. Note: Only work if "Top position" is less than zero.

C. TEXT COLOR:

• Pick a color: Choose a color to set the text color.

Note: If the text color is empty, the general color will be set for the text color.

• Opacity: Adjust the text color blur.

• Appear effect: choose the effects which you want to text appear. There are 4 effects and no-effect.

Note: Effects only work with slider.

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

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

E. TEXT SETTINGS:

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

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

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

7. Product starting price:

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

A. LAYOUT SETTINGS:

• Wrap box width: adjust the width on the desktop and tablet screens.

• Wrap box width on the mobile screen: adjust the width on the mobile screen.

• Text Alignment: align the text on the desktop and tablet screens.

• Text Alignment mobile: align the text on the mobile screen.

• Standard position: pick a position to display the text box. The Layer banner provides 9 available positions.

9 standard positions that are used to display the text box

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

  • Left position: adjust the left coordinate. Unit: %.

  • Right position: adjust the right coordinate. Unit: %. Note: The right position only works if the "Left position" is less than zero.

  • Top position: adjust the top coordinate. Unit: %.

  • Bottom position: adjust the bottom coordinate. Unit: %. Note: Only work if "Top position" is less than zero.

B. PRICE SETTINGS:

• Pick a product: Select a product to display you want.

• Starting text: add the texts you want to show in the price.

• Text color: choose a color to set the color for the price.

• Starting price: add the value for the price you want to show.

Note: If left empty, the product's min price will be displayed.

• Price color: pick a color you want to set for the price.

C. BUTTON:

• Button link: add the link of the button you want to display.

Note: If empty, the product's URL will be displayed.

• Button text: add the text of the button you want to display.

• Button style: choose the button style you want to display, there are 3 styles.

• Appear effect: choose the effects which you want to text appear. There are 4 effects and no-effect.

The effects only work with the slider.