> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/media/image-comparison.md). # Image Comparison A draggable before-and-after slider — two images, one divider, and proof that your product does what you say it does. Some claims are hard to write and easy to show. Before and after. With and without. Old formula and new. **Image Comparison** puts two pictures in the same frame behind a divider the visitor drags themselves — and because they do the dragging, they believe the result in a way a side-by-side pair never achieves.
{% hint style="info" %} **At a glance** | Where to find it | **Add section → Media** | | ---------------- | ------------------------------------------------------------------------------ | | Blocks | Before image and After image — **one of each** — plus the usual content blocks | | Allowed on | Any template | | Typical use | Before/after results, with/without a feature, restoration, fit comparison | | {% endhint %} | | *** ### How to add {% stepper %} {% step %} ### Add the section Click **Add section** and pick **Image comparison** from the **Media** group. {% endstep %} {% step %} ### Fill both image blocks The section ships with a **Before** block and an **After** block, one of each and no more. Each takes an image, an optional mobile image, a label and an icon. {% endstep %} {% step %} ### Use two shots that actually align Same camera position, same crop, same light. The divider cuts straight down the middle of both images, so anything that moved between the two shots looks like a mistake. {% endstep %} {% step %} ### Rename the labels "Before" and "After" are defaults, not requirements. *Untreated / Treated*, *Standard / Pro*, *2019 / Today* — whatever names the difference. {% endstep %} {% step %} ### Decide what comes first on mobile **Top on mobile** puts either the comparison or the surrounding content at the top of a small screen. It defaults to the comparison. {% endstep %} {% endstepper %} {% hint style="warning" %} **The divider always starts at 50%.** There is no setting to open the slider at, say, 80% to tease the after image. If you need the "after" to dominate the first impression, build that into the crop itself rather than looking for the control — it isn't there. {% endhint %} {% hint style="success" icon="lightbulb" %} ### Good to know * **One image still renders — against a placeholder.** Fill only one side and the other falls back to a theme lifestyle placeholder, which looks convincingly like a real image in the editor. Check both blocks before publishing. * **With neither image the section hides on the live store** but stays visible in the editor, so a half-built section can ship invisibly. * **The divider is a real range input.** It can be moved with arrow keys as well as dragged, which means keyboard and screen-reader users get the comparison too — a rarity for this kind of widget. * **The section takes ordinary content blocks as well.** Heading, text, button and the rest of the common blocks sit around the comparison, so it doesn't need a separate section above it for context. * **Each side has its own mobile image.** Use it: a comparison that works at 1400 px wide is often unreadable at 390 px, and tighter crops fix that. {% endhint %} ### Customization ideas
Results proof The classic: skincare, cleaning, restoration, repair. Keep the camera locked off and the lighting identical, and let the slider do the arguing.
With and without the feature The same room with and without your lamp; the same outfit with and without the jacket. It sells the product by removing it.
Material or finish comparison Matte on one side, gloss on the other, with the labels renamed to the finish names. Faster to understand than two product cards.
Then and now An archive photo against a current one, labels set to the two years. A brand-story section that doesn't read as a brand story.
*** ### Settings reference
Section settings | Setting | What it does | | ------------- | ---------------------------------------------------------------------------------------------- | | Top on mobile | Whether the comparison or the content sits first on small screens. Defaults to the comparison. | **Section layout, Color and Spacing** — the standard Volume groups.
Block reference **Before image** and **After image** — limited to one each. | Setting | What it does | | ------------ | ---------------------------------------------------------- | | Image | The picture for that side. | | Mobile image | A separate crop for small screens. | | Label | Text shown on that half. Defaults to *Before* and *After*. | | Icon | A small symbol beside the label. | **Content blocks** — the usual Volume set: Heading, Subheading, Text, Button, Image, Icon, Line, Empty space and the rest.
### Best practices * **Lock the camera.** The comparison is only persuasive if the two frames are identical apart from the thing you're demonstrating. * **Don't retouch one side.** If the difference needs help from an editor, the visitor will feel it even if they can't name it — and in several markets a doctored before-and-after is a regulatory problem, not just a trust one. * **Name the difference in the labels.** "Before/After" tells nobody what to look at. "Week 1 / Week 8" does. * **Add one line of context.** A heading above the slider saying what changed and over how long turns a trick into evidence. ## Related * [Media with Text](/docs/volume-themes/sections/media/media-with-text.md) — when the proof needs a paragraph beside it * [Image with Hotspots](/docs/volume-themes/sections/media/image-with-hotspots.md) — to point at details inside a single image * [Video](/docs/volume-themes/sections/media/video.md) — when the change has to be seen happening --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/volume-themes/sections/media/image-comparison.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.