Everything you need to set up and customize the Scroll Reveal Group — a layout block that reveals its content with a smooth animation as visitors scroll down the page.
A scroll reveal is a visual effect where content gradually appears as a visitor scrolls down the page. Instead of all your text and buttons being visible the moment the page loads, they smoothly animate into view when the visitor reaches that part of the page. This creates a more engaging, polished browsing experience that draws attention to your content at just the right moment.
In the Boardwalk theme, the Scroll Reveal Group is a layout block that wraps text and button blocks inside a scroll-triggered animation container. When a visitor scrolls to the group, its contents are gradually revealed with a smooth transition effect. The group supports both horizontal and vertical layouts, and gives you full control over alignment, spacing, and maximum width.
Follow these steps to add and configure a Scroll Reveal Group on any page of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to add the scroll reveal effect using the
page selector dropdown at the top center of the editor.
Inside any section that supports blocks, click Add block in the Theme Editor sidebar and choose Scroll reveal group from the list. The group will appear in the sidebar as a collapsible container where you can add content blocks inside it.
Click into the Scroll Reveal Group and add Text and/or Button blocks inside it. These are the content elements that will animate into view when a visitor scrolls to this area. You can add multiple text and button blocks and reorder them as needed.
Click on the Scroll reveal group block in the sidebar to access its settings. Set the layout direction, maximum width, alignment options, and padding to control how the content is arranged and spaced.
Click Save in the Theme Editor. Preview your page and scroll down to verify that the text and buttons reveal smoothly as you reach the group's position on the page.
Note: The scroll reveal animation is best viewed on the live storefront or in the Theme Editor preview. The effect may not play inside the Theme Editor's sidebar preview panel.
The Scroll Reveal Group acts as a container for other blocks. You can add the following block types inside a Scroll Reveal Group.
A rich text block for headings, paragraphs, or any written content. Use this for headlines, descriptions, or any message you want to reveal as the visitor scrolls.
A clickable button block that links to any page, product, collection, or external URL. Pair buttons with text blocks to create call-to-action areas that animate into view as visitors scroll.
These settings control the layout, alignment, and spacing of the Scroll Reveal Group. Access them by clicking the group block in the Theme Editor sidebar.
Controls how the blocks inside the group are arranged.
Horizontal places blocks side by side in a
row. Vertical stacks them on top of each
other.
Limits the width of the group's content.
Auto lets the content fill the available
space. Narrow constrains the content to a
maximum of 600px, which is useful for centering text in
wider layouts.
Sets the text alignment for all content inside the
group. Options: Left, Center,
or Right.
Controls how blocks are positioned along the horizontal
axis. Options: Left, Center,
Right, or Space between.
Use Space between to spread blocks evenly
across the available width.
Controls how blocks are positioned along the vertical
axis. Options: Top, Middle,
Bottom, or Space between.
This is especially useful in horizontal layouts where
blocks may have different heights.
Controls the spacing between each block inside the group on desktop screens. Range: 0px to 100px.
Adds horizontal (left and right) padding around the group's content on desktop. Range: 0px to 200px.
Adds vertical (top and bottom) padding around the group's content on desktop. Range: 0px to 200px.
Controls the spacing between each block inside the group on mobile devices. Range: 0px to 100px.
Adds horizontal (left and right) padding around the group's content on mobile. Range: 0px to 200px.
Adds vertical (top and bottom) padding around the group's content on mobile. Range: 0px to 200px.
The Scroll Reveal Group comes with features that work automatically — no apps or custom code needed.
Content inside the group stays hidden until the visitor scrolls to its position on the page. Once in view, text and buttons animate in with a smooth reveal effect, creating a dynamic and engaging reading experience.
Arrange your content horizontally (side by side) or vertically (stacked). This makes the group versatile enough for headline-and-button combos, multi-line content areas, or inline call-to-action layouts.
The group has independent padding and gap settings for desktop and mobile, letting you fine-tune the spacing for each screen size without affecting the other.
The content maximum width setting lets you constrain text to a narrower column (600px). This is useful for centering a headline and paragraph on a wide section without having text stretch across the full width.
If a visitor has enabled the "reduce motion" setting in their operating system or browser, the scroll reveal animation is automatically simplified or disabled. This ensures the experience remains comfortable and accessible for everyone.