How to Set Up the Images with Text Overlay Section in Concept

Add and edit content blocks

• Under Images with text overlay, click Add block.
• Select Subheading, Heading, or Text to display your message.
• Add a Button block to configure a button label, link, style, size, and optional icon.
• Use a Link block to add a simple text link.
• Add an Icon block to choose a built-in icon or custom icon image.
• Add an Image block to display an additional image in the overlay content, with configurable desktop and mobile widths.
• Use Breadcrumb to display a Home link and the current page title.
• Add Empty space to adjust spacing between blocks, or Custom Liquid if needed.
• Drag blocks to rearrange their order, then click Save.

Configure highlighted text

• Open a Heading or Text block.
• Enter your content and select the Highlighted text style.
• If applicable, choose a Highlighted scribble style.
• In the Heading block, enable Enable reveal effect to animate the highlighted heading.
• Click Save.

The heading reveal effect is different from the scrolling background animation.

Adjust colors and scrolling effects

• Under Colors, configure Text, Background, Background gradient, Highlight, and Highlight gradient.
• Adjust the Button text, Button background, and Button background gradient colors as needed.
• Use Overlay and Overlay opacity to control the tint above the background images.
• Enable Enable parallax effect to move the background image rows horizontally as customers scroll. Adjacent rows move in opposite directions.
• Under Section, adjust Top padding, Bottom padding, Show section divider, Make section full width, and Make section rounded.
• Enable Allow transparent header when appropriate. This option applies only if the section is the first section on the page.
• Click Save.

Preview the section

• Open the storefront preview and confirm that the selected images appear in the background.
• Scroll the page to check the image movement when parallax is enabled.
• Switch to mobile preview and check the banner height, content position, and text readability.
• Test the buttons and links, if added.

Troubleshooting

• The background shows placeholder images: Add at least one image in Image 1–5.
• The background images do not move: Enable Enable parallax effect and scroll the page. Reduced-motion settings can prevent animation.
• The same image appears repeatedly: This is expected: the theme repeats and rearranges the selected images to fill the background rows. Add more images for greater variety.
• Text is difficult to read: Adjust Overlay opacity and Text color.
• The mobile layout looks different: Check Mobile height, Mobile content position, and Mobile content alignment. This section does not provide separate mobile background images.
• The transparent header does not appear: Confirm the section is first on the page and Allow transparent header is enabled.

Need Further Assistance

If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.