Custom Image Banner
Last updated
Last updated
To 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 "Custom Image Banner".
| Settings | Meaning |
|---|---|
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). |
Padding Container Full Width | Determine the left and right spacing of the Full Width layout. |
Layout Mobile Responsive | Select the layout for the section render on mobile device. The options are: List, Scroll Snap and Slider. |
Grid Gap | Determine the spacing between each block item in the section. |
Background Color | Apply Color on the background of the section. |
Background Gradient | Apply Color on the background gradient of the section. |
Background Image | Select/Upload an image as the section background. |
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. |
| Settings | Meaning |
|---|---|
Alignment | Select the alignment of the header text to be either to the Left, Center or to the Right of the section. |
Title | Enter the title text for header. |
Title Color | Apply color on the section title. |
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 bottom spacing of the section title. |
Description | Enter the text for the section description. |
Description Color | Apply color on the section description text. |
Description Font Size | Determine the font size of the section description. |
| Settings | Meaning |
|---|---|
Item Width | Enter the desired width of the small image cluster relative to the section. |
Item Grid Gap | Determine the spacing between the images in the block. |
Item Border Radius | Determine the roundness of the block item. |
Content: Alignment | Select the alignment of the content in the small image to be either to the Left, Right or Center. |
Content: Align Items | Select the vertical alignment type of the content in the small image to be either to the Top, Center or Bottom. |
Content: Spacing Top/Spacing Bottom | Determine the spacing of the content from the top or bottom border of the image based on its vertical alignment. |
Content: Spacing Left/Spacing Right | Determine the spacing of the content from the left or right border of the image based on its horizontal alignment. |
Enable Border Sub Title | Toggle the border to show on the subtitle. |
Sub Title Font Size | Determine the font size of the subtitle. |
Sub Title Spacing Bottom | Determine the bottom spacing of the subtitle. |
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 bottom spacing of the title. |
Title Spacing Bottom Mobile | Determine the bottom spacing of the title on mobile. |
Enable Font Weight Italic? | Toggle to set the title font to be Italic. |
Description Font Size | Determine the font size of the block description. |
Description Spacing Bottom | Determine bottom spacing of the description. |
Description Spacing Bottom Mobile | Determine the bottom spacing of the description on Mobile. |
Button Font Size | Determine the font size of the button. |
Button Width | Determine the width of the button. |
Button Background Opacity | Specify the transparency of the button background. |
Button Text Transform | Set the text transform to be normal, lowercase, uppercase or capitalize. |
Enable to show Item | Toggle to show image item in the block. |
Width | Determine the width of each item relative to the block's width. |
Spacing Bottom | Determine the bottom spacing of each image. |
Image | Upload/Select an image in the cluster. |
Content | Enter the subtitle for the image. |
Sub Title Color | Apply color on the subtitle. |
Title | Enter the title for the image. |
Title Color | Apply color on the image title. |
Description | Enter the description text for the image. |
Description Color | Apply color on the image description. |
Button | Enter the text button the image button. |
Link | Specify the link for the button redirect to. |
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient | Apply colors for the text, background and border of the image button for both normal and hovered/clicked states. |
Icon | Enter the SVG for the button icon near its text. |
| Settings | Meaning |
|---|---|
Item Width | Enter the desired width of the large image relative to the section. |
Item Border Radius | Determine the roundness of the block item. |
Spacing Bottom | Determine the bottom spacing of the large image. |
Image | Select/Upload an image for the block. |
Alignment | Select the alignment of the text to be either to the left, right or center of the Large Image block. |
Content: Align Items | Select the vertical alignment of the text to be either to the top, center or bottom of the Large Image block. |
Content: Spacing Top/Spacing Bottom | Determine the spacing of the content from the top or bottom border of the image based on its vertical alignment. |
Content: Spacing Left/Spacing Right | Determine the spacing of the content from the left or right border of the image based on its horizontal alignment. |
Content | Enter the subtitle for the Large Image block. |
Enable Border Sub Title | Toggle to show the underline of the subtitle. |
Sub Title Color | Apply color onto the subtitle. |
Sub Title Font Size | Determine the font size of the subtitle. |
Sub Title Spacing Bottom | Determine the bottom spacing of the subtitle. |
Title | Enter the title for the block. |
Title Color | Apply color onto the block title. |
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 bottom spacing of the title. |
Title Spacing Bottom Mobile | Determine the bottom spacing of the title on mobile. |
Enable Font Weight Italic? | Toggle to apply italic font style on title. |
Description | Enter the description text for the block. |
Description Color | Apply color on the description text. |
Description Font Size | Determine the font size of the description text. |
Description Spacing Bottom | Determine the bottom spacing of the description. |
Description Spacing Bottom Mobile | Determine the bottom spacing of the description on mobile. |
Button | Enter the text for the button at the bottom. |
Link | Specify the link for the button to redirects to. |
Button Font Size | Determine the font size of the button text. |
Button Width | Determine the width of the button width. |
Color - Border Color - Background Color - Background Gradient - Hover / Active Color - Hover / Active Border Color - Hover / Active Background Color - Hover / Active Background Gradient | Apply colors for the text, background and border of the image button for both normal and hovered/clicked states. |
Button Background Opacity | Determine the transparency of the button background. |
Button Text Transform | Select the text transform of the button text to be Normal, Uppercase, Lowercase or Capitalize. |
Icon | Enter the SVG code for the icon in the button. |
