Everything you need to set up and customize the Image Reveal block — a scroll-triggered effect that transitions between two layered images as visitors scroll down the page.
An image reveal is a visual storytelling technique where one image transitions into another as the visitor scrolls. It's a great way to showcase before-and-after comparisons, reveal product details, or add a cinematic feel to your store's pages.
In the Boardwalk theme, the Image Reveal block creates a smooth scroll-triggered effect using two layered images. The bottom layer image is visible first, and as the visitor scrolls, the top layer gradually fades in while the blur clears away. The image freezes in the center of the viewport while the transition happens, creating a polished, cinematic effect. You can also enable a grayscale-to-color mode where the bottom image starts in black and white and transitions to full color during the scroll.
Follow these steps to add and configure an Image Reveal block 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 image reveal using the page
selector dropdown at the top center of the editor.
The Image Reveal block lives inside a Scroll reveal group. If your page already has one, click on it in the sidebar. If not, click Add section and choose Scroll reveal group from the list.
Note: The Image Reveal block can only be added inside a Scroll reveal group — it cannot be placed directly as a standalone section.
Inside the Scroll reveal group, click Add block and select Image reveal. A placeholder will appear showing two sample images stacked on top of each other.
In the block settings, upload two images. The Bottom layer image is what visitors see first. The Top layer image is what fades in as they scroll. For example, you could use a wide-angle product shot as the bottom layer and a close-up detail shot as the top layer.
Tip: For the best results, use two images with the same dimensions. This ensures a smooth, seamless transition between layers.
Select the shape of the image container from the Aspect ratio dropdown. You can let the block adapt to your bottom image's natural proportions, or choose a fixed ratio like Widescreen, Square, or Portrait.
Turn on the Grayscale to color option if you want the bottom image to start in black and white and transition to full color as the visitor scrolls. This is a great effect for storytelling or dramatic product reveals.
Click Save in the Theme Editor. Preview your page and scroll through the section to see the reveal effect in action. The transition completes at about 75% of the scroll distance.
These settings are available when you click on the Image Reveal block in the Theme Editor sidebar.
The image that is visible when the page first loads. This is the starting point of the reveal — what visitors see before they begin scrolling.
The image that gradually fades in as the visitor scrolls. It starts hidden and blurred, then becomes fully visible as the scroll progresses. Leave this empty if you only want to use the grayscale-to-color effect on a single image.
When enabled, the bottom image starts in black and white and smoothly transitions to full color during the scroll. This works alongside the top layer reveal, or on its own if no top layer image is set.
Controls the shape of the image container. Options:
Adapt to image (matches the bottom image's
natural proportions),
Widescreen (16:9),
Classic (4:3),
Photo (3:2),
Square (1:1), or
Portrait (3:4).
Understanding how the reveal animation behaves will help you choose the right images and settings.
As the visitor scrolls, the image freezes (sticks) in the center of the viewport. The reveal animation plays while the image remains fixed on screen, then releases once the transition is complete.
The top layer starts fully transparent and blurred. As the visitor scrolls, the blur clears and the image fades into full visibility. The effect completes at about 75% of the configured scroll distance.
When the grayscale option is enabled, the bottom image begins in full black and white. As the visitor scrolls, it smoothly transitions to color in sync with the top layer reveal.
Both image layers automatically load at the appropriate resolution for the visitor's screen size. Smaller devices receive lighter images for faster loading, while high-resolution screens get sharper versions.
If no images are uploaded, the block displays two placeholder graphics so you can preview the scroll effect in the Theme Editor before adding your own content.
Here are some popular ways merchants use the Image Reveal block to engage their visitors.
Show a product in its "before" state as the bottom layer and the "after" result as the top layer. This is popular for skincare, home renovation, cleaning products, and similar categories where visual transformation tells the story.
Use a lifestyle or environmental photo as the bottom layer and a close-up detail shot as the top layer. This draws the visitor's attention from the big picture into the fine craftsmanship or texture of your product.
Upload just a bottom layer image and enable the grayscale-to-color option. Leave the top layer empty. This creates a striking effect where a single image transitions from black and white to vibrant color as the visitor scrolls — no second image needed.
Transition between seasonal imagery, like a summer scene fading into a winter collection reveal, or daytime to nighttime ambiance shots. The scroll-based timing makes the change feel natural and engaging.