The Reveal banner section combines a large image, promotional text, and a scroll-triggered Text slide. As customers scroll through the banner on desktop, the initial text gives way to the slide content.
Demo Usage
Preset reference: Beauty — Homepage in the supplied Be Yours 9.5.1 theme. The Reveal banner is positioned after Image comparison and before Shop the look. Its sample content includes “The Ritual, Revealed” and a Text slide titled “Quick and Classic.”
Demo URL: Be Yours — Beauty homepage
The section's placement is confirmed in the 9.5.1 theme preset; the currently published demo may use different content or section ordering. The sample Reveal banner could not be confirmed on the live homepage.
STEPS:
1. Add the Reveal Banner Section
- From Shopify admin, go to Online Store > Themes and click Customize.
- Open the template where you want to display the banner.
- Click Add section and select Reveal banner.
- Choose an image, add content blocks, and configure the layout.
- Click Save.
2. Configure the Banner Image and Desktop Layout
| Setting | Description |
|---|---|
| Image | Main banner image. |
| Image focal point | Keeps the important part of the image in view. |
| Desktop content position | Places content at the top, middle, or bottom. |
| Desktop content alignment | Aligns content left, center, or right. |
| Desktop height | Choose Adapt to image, a fixed height from 400px to 750px, or Full screen. |
| Make section full width | Extends the banner across the available page width. |
| Show section divider | Adds a divider above the section. |
3. Configure the Mobile Layout
| Setting | Description |
|---|---|
| Mobile image | Optional image specifically for mobile screens. |
| Mobile content alignment | Aligns text left, center, or right. |
| Mobile height | Choose Auto, Adapt to image, fixed heights from 200px to 600px, or Full screen. |
| Show text below image | Displays the banner's initial text below the image rather than over it on mobile. |
Use a portrait-oriented mobile image when the desktop image crops too tightly on phones.
4. Add Content Blocks
The Reveal banner supports these blocks:
| Block | Main settings | Maximum |
|---|---|---|
| Heading | Heading, Heading size, Heading tag, Highlight | 2 |
| Subheading | Subheading, Subheading size, Enable secondary color, Highlight | 2 |
| Text | Description, Description size, Enable secondary color, Highlight | 2 |
| Buttons | Button label/link, Video button label, Video URL, Video alt text | 1 |
| Text slide | Heading, Description, Button, Colors, Highlight | 1 |
| Custom Liquid | Custom Liquid content | 2 |
- Click Add block inside Reveal banner.
- Select the block you need and fill in its settings.
- Reorder the blocks to arrange the initial banner content.
- Click Save.
5. Configure Buttons and Video
Use the Buttons block to add a link or video trigger to the initial banner content.
| Setting | Description |
|---|---|
| Button label | Text on the link button. |
| Button link | Destination for the button. |
| Video button label | Text for the video button. |
| Video URL | Public YouTube or Vimeo video URL. |
| Video alt text | Accessible description of the video. |
A video button opens the video in a popup. Add a valid video URL when using it.
6. Configure the Text Slide
The Text slide is the Reveal banner's distinctive second content panel. On desktop, it appears as the customer scrolls through the section.
| Setting | Description |
|---|---|
| Heading / Heading size / Heading tag | Controls the slide heading. |
| Description / Description size | Adds the slide text. |
| Button label / Button link | Adds a call-to-action. |
| Button size | Small, Medium, or Large. |
| Use underline button style | Switches the slide button to an underline-style link. |
| Solid button label color / Solid button background color | Colors for the solid button style. |
| Text color / Background color / Background gradient | Sets the slide panel colors. |
| Enable highlight / Highlight style | Highlights selected heading or description text. |
Add Text slide using Add block. Only one Text slide is supported. The slide effect is designed for desktop; the mobile presentation is adapted to the smaller screen.
7. Configure Colors, Highlight, and Spacing
Section settings include:
| Setting | Description |
|---|---|
| Text | Text color on the initial banner. |
| Overlay | Overlay color applied over the image. |
| Overlay opacity | Adjusts overlay strength for text readability. |
| Highlight | Sets the highlight color. |
| Top padding / Bottom padding | Controls section spacing. |
For Heading, Subheading, Text, and Text slide blocks, enable Enable highlight and select a Highlight style if needed.
Please use italic formatting by selecting the text you want to highlight and then clicking the italic (I) button in the editor.
8. Notes and Troubleshooting
- To see the scroll-reveal panel, add a Text slide block and preview the section on desktop.
- If the image looks cropped, adjust Image focal point, Desktop height, or Mobile height.
- If the mobile image does not appear, confirm Mobile image is selected.
- If text is difficult to read, adjust Overlay and Overlay opacity.
- If a button does not navigate, check its Button link.
- If a video does not open, check that the Video URL is valid and publicly accessible.
- If highlighted text does not change, enable highlighting in the relevant block and italicize the text.
Version note: Be Yours 9.0.0 improved mobile image delivery for Reveal banner, allowing a dedicated mobile image to be loaded more efficiently. This improvement is included in version 9.5.1.
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Image Comparison Section in Be Yours
How to Set Up the Shop the Look Section in Be Yours