Image Banner

To 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
Section ID	Enter the Section ID to match the Menu link to enable the scroll to Section feature. Note: Enter the section ID to match the menu link and enable the scroll-to-section feature.
Section Width	Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1470px) Width (1570px) Width (1770px) Width (1920px) Full width (100% of the viewport width).
Padding for 'full width' option on desktop	Determines the left and right spacing of the full width layout.
Layout	Select the layout display for the block items to be either Slide or List.
Show navigation arrows	Toggle to show navigation arrows.
Arrows position (% or px)	Enter the horizontal offset of the arrows relative to the slider in px or %.
Show navigation dots	Toggle to show dots in slide.
Auto-rotate slides	Toggle to let the slide autoplay.
Gap between each block for list layout	Determines gap between each block for list layout.

Section header

Settings	Meaning
Title	Enter the title for the section.
Show title border	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 on mobile	Determine the font size of the title on mobile.
Title bottom margin	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.

Block items

Settings	Meaning
Background style	Select the background style. There are 3 styles: None One-third width Full width Note: Not applicable when the background image setting is selected.
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

Section top padding

Settings	Meaning
Desktop	Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet	Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile	Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Section bottom padding

Settings	Meaning
Desktop	Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Tablet	Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile	Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Blocks settings

[BLOCK] Large image

Settings	Meaning
Image	Upload/Select an image for the block on Desktop. Recommended image size: width x height (1880 x 720)px
Image for mobile	Upload/Select an image for the block on Mobile. Recommended image size: width x height (638 x 870)px
Enable custom width for image	Toggle to apply custom width setting.
Custom width	Determine the width of the image block only when the enable custom width Ismage is active.
Enable scroll down	Toggle the scroll-down functionality.
Enable motion image	Toggle the motion image functionality.
Motion image	Upload/Select an image for the motion functionality.
Content
Subtitle	Fill in the subtitle for the block.
Show subtitle border	Toggle to show the underline/border of the subtitle.
Subtitle font size	Determine the font size of the subtitle.
Subtitle font size on mobile	Determine the font size of the subtitle on Mobile.
Subtitle bottom margin	Determine the spacing of the subtitle from its bottom.
Font family	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.
Subtitle font weight	Select the font weight of the subtitle to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.
Subtitle position	Select the position of the subtitle to be either above the title or below it.
Subtitle color	Set color for the subtitle text.
Subtitle color on mobile	Set color for the subtitle text on mobile device.
Title	Enter the text for the title of the block.
Title letter spacing	Enter the letter spacing for the title.
Make the title text italic	Toggle to apply italic style to the title text.
Title font size	Determine the font size of the title.
Title font size on mobile	Determine the font size of the title on Mobile.
Title bottom margin	Specify the spacing of the title from bottom.
Title font weight	Select the font weight of the title to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.
Title color	Set color for the block title.
Title color on mobile	Set color for the block title text on Mobile.
Title border style	Select the style for the title border. The styles are: None Short underline A half-height underline
Title border color	Set color for the title border/underline.
Title border color on 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 on mobile	Determine the font size of the description text on mobile.
Description line height	Determine the line height of the description text.
Description bottom margin	Determine the spacing of the description from the bottom.
Description color	Set color for the description text.
Description color on mobile	Set color for the description text on mobile.
Countdown end date	Enter a date for countdown function. Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00.
Action after the countdown finishes	Select the behavior when the countdown is over. The options are: Hide Countdown Hide Section
Countdown style	Select the style for the unit block of the countdown to be either Rounded border or Square border.
Countdown position	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 on mobile	Set the color for the countdown text on Mobile.
Countdown bottom margin	Determine the spacing of the countdown from its bottom.
Maximum content width	Determine the max width of the content.
Content background color	Set the background color for the content.
Content alignment	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.
Content position	Toggle to apply the custom position for the content. There are 5 options: Left Center Right Custom position Overlap the banner
Content custom position
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.
First button / Second button
Button label	Enter the text for the button.
Button link	Specify the link for the button to redirect to.
Button icon	Enter the SVG icon for the button. Note: Go to this link find your icon. Find the icon you want, then copy the SVG code and paste it here.
Button width	Determine the width for the button.
Show custom border	Toggle the custom border style for the button. Note: Applies to both the first and second buttons.
Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient	Set the text color, background, and border color for both the normal and hover states of the button.
Video
A video from youtube or vimeo on desktop	Enter the youtube or vimeo link. Note: Use a youtube or vimeo link.
Aspect ratio (unit %)	Enter the aspect ratio to show the video.
Icon	Select the icon for button play is play or circle play.
Icon color	Set the color for the icon.
Icon background color	Set the background color for the icon.
Customize icon position (unit %)	Enable to be able to adjust the position of the icon.
Horizontal position	Determine the horizontal position of the icon relative to the block's left.
Vertical position	Determine the vertical position of the icon relative to the block's top.
Icon horizontal position on mobile (unit %)	Determine the horizontal position of the icon relative to the block's left on mobile.
Icon vertical position on mobile (unit %)	Determine the vertical position of the icon relative to the block's top on mobile.

[BLOCK] Small image

Settings	Meaning
Show images on the right	Swap the positions of the block text content and images.
First image	Upload/Select the first image for the block.
Second image	Upload/Select the second image for the block.
Third image	Upload/Select the third image for the block.
Block style	Select the styles for the small image block. There are 4 styles: Style 1 Style 2 Style 3 Style 4
Show separator line	Toggle to show the separator line between the Title, Description and the 2 buttons. Note: Only applicable for style 2.
Separator line color	Set the color for the separator line. Note: Only applicable for style 2.
Content right margin	Determine the right spacing of the content. Note: Only applicable for style 2.
Button left margin	Determine the left spacing of the button. Note: Only applicable for style 2.
Button position from center	Determine the position of the button from the center position. Note: Only applicable for style 2.
Content position from center	Determine the position of the content from the center position. Note: Only applicable for style 2.
Separator line position from center	Determine the position of the separator line from the center position. Note: Only applicable for style 2.
Banner background color	Set the background color for the banner.
Image above the content	Upload/Select the image above the content. Note: Only applicable for style 4.
Description bottom margin	Determine the bottom spacing of the description. Note: Only applicable for style 4.
Content
Subtitle	Fill in the subtitle for the block.
Subtitle letter spacing	Enter the letter spacing for the subtitle.
Subtitle font size	Determine the font size of the subtitle on Desktop.
Subtitle font size on mobile	Determine the font size of the subtitle on Mobile.
Subtitle bottom margin	Determine the spacing of the subtitle from bottom.
Font family	Select the Font Type to be either Font Family #1 or #2. These two font families are specified in the Theme settings > Typography.
Subtitle font weight	Select the font weight of the subtitle to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.
Subtitle position	Select the position of the subtitle to be either above or below the title.
Subtitle 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 on mobile	Determine the font size of the title on Mobile.
Title bottom margin	Determine the spacing of the title from bottom.
Title font weight	Select the font weight of the title to be either Normal, Medium, Semi Bold, Bold, Extra bold 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 on mobile	Determine the font size of the description on Mobile.
Description line height	Determine the line height of the description text.
Description bottom margin	Determine the spacing of the description from bottom.
Description color	Set the color for the description .
Maximum content width	Determine the maximum width of the content.
Content alignment	Select the alignment of the content to be either to the Left, Right or Center of the block.
Show content border	Toggle to show the boder around the content box.
Show content border	Set the color for the content border.

[BLOCK] Custom Image

Settings	Meaning
First item / Second item
Show images on the right	Swap the positions of the block text content and images.
Image	Upload/Select an image for the block.
Content
Background color - Background gradient - Border color	Set the colors for the background and border of the content.
Subtitle	Enter the subtitle for the content.
Show subtitle border	Toggle to turn on the subtitle underline.
Subtitle letter spacing	Enter the subtitle letter spacing.
Subtitle font size	Determine the font size of the subtitle.
Subtitle font size on mobile	Determine the font size of the subtitle on Mobile.
Subtitle bottom margin	Determine the spacing of the subtitle from bottom.
Font family	Select the Font Type to be either Font Family #1 or #2. These two font families are specified in the Theme settings > Typography.
Subtitle font weight	Select the font weight of the subtitle to be either Normal, Medium, Semi Bold, Bold, Extra bold or Black.
Subtitle position	Select the position of the subtitle to be either Above or Below the title.
Subtitle 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 on mobile	Determine the font size of the title on Mobile.
Title bottom margin	Determine the spacing of the title from bottom.
Title font weight	Select the font weight of the title to be either Normal, Medium, Semi Bold, Bold, Extra bold or Black.
Title color	Set the color for the block title.
Title border style	Select the style for the title border. The styles are: None Short underline A half-height underline
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 on mobile	Determine the font size of the description text on Mobile.
Description line height	Determine the line height of the description text.
Description bottom margin	Determine the spacing of the description from its bottom.
Description color	Set the color for the description text.
Maximum content 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.
Video
A video from youtube or vimeo on desktop	Enter the youtube or vimeo link. Note: Use a youtube or vimeo link.
Aspect ratio (unit %)	Enter the aspect ratio to show the video.
Icon	Select the icon for button play is play or circle play.
Icon color	Set the color for the icon.
Icon background color	Set the background color for the icon.
Button
Button label	Enter the text for the button.
Button link	Specify the link for the button to redirect to.
Button width	Determine the width for the button.
Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient	Set the text color, background, and border color for both the normal and hover states of the button.

[BLOCK] Special Image

Settings	Meaning
Show images on the right	Swap the positions of the content and image of the block.
Image	Upload/Select the image for the block.
Image for mobile	Upload/Select the image for the block on mobile.
Image width	Determine the width of the image relative to the block in %.
Countdown
Show countdown	Toggle the countdown presentation.
Title	Enter text for the block title.
Title font size	Determine the font size fo the block title
Title font size on mobile	Determine the font size for the block title on Mobile
Title font weight	Select the font weight of the block title to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.
Title bottom margin	Determine the spacing of the title from the bottom
Title color	Set color for the title text.
Description	Fill in the text for the block description.
Description font size	Determine the font size of the description text.
Description font size on mobile	Determine the font size of the description text on mobile
Description font weight	Select te font weight of the description to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.
Description bottom margin	Determine the spacing of the description from its bottom.
Description color	Set color for the block description text.
Countdown end date	Enter the date for the countdown function. Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00.
Item width	Set the countdown item width
Item height	Set the countdown item height
Item gap	Determine the gap between items in the countdown
Item corner radius	Determine the roundness of the block item.
Border color	Set the color for the countdown border.
Background color	Set the color for the countdown background.
Background gradient	Set the color for the countdown background gradient.
Background opacity	Determine the transparency of the countdown background.
Number font size	Determine the font size of the countdown number.
Number font size on 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, Extra bold, 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 on 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, Extra bold, or Black.
Text color	Set color for the countdown text.
Content
Border color - Background color - Background gradient	Set the background, background gradient, and border color for the content.
Subtitle	Enter the text for block subtitle.
Subtitle letter spacing	Enter the desired letter spacing for the subtitle.
Subtitle font size	Determine the font size of the subtitle.
Subtitle font size on mobile	Determine the font size of the subtitle on Mobile.
Subtitle bottom margin	Determine the spacing of the subtitle from bottom.
Font family	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.
Subtitle font weight	Select the font weight for the subtitle to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.
Subtitle position	Select the position of the subtitle to be either above or below the title.
Subtitle 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 on mobile	Determine the font size of the block title on Mobile.
Title bottom margin	Determine the spacing of the block title from its bottom
Title font weight	Select the font weight for the title to be either Normal, Medium, Semi Bold, Bold, Extra bold, or Black.
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 on mobile	Specify the font size for block description on Mobile.
Description line height	Determine the line height of the block description.
Description bottom margin	Determine the spacing of the description from its bottom.
Description color	Set color for the description text.
Maximum content 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.
Video
A video from youtube or vimeo on desktop	Enter the youtube or vimeo link. Note: Use a youtube or vimeo link.
Aspect ratio (unit %)	Enter the aspect ratio to show the video.
Icon color	Set the color for the icon.
Icon background color	Set the background color for the icon.
Button
Button label	Enter the text for the button.
Button style	Choose the style for the button. There are 2 styles: Style 1 Style 2
Button link	Specify the link for the button to redirect to.
Button width	Determine the width for the button.
Show custom border	Toggle the custom border. Note: Only applicable for button style 1.
Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient	Set the text color, background, and border color for both the normal and hover states of the button.

[BLOCK] Image scrolling text

Settings	Meaning
Image	Upload/Select an image for the block on Desktop. Recommended image size: width x height (1880 x 720)px
Image for mobile	Upload/Select an image for the block on Mobile. Recommended image size: width x height (638 x 870)px
Scrolling text
Menu	Select a menu to show on the block.
Text color	Apply color on the menu item text.
Text font size	Determine the font size of the menu item text.
View all	Enter the text for the view all button.
'View all' font size	The font size of the view all button text.
'View all' font weight	Select the position of the view all button to be either to the Left, Right or Center.
'View all' link	Specify the link for the view all button to redirect to.
'View all' link color	The text color of the view all button.