> For the complete documentation index, see [llms.txt](https://themessupport.gitbook.io/lollipop-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themessupport.gitbook.io/lollipop-theme/sections/comparison-banner.md).

# Comparison banner

Displays two images side by side to compare before and after results with customizable labels.

## How to access

1. **Go to** Shopify Admin → Online Store → Themes.
2. **Click** Customize on your active theme.
3. Click **Add section** and choose **Comparison banner**.

## Section Settings

<div><figure><img src="/files/tfBAB1hkj7mQYZyY82Av" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ZhjHtGNlAFuiCb8W2eb4" alt=""><figcaption></figcaption></figure></div>

| Setting              | Description                                                                                                                                 |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| Layout               |                                                                                                                                             |
| Expand to full width | Extends the section to the full browser width.                                                                                              |
| Color scheme         | Sets the background and text colors.                                                                                                        |
| Background opacity   | Controls the background opacity.                                                                                                            |
| Before image         |                                                                                                                                             |
| Before image         | Selects the image displayed before comparison.                                                                                              |
| Before label         | Sets the label displayed on the before image.                                                                                               |
| Label position       | Sets the position of the before label: Top, Center, or Bottom.                                                                              |
| After image          |                                                                                                                                             |
| After image          | Selects the image displayed after comparison.                                                                                               |
| After label          | Sets the label displayed on the after image.                                                                                                |
| Label position       | Sets the position of the after label: Top, Center, or Bottom.                                                                               |
| Section divider      |                                                                                                                                             |
| Shapes               | Adds a decorative divider to the section. Choose from Curve top, Curve bottom, Curve both, None, Border top, Border bottom, or Both border. |