Image banner

Last Updated onJuly 30, 2023

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,

  1. Go to Online Store > Themes and click Customize in your Shopify admin
  2. Then click Add section under Templates area. Now you can choose Image banner from the list.
General SettingsDescription
Background ImageIt will display the image as background for this section
Background Video(Optional), if present, it will be used over image
Use custom content widthOption to enable/disable the width for content.
Max content widthSet 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

  1. Text
  2. Button
  3. 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 SettingsDescription
TextIt will display the text
TagIt 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 SettingsDescription
TextIt will display the text
URLIt allows to choose tag you want to use for the text
TargetSet the link to open in new tab or same tab.
Use custom widthOption to enable/disable the width.
Max widthSet 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.