Image banner helps you to display image or actionable content on prominent area. Usually Image banner can be displayed at the top or bottom of the page.
To add the Image banner,
- Go to Online Store > Themes and click Customize in your Shopify admin
- Then click Add section under Templates area. Now you can choose Image banner from the list.
General Settings | Description |
---|---|
Background Image | It will display the image as background for this section |
Background Video | (Optional), if present, it will be used over image |
Use custom content width | Option to enable/disable the width for content. |
Max content width | Set the width of the text, if custom width enabled. |
You can also find common section settings inside the Image banner.
Blocks
Image banner includes three dedicated blocks as well, to make it more informative. These blocks can be added above/below to the Image banner. Below you can find the list of blocks belonging to Image banner
- Text
- Button
- Custom liquid
Text
The Image banner can have multiple Text Blocks. It will allow you to display simple text, heading or description as per your wish.
You can find the following settings inside the each Text block,
General Settings | Description |
---|---|
Text | It will display the text |
Tag | It allows to choose tag you want to use for the text |
Button
The Image banner can have multiple Button Blocks as well. It will allow you to display actionable buttons.
You can find the following settings inside the each Text block,
General Settings | Description |
---|---|
Text | It will display the text |
URL | It allows to choose tag you want to use for the text |
Target | Set the link to open in new tab or same tab. |
Use custom width | Option to enable/disable the width. |
Max width | Set the width of the button, if custom width enabled. |
Custom liquid
Liquid is a lightweight and easy-to-learn templating language designed to work with dynamic content. It allows you to add logic, variables, and conditionals to your store. It allow you to customize and control the dynamic content and behavior of your online store. Shopify used liquid to process and render dynamic content on web pages.
This block has custom liquid field to process the liquid codes for you.