> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Compare two pictures with Facet's before and after slider > Add Facet's before and after section, pick the two pictures and their labels, and choose the slider's shape and where it sits beside your text. The Facet before and after section lays two pictures on top of each other with a handle in the middle. Shoppers drag the handle to reveal more of one picture or the other. Use it to show a product in use, a color change, or a result over time. This page covers the pictures, labels, layout and the blocks you can add. ![The Before and after section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/compare-slider/compare-slider-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=591254844f0c1b54e44d82c2a7b408c2) ## What this section controls * The before and after pictures, with separate pictures for phones. * The labels on each picture and where they sit. * The shape of the slider. * Whether the slider fills the width or sits beside your text. ## Getting started **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Add the section** In the **Sections** panel, click **Add section** and choose **Before and after**. The section can't be added to the header or footer. **3. Pick the two pictures** Click **Before and after** and choose a **Before image** and an **After image**. ![The theme editor with the Before and after section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/compare-slider/compare-slider-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=390984a1aee10e5b3b6693c4b4b6040d) ## Section settings ### Pictures and labels ![Theme editor sidebar showing the Before and after section settings: Before image, Before mobile image, Before label, After image, After mobile image, After label.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/compare-slider/compare-slider-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=983d8466ea07345d658c54cfc211f3a7) * **Before image**: the picture on the left side of the handle. * **Before mobile image**: an optional picture for phones. Without one, phones show **Before image**. * **Before label**: the tag on the before picture. Default: "Before". Leave it blank to hide it. * **After image**: the picture on the right side of the handle. * **After mobile image**: an optional picture for phones. Without one, phones show **After image**. * **After label**: the tag on the after picture. Default: "After". Leave it blank to hide it. * **Label position**: **Top** (default) or **Bottom** of the pictures. Until you choose a picture, a placeholder shows in its place. The handle starts in the middle. ### Layout ![Theme editor sidebar showing the Before and after section settings (part 2, scrolled): After label, Label position, Aspect ratio, Image position, Common settings, Color scheme, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/compare-slider/compare-slider-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=6370298dc1200098573296967b8c7e6b) > [accordion] Aspect ratio > > The shape of the slider: **1:1**, **4:3**, **16:9** (default), **21:9** or **3:4**. Both pictures are cropped to this shape. > [accordion] Image position > > * **Full width** (default): the text blocks sit above the slider, and the slider takes the full width. > * **Left** or **Right**: on screens 750 pixels wide and larger, the slider sits on that side and takes about 60% of the width, with the text beside it. On phones the text sits above the slider. ### Common settings ![Theme editor sidebar showing the Before and after section settings (part 3, scrolled): Aspect ratio, Image position, Common settings, Color scheme, Top padding, Bottom padding, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/compare-slider/compare-slider-settings-3.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=d87a69b555addf9754194dadbd4c631b) See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details. * **Color scheme**: the colors of the section. * **Top padding** and **Bottom padding**: None, Small (default), Medium, Large or Extra large. * **Page width**: Fluid (default) or Full. ## Blocks ### Heading, text and button Add **Heading**, **Text** and **Button** blocks to explain the comparison. Their settings are described on [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md). Without any blocks, the slider shows on its own. ## Best practices * **Shoot both pictures the same way.** The same framing, light and distance make the difference easy to see as the handle moves. * **Crop both pictures to the same shape.** Pictures with matching sizes line up exactly under the handle. * **Add phone pictures for wide shapes.** With **21:9** or **16:9**, a separate square or upright crop keeps the subject large on phones. ## Related guides > [card] [Image with text](https://docs.shopify.lightsout.agency/themes/facet/sections/image-with-text.md) > > Show a single picture beside your text. > [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) > > Settings for the heading, text and button blocks. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.