Image Banner
Last updated
Last updated
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".
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.
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.
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.
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.
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.
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 Dekstop.
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.
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.
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.
