Image Banner

Item Border RadiusTo add this section, please follow below steps:

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

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

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

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