The Reveal image with text overlay section displays a large image that gradually expands as customers scroll down the page. After the image is revealed, the overlay content appears on top of it. This creates a scroll-based visual effect for highlighting a campaign, collection, or brand message.
The section supports separate desktop and mobile images, adjustable content positioning, text and button blocks, and an optional parallax effect.
Steps:
Add the Reveal image with text overlay section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page template where you want to display the section.
- Click Add section and select Reveal image with text overlay.
- Click Save.
The reveal animation is triggered as customers scroll through the section on the storefront.
Set up the background images
- Open the Reveal image with text overlay section.
- Under Image, select the main image for desktop.
- Under the mobile settings, choose an Image mobile if you want a different image on smaller screens.
- Click Save.
If no separate mobile image is selected, the main image is used. Use the storefront preview to check the image crop on both desktop and mobile.
Adjust content position and alignment
- Use Content width to control the width of the overlay content.
- Set Content position to place the content on desktop.
- Set Text alignment for the desktop text.
- Use Content position mobile and Text alignment mobile to adjust the mobile layout separately.
- Click Save.
These settings control where the heading, text, buttons, and other content blocks appear over the image.
Add and arrange content blocks
- Under the section, click Add block.
- Select the blocks you want to display:
- Subheading — add a short introductory line.
- Heading — add a title and customize its size or highlighted-text style.
- Text — add a description and adjust its typography.
- Button — add a call-to-action link and choose a button style.
- Link — add a simple text link.
- Icon — select a built-in icon or upload a custom icon image.
- Image — insert an additional image within the overlay content.
- Custom Liquid — add Liquid content if needed.
- Spacing — adjust the vertical space between content blocks.
- Drag blocks to change their display order.
- Click Save.
The overlay content reveals after the image begins opening during the scroll animation.
Customize highlighted text
- Open a Heading or Text block.
- Enter your content.
- Select a Highlighted text style if you want to emphasize part of the text.
- If you choose the Scribble style, configure the Highlighted scribble option.
- In the Heading block, you can also enable the highlighted-text reveal effect.
- Click Save.
Configure colors and overlay
- Open the section settings and find Colors.
- Customize Text, Background, and Background gradient as needed.
- Adjust Highlight colors and gradients for highlighted text.
- Customize the button text and background colors.
- Use Overlay color and Overlay opacity to improve text readability over the image.
- Click Save.
Enable the parallax effect
- Open the section settings.
- Enable Parallax if you want an additional scrolling effect on the image.
- Preview the section while scrolling to check the result.
- Click Save.
The section's main reveal animation works independently of this optional setting.
Section behavior
- The background image gradually expands as visitors scroll down the page.
- When content blocks are present, the overlay and content appear during the reveal sequence.
- Desktop and mobile images and content positions can be configured separately.
- The section uses a tall scroll area so that the reveal animation has room to play.
- The Parallax setting adds a separate optional scrolling effect.
Troubleshooting
- The reveal animation is not visible: Preview the actual storefront and scroll through the section rather than viewing only a static frame in the editor.
- The image is missing: Make sure an image is selected in the section settings.
- The overlay text does not appear: Make sure at least one content block has been added and contains content.
- The mobile image looks incorrect: Select a suitable image under Image mobile and check the mobile preview.
- Text is hard to read: Adjust Overlay opacity, overlay color, or text position.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Floating Product Bundle Section in Concept
How to Set Up the Reveal Image with Text Section in Concept