Learn how to link products to your Comparison Slider's "before" and "after" sides — so customers can see exactly which product was used in each image and view it instantly through a quick-view popup.
Before & After Product blocks let you attach a product from your store to each side of the Comparison Slider. A small product card appears in the corner of the corresponding image, showing the product's thumbnail, name, and price. When a customer clicks the card, a quick-view popup opens with full product details — including images, variant options, and an add-to-cart button — all without leaving the page.
This is ideal for showcasing transformations, upgrades, or results. For example, a skincare brand might show bare skin on the "before" side and the glowing result on the "after" side, with the product responsible for the change linked directly to that image. Customers can view the product and add it to their cart right from the slider.
Follow these steps to link products to the before and after sides of your Comparison Slider.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
that contains your Comparison Slider section using the
page selector dropdown at the top center of the editor.
In the Theme Editor sidebar, find and expand the Comparison Slider section. You should see the existing blocks that make up the slider (such as before image, after image, and any text or heading blocks).
Click Add block inside the Comparison Slider section and choose Before product from the list. This block will appear as a product card overlay on the "before" (left) side of the slider.
Click the Before product block in the sidebar. Use the Product picker to choose the product you want to associate with the "before" image. The product's thumbnail, name, and price will appear automatically on the slider.
Note: The product you select must be
set to Active status in your Shopify
admin and available on the Online Store sales channel.
Products in draft or archived status will not display on
the storefront. Go to
Products in your admin to verify the
product's status.
Click Add block again and choose After product. This block works the same way but appears on the "after" (right) side of the slider. Use the Product picker to select the product for this side.
For each product block, choose whether to show the price and pick a color scheme for the product card. These options are covered in detail in the Block Settings section below.
Click Save in the Theme Editor. Preview your page to make sure the product cards are displaying on the correct sides of the slider and that clicking each card opens the quick-view popup as expected.
Both the Before product and After product blocks share the same set of settings. The only difference is which side of the slider the product card appears on.
Select a product from your store to display on this side of the slider. The product's featured image, title, and price are pulled in automatically. If no product is selected, the block will not render anything on the storefront.
When enabled, the product's price is displayed below the product name on the card. If the product is on sale, both the discounted price and the original crossed-out price are shown.
Applies a color scheme to the product card. Use this to match the card's background and text colors with the rest of your slider or make it stand out against the image.
When a customer clicks a before or after product card, a quick-view popup opens with full product details. The product information loads in the background without a page reload, so the customer stays on the same page.
Browse all of the product's images using arrow navigation buttons. An image counter shows how many photos are available.
Displays the product name, vendor (if available), and current price. If the product is on sale, both the original and discounted prices are shown.
If the product has multiple options (such as size or color), selection controls appear so the customer can choose their preferred variant before adding to cart.
Customers can add the product directly to their cart from the popup. The cart updates in the background without a page reload.
A link to the full product page is included in the popup, so customers can view the complete product listing with all details, reviews, and additional media if they want more information.
Keep these details in mind when working with before and after product blocks to make sure everything displays correctly on your storefront.
Products in draft or archived status will not appear on the storefront. Go to Products in your Shopify admin and make sure the product status is set to Active.
The product must also be published to the Online Store sales channel. In your Shopify admin, go to the product's detail page and check the Sales channels and apps section to confirm the Online Store is listed.
The product card shows the product's featured (first) image as a small thumbnail. For the best appearance, make sure your linked products have at least one image uploaded in the Shopify admin under Products → Media. If no image is available, a placeholder graphic is shown instead.
For the sale price to display on the product card, you need to set a Compare at price on the product variant in your Shopify admin. Go to Products → select the product → Pricing and enter a value in the "Compare at price" field. The discounted price will appear alongside the original crossed-out price.
You can add one Before product block and one After product block per Comparison Slider. Each block is positioned automatically on its respective side of the slider — the before product on the left and the after product on the right.
You do not have to add product blocks to your Comparison Slider. The slider works on its own with just the before and after images. Product blocks are an optional enhancement for when you want to connect a specific product to the visual comparison.