The Reveal image with text section creates a scroll-based visual effect using a large heading and an image. As visitors scroll, the heading transitions and the image is revealed, creating an engaging way to introduce a brand message, campaign, or featured content.
You can customize the heading, choose separate images for desktop and mobile, and add an optional button beneath the image.
Steps:
Add the Reveal image with text 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.
- Click Save.
The section's reveal effect is activated as visitors scroll through it.
Add desktop and mobile images
- Open the Reveal image with text section.
- Under Image, select the main image for desktop.
- Under Mobile image, select a separate image if you want a different image on mobile devices.
- Click Save.
If no mobile image is selected, the desktop image is used. Preview both screen sizes to check how the image is displayed.
Configure the heading
- Enter the main text in Heading.
- Use Heading size to choose the text size.
- Set Heading alignment to Left, Center, or Right.
- Adjust Desktop content width to control the width of the heading area.
- Choose a Heading tag if you need to change the heading's HTML tag.
- Click Save.
The heading appears before the image during the scroll-based reveal sequence.
Add an optional button
- Enter the button text in Button label.
- Use Button link to choose the destination.
- Enable Open link in new tab if needed.
- Use Show button icon to show or hide the icon next to the label.
- Click Save.
The button is displayed below the image. Leave Button label blank if you do not want to display a button.
Customize colors
- Open the Colors settings in the section.
- Adjust Text, Background, and Background gradient.
- Customize Button text, Button background, and Button background gradient if you added a button.
- Click Save.
Preview the reveal effect
- Open your storefront preview.
- Scroll slowly through the section to view the heading and image transition.
- Check the image layout on desktop and mobile.
- If you added a button, confirm that it opens the correct destination.
- Click Save after making any adjustments.
Section behavior
- The reveal animation is scroll-based rather than a slideshow or carousel.
- The section uses a heading followed by a large image and an optional button.
- You can assign a separate mobile image.
- Unlike Reveal image with text overlay, this section does not include overlay content blocks or controls for placing text over the revealed image.
Troubleshooting
- The reveal effect is not visible: Preview the actual storefront and scroll through the section to see the animation.
- The image does not appear: Check that an image is selected in Image.
- The mobile image looks incorrect: Select an appropriate image in Mobile image and check the mobile preview.
- The heading is not positioned as expected: Review Heading alignment and Desktop content width.
- The button does not appear: Make sure Button label is not empty.
- The button does not open the correct page: Check the Button link setting.
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.
Share:
How to Set Up the Reveal Image with Text Overlay Section in Concept