The Images with text overlay section allows you to display multiple image cards with text content layered directly on top of each image. It is useful for highlighting collections, activities, campaigns, categories, or promotional content in a visual layout.
Each image card can include a heading, supporting text, and a button to guide customers to another page.
Click the section name to see section settings on the right-hand sidebar.
Make section full width: Enable this option to make the section expand to the full width of the screen.
Color scheme: Select the color style applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Minimum height: Set the minimum height of the image cards.
Content position: Choose whether the content is positioned at the Top or Bottom of the image.
Hover effect: Select the hover animation applied to the image card, such as Zoom image.
Use these settings to adjust the spacing around the section and maintain a balanced layout across different screen sizes.
Available options:
Top padding
Bottom padding
Mobile top padding
Mobile bottom padding
The Scrollspy navigation item setting allows you to define the section title used for scroll-based navigation.
Title: Enter the title used to identify this section in Scrollspy navigation.
The Section header container is used to create the introductory content displayed above the image cards.
The Section header container includes settings for controlling the layout of the header content.
Text alignment: Choose the alignment of the content: left, center, or right.
Custom width: Enable this option to customize the width of the Section header content area.
Click Add block inside the Section header container to add content.
The available child blocks include:
Heading
Sub text
Text
Group button
Spacer
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Note: Child blocks must be added under the Section header container.
The section contains multiple Image with text overlay blocks. Each block represents one image card.
Click Add block below the section to add a new image card.
Color scheme: Select the color scheme applied to the text and button displayed over the image. You can choose an available color scheme or customize it through Edit scheme.
Image: Upload the image displayed in the card. Use high-quality images that match the content or destination linked from the card.
Image overlay opacity: Adjust the overlay opacity applied on top of the image. Increase the value to improve text readability when using bright or detailed images.
Heading: Add the main title displayed over the image. For example: Talk about your brand.
Text: Add supporting content displayed below the heading.
Button label: Enter the text displayed on the call-to-action button, such as Shop now. Leave the button label blank if you do not want to display a button.
Button link: Select or enter the destination customers should visit when clicking the button, such as a collection page, product page, other store page, or custom URL.
Uppercase: Enable this option to display the button label in uppercase letters.