Image Banner
Item Border RadiusTo add this section, please follow below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Image Banner".
Section settings
General
| Settings | Meaning |
|---|---|
Show Google Map | Toggle the visibility of the section. |
Layout | Select the layout width of the whole section. The options are: Default (same as the body width), 1170px, 1770px, Full Width (the 100% of the viewport width). |
Spacing Top / Spacing Bottom on Desktop, Tablet, Mobile | Determine the spacing of the section from its top and bottom sections on Desktop, Tablet and Mobile separately. |
Section
| Settings | Meaning |
|---|---|
Title | Enter the title for the section. |
Enable Border Title | Toggle to show title border/underline. |
Title Color | Set color for the title border/underline. |
Title Font Size | Determine the font size of the title. |
Title Font Size Mobile | Determine the font size of the title on mobile. |
Title Margin Bottom | Determine the font size of the title. |
Description | Enter the description text of the section. |
Description Color | Set the color for the description text. |
Description Font Size | Specify the font size of the description text. |
Alignment | Select the alignment of the title and description of the section. |
Settings block
| Settings | Meaning |
|---|---|
Background Color | Set color for the block background. |
Background Gradient | Set color gradient for the block background. |
Background Image | Upload/Select an image as the block background |
Display | Select the layout display for the block items to be either Slide or List. |
Arrows Position (% or px) | Enter the horizontal offset of the arrows relative to the slider in px or %. |
Enable Dots | Toggle to show dots in slide. |
Enable Autoplay | Toggle to let the slide autoplay. |
Blocks Settings
[BLOCK] Large Image
| Settings | Meaning |
|---|---|
Select Image | Upload/Select an image for the block on Desktop. |
Select Image Mobile | Upload/Select an image for the block on Mobile. |
Enable Custom Width Image | Toggle to apply Custom Width setting. |
Custom Width | Determine the width of the image block only when the Enable Custom Width Image is active. |
Enable Parallax Image | Toggle to let the image stands still while scrolling (Parallax Effect). |
Sub Title | Fill in the subtitle for the block. |
Enable Border Sub Title | Toggle to show the underline/border of the subtitle. |
Sub Title Font Size | Determine the font size of the subtitle. |
Sub Title Font Size Mobile | Determine the font size of the subtitle on Mobile. |
Sub Title Spacing Bottom | Determine the spacing of the subtitle from its bottom. |
Select Font Type | Select the font type to be either Font Family #1 or #2. The font family of each option is specified in the theme settings > typography. |
Sub Title Font Weight | Select the font weight of the subtitle to be either Normal, Medium, Semibold, Bold, Bolder or Black. |
Sub Title Position | Select the position of the subtitle to be either above the title or below it. |
Sub Title Color | Set color for the subtitle text. |
Sub Title Color Mobile | Set color for the subtitle text on mobile device. |
Title | Enter the text for the title of the block. |
Enable Font Weight Italic? | Toggle to apply italic style to the title text. |
Title Font Size | Determine the font size of the title. |
Title Font Size Mobile | Determine the font size of the title on Mobile. |
Title Spacing Bottom | Specify the spacing of the title from bottom. |
Title Color | Set color for the block title. |
Title Color Mobile | Set color for the block title text on Mobile. |
Title Border | Select the style for title border. The styles are: - None - Border (Style 1): a short underline for the title. - Border (Style 2): a half height background laying beneath the title. |
Title Border Color | Set color for the title border/underline. |
Title Border Color Mobile | Set color for the title border/underline on mobile device. |
Description | Enter the description text for the image block. |
Description Font Size | Determine the font size of the description text. |
Description Font Size | Determine the font size of the description text on mobile. |
Description Line Height | Determine the line height of the description text. |
Description Spacing Bottom | Determine the spacing of the description from the bottom. |
Description Color | Set color for the description text. |
Description Color Mobile | Set color for the description text on mobile. |
Countdown | Enter a date for countdown function. Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00. |
When a countdown finished counting | Select the behavior when the countdown is over. The options are to Hide Countdown and Hide Section. |
Countdown Style | Select the style for the unit block of the countdown to be either Rounded or Square. |
Countdown Style | Select the position of the countdown to be Below Description or Above Description. |
Countdown Number Font Size | Determine the font size of the countdown numbers. |
Countdown Text Font Size | Determine the font size of the countdown text. |
Countdown Color | Set the color for the countdown text. |
Countdown Color Mobile | Set the color for the countdown text on Mobile. |
Countdown Margin Bottom | Determine the spacing of the countdown from its bottom. |
Content: Max Width | Determine the max width of the content. |
Content: Position | Select the whole position of the image to be either to the Left, Right or Center including Subtitle, title, description, button and countdown. |
Content: Alignment | Select the position of the whole content to be either to the Top, Center or Bottom. |
Custom Position Content | Toggle to apply the custom position settings below (For desktop only, the content always stays in the middle on mobile device). |
Horizontal Position | Enter the desired position of the content horizontally in % relative to the image. |
Vertical Position | Enter the desired position of the content vertically in % relative to the image. |
Button Text | Enter the text for the button. |
Link | Specify the link for the button to redirect to. |
Icon | Enter the SVG icon for the button. |
Button Width | Determine the width for the button. |
Enable Custom Border? | Toggle the custom border style for the button. |
Settings video
| Settings | Meaning |
|---|---|
URL | Enter a URL for a YouTube or Vimeo video. |
Aspect Ratio(Unit: %) | Enter the Width / Height ratio to render the video. |
Icon Video Style | Select the style for the video icon. - Style 1: Play button is a triangle. - Style 2: Play button is wrapped in a circle. |
[BLOCK] Small Image
| Settings | Meaning |
|---|---|
Enable Row Reverse | Swap the positions of the block text content and images. |
Select Image | Upload/Select image for the block. Maximum of 3 images allows them to become a slideshow. |
Small Image Block Style | Select the styles for the Small Image Block. - Style 1:Title, description and button are positioned vertically. - Style 2: Two buttons lie to the right of the title and description. - Style 4: The content is set vertical but the 2 buttons are positioned horizontally. |
Enable Divider? | Toggle to show the divider between the Title, Description and the 2 buttons. |
Sub Title | Fill in the subtitle for the block. |
Sub Title Letter Spacing | Enter the letter spacing for the subtitle. |
Sub Title Font Size | Determine the font size of the subtitle on Desktop. |
Sub Title Font Size Mobile | Determine the font size of the subtitle on Mobile. |
Sub Title Spacing Bottom | Determine the spacing of the subtitle from bottom. |
Select Font Type | Select the Font Type to be either Font Family #1 or #2. These two font families are specified in the Theme settings > Typography. |
Sub Title Font Weight | Select the font weight of the subtitle to be either Normal, Medium, Semi Bold, Bold, Bolder or Black. |
Sub Title Position | Select the position of the subtitle to be either above or below the title. |
Sub Title Color | Set the color for the subtitle. |
Title | Enter the title for the block. |
Title Letter Spacing | Enter the letter spacing for the title. |
Title Font Size | Determine the font size of the title on Dekstop. |
Title Font Size Mobile | Determine the font size of the title on Mobile. |
Title Spacing Bottom | Determine the spacing of the title from bottom. |
Font Weight | Select the font weight of the title to be either Normal, Medium, Semi Bold, Bold, Bolder or Black. |
Title Color | Set the color for the title. |
Description | Enter the description for the block. |
Description Font Size | Determine the font size of the description on Dekstop. |
Description Font Size Mobile | Determine the font size of the description on Mobile. |
Description Line Height | Determine the line height of the description text. |
Description Spacing Bottom | Determine the spacing of the description from bottom. |
Description Color | Set the color for the description . |
Content: Alignment | Select the alignment of the title, description to be either to the Left, Right or Center of the block. |
Enable Content Border | Toggle to show the boder around the content box. |
Content Border Color | Set the color for the border. |
[BLOCK] Custom Image
| Settings | Meaning |
|---|---|
Enable Row Reverse | Swap the positions of the block text content and images. |
Select Image | Upload/Select an image for the block. |
Content Item: Background Color, Background Gradient, Border Color | Set the colors for the background and border of the content. |
Sub Title | Enter the subtitle for the content. |
Enable Border Sub Title | Toggle to turn on the subtitle underline. |
Sub Title Letter Spacing | Enter the subtitle letter spacing. |
Sub Title Font Size | Determine the font size of the subtitle. |
Sub Title Font Size Mobile | Determine the font size of the subtitle on Mobile. |
Sub Title Spacing Bottom | Determine the spacing of the subtitle from bottom. |
Select Font Type | Select the Font Type to be either Font Family #1 or #2. These two font families are specified in the Theme settings > Typography. |
Sub Title Font Weight | Select the font weight of the subtitle to be either Normal, Medium, Semi Bold, Bold, Bolder or Black. |
Sub Title Position | Select the position of the subtitle to be either Above or Below the block title. |
Sub Title Color | Set the color for the subtitle. |
Title | Enter the text for the block title. |
Title Letter Spacing | Enter the letter spacing for the block title text. |
Title Font Size | Determine the font size of the title. |
Title Font Size Mobile | Determine the font size of the title on Mobile. |
Title Spacing Bottom | Determine the spacing of the title from bottom. |
Font Weight | Select the font weight of the title to be either Normal, Medium, Semi Bold, Bold, Bolder or Black. |
Title Color | Set the color for the block title. |
Title Border | Select the style for title border. The styles are: - None - Border (Style 1): a short underline for the title. - Border (Style 2): a half height background laying beneath the title. |
Title Border Color | Set the color for the title border/underline. |
Description | Enter the text for the block description. |
Description Font Size | Determine the font size of the description text. |
Description Font Size Mobile | Determine the font size of the description text on Mobile. |
Description Line Height | Determine the line height of the description text. |
Description Spacing Bottom | Determine the spacing of the description from its bottom. |
Description Color | Set the color for the description text. |
Content: Max Width | Determine the width for the block content including title, description. |
Content: Alignment | Select the alignment of the content to be either to the Left, Right or Center. |
[BLOCK] Special Image
| Settings | Meaning |
|---|---|
Enable Row Reverse | Swap the positions of the content and image of the block. |
Select Image | Upload/Select image for the block. |
Width | Determine the width of the image relative to the block in %. |
Display Countdown | Toggle the countdown presentation. |
Title | Enter text for the block title. |
Font Size | Determine the font size fo the block title |
Font Size Mobile | Determine the font size for the block title on Mobile |
Font Weight | Select the font weight of the block title to be either Normal, Medium, Semi Bold, Bold, Bolder or Black . |
Spacing Bottom | Determine the spacing of the title from the bottom |
Text Color | Set color for the title text. |
Description | Fill in the text for the block description. |
Font Size | Determine the font size of the description text. |
Font Size Mobile | Determine the font size of the description text on mobile |
Font Weight | Select te font weight of the description to be either Normal, Medium, Semi Bold, Bold, Bolder or Black. |
Spacing Bottom | Determine the spacing of the description from its bottom. |
Text Color | Set color for the block description text. |
Countdown | Enter the date for the countdown function. |
Item Width | Set the countdown item width |
Item Height | Set the countdown item height |
Countdown Item Gap | Determine the gap between items in the countdown |
Border Color | Set color for the countdown border. |
Background Color | Set color for the countdown background. |
Display Countdown | Set color for the countdown background gradient. |
opacity background | Determine the transparency of the countdown background. |
Number Font Size | Determine the font size of the countdown number. |
Number Font Size Mobile | Determine the font size of the countdown number on Mobile. |
Number Font Weight | Select the font weight of the countdown number to be either Normal, Medium, Semi Bold, Bold, Bolder or Black. |
Number Color | Set color for the countdown number color. |
Text Font Size | Determine the font size for the countdown text. |
Text Font Size Mobile | Determine the font size for the countdown text on Mobile. |
Text Font Weight | Select the font weight of the countdown text to be either Normal, Medium, Semi Bold, Bold, Bolder or Black. |
Text Color | Set color for the countdown text. |
Sub Title | Enter the text for block subtitle. |
Sub Title Letter Spacing | Enter the desired letter spacing for the subtitle. |
Sub Title Font Size | Determine the font size of the subtitle. |
Sub Title Font Size Mobile | Determine the font size of the subtitle on Mobile. |
Sub Title Spacing Bottom | Determine the spacing of the subtitle from bottom. |
Select Font Type | Select the font type of the subtitle to be either Font Family #1 or #2. The two font types are specified in the Theme Settings > Typography. |
Sub Title Font Weight | Select the font weight for the subtitle to be either Normal, Medium, Semi Bold, Bold, Bolder or Black. |
Sub Title Position | Select the position of the subtitle to be either above or below the title. |
Sub Title Color | Set the color for the subtitle. |
Title | Enter text for the block title. |
Title Letter Spacing | Enter the block title letter spacing. |
Title Font Size | Determine the font size of the block title. |
Title Font Size Mobile | Determine the font size of the block title on Mobile. |
Title Spacing Bottom | Determine the spacing of the block title from its bottom |
Title Color | Set the color for the block title. |
Description | Enter text for the block description. |
Description Font Size | Specify the font size for block description. |
Description Font Size Mobile | Specify the font size for block description on Mobile. |
Description Line Height | Determine the line height of the block description. |
Description Spacing Bottom | Determine the spacing of the description from its bottom. |
Description Color | Set color for the description text. |
Content: Max Width | Determine the width for the content. |
Content: Alignment | Select the alignment of the content to be either to the Left, Center or Right of the block. |
Border Color | Set color for the content border. |
Background Color - Background Gradient | Apply color / gradient for the block content. |
Last updated
