A before and after image slider is one of the most persuasive elements you can add to a Shopify store. Whether you're selling skincare, fitness products, cleaning supplies, or home renovations, showing a visual transformation is far more convincing than any written description. The problem is that most Shopify themes don't include this section by default — and building one from scratch requires coding knowledge most merchants don't have.
That's where Section Store comes in. With over 730 plug-and-play Sections designed specifically for Shopify, you can install a Before and After slider Section to your existing theme in just a few clicks — no page builders, no developers, no code. It works with every Online Store 2.0 theme, integrates directly into Shopify's built-in Theme Editor, and is a one-time $9 purchase. Here's exactly how to do it.
HOW TO ADD A BEFORE AND AFTER SECTION TO YOUR SHOPIFY THEME
Follow these simple steps to install and customise a Before and After Section on your Shopify store.
Install the Section Store App
If you haven't already, install the Section Store app from the Shopify App Store. It's free to install — you only pay for the Sections you choose to purchase.
Find the Before and After Section
Open the Section Store app and browse the library. Search for "Before After" to find the dedicated image slider Section ready to install.
Purchase the Section
Click on the Section and complete the one-time purchase for $9. This gives you permanent access — no recurring fees, ever.
Install the Section to Your Theme
Navigate to My Sections within the Section Store app. Click the Install button next to your Before and After Section, then select the theme you want to add it to. The Section is added as a .liquid file directly inside your theme.
Open the Shopify Theme Editor
From your Shopify admin, go to Online Store > Themes and click Customize on your live theme to open the Theme Editor.
Choose Where to Place It
Use the top dropdown to navigate to the page template where you want the slider to appear — for example, your Product page, Homepage, or a custom landing page.
Add the Section to the Page
Click Add Section in the left panel. Search for "ss - Before" and select the Before and After Section from the results. All Section Store Sections are prefixed with "SS" so they're easy to find.
Upload Your Before and After Images
Click on the Section in the editor to open its settings. Upload your "before" image and your "after" image. You can also customise the heading, labels, layout, and any other options in the settings panel.
Save Your Theme
Click Save in the top-right corner of the Theme Editor. Your Before and After slider is now live on your store.
WHERE TO PLACE YOUR BEFORE AND AFTER SECTION
The most effective placements for a Before and After slider are on product pages (directly below the product description), your homepage hero area, or a dedicated results or testimonials page. For transformation-based products, placing the slider near your add-to-cart button can have a direct impact on conversion rates.
READY TO ADD IT TO YOUR STORE?
Install Section Store for free and browse the full library of 730+ Sections — including Before and After, Testimonials, FAQs, Trust Badges, and much more. Each Section is $9, works with any Online Store 2.0 theme, and is yours forever.
