> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/sections/theme-sections/image-compare.md).

# Image compare

{% hint style="info" %}
This section was added in v1.5.0 on Oct 27, 2022. See our [Changelog](/stiletto/readme/changelog.md) and [theme update guide](/stiletto/general/theme-updates.md) to learn more.
{% endhint %}

The **Image compare** section shows a side-by-side comparison of 'before' and 'after' images with a slider to reveal them.

***

{% columns %}
{% column width="58.333333333333336%" %}

#### Set up section

In the editor side panel, click **(+) Add section** and select **Image compare**. Use the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit general **section styles**, like colors, width, padding, and the section header.

{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}

{% column width="41.666666666666664%" %}

#### <mark style="color:$info;">Section style guides</mark>

<table data-view="cards"><thead><tr><th></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section header</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-header">/pages/nxNcI6zBaofEs4kObMMf#section-header</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section colors</strong></mark></td><td></td><td><a href="/pages/ugnuWgDX3bpXquEJrAeA#color-schemes">/pages/ugnuWgDX3bpXquEJrAeA#color-schemes</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Section width</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-width">/pages/nxNcI6zBaofEs4kObMMf#section-width</a></td></tr><tr><td><i class="fa-bookmark" style="color:$primary;">:bookmark:</i> <mark style="color:$primary;"><strong>Padding and divider</strong></mark></td><td></td><td><a href="/pages/nxNcI6zBaofEs4kObMMf#section-padding">/pages/nxNcI6zBaofEs4kObMMf#section-padding</a></td></tr></tbody></table>
{% endcolumn %}
{% endcolumns %}

***

<h2 align="center">Add before and after images</h2>

***

Upload an image to both the "Before" and "After" blocks. You can edit the **Filter effects**, **Colors**, and image **Labels**.

We recommend images with the same dimensions and similar composition to best reveal the differences between them.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Before** or **After** block to open the settings.

   ![](/files/qmatSmon5Hb1nzhCdkVr)
2. Under *Image*, use the **Select image** button to add an image featuring multiple products.

   > There are no required image dimensions but we recommend both images have the same dimensions.

   > Images with a minimum width of 2500px will help ensure optimal quality across devices.
3. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](/stiletto/general/image-guide/theme-image-settings.md#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
4. (*Optional*.) Select one of 7 **Filter effects** to apply to the image.

   Available filters: **Blur**, **Brightness**, **Contrast**, **Grayscale**, **Invert**, **Saturate**, **Sepia**.

   > Use the **Filter amount** slider to increase or decrease the degree of the filter effect.
5. Change the **Overlay color** and **Overlay opacity** using the slider to increase the contrast between the text and slide image.

   > These settings help make your text clear and readable.

   > Set the **Opacity** to **`100%`** to create a solid color slide. This helps avoid images that include text in the image itself, which are not responsive or recommended.
6. (*Optional*) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.

   > You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
7. Enter **Label** text to display on the image.

   > Select a **Label position** to move the label to a different part of the image.

   > Uncheck **Show label** to hide the label.
8. Under **Color**, use the color selectors to change the label **Background** and **Text** colors.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
9. Repeat steps 1 - 8 for both "Before" and "After" blocks.

   > See the [Section image styles](#change-image-compare-style) to edit the **position**, **shape**, and **Image reveal direction** for both images.
10. Click **Save**.

</details>

<h2 align="center">Image compare style</h2>

***

{% columns %}
{% column %}
Click on the **Image compare** section to find settings for image **Position**, **Aspect ratio (shape)**, and the **Image reveal slider**.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Image compare** section to open the settings.

   ![](/files/X5rwBdK2eKfxvZ0jR89S)
2. Choose an **Image position** to display the image reveal block to the **Left**, **Right**, or **Below** the section headings.
3. Select the **Image aspect ratio** to crop your images to **Square**, **Landscape**, or **Portrait**.

   > The **Natural** setting displays the original shape of your image.

   ![](/files/RFmWGT0O4EPQmXP8F5si)
4. Choose to set the **Image reveal direction** to **Horizontal** or **Vertical** to let customers reveal the image from left to right or top to bottom.
5. Use the **Max width for image** slider to limit the maximum width of the combined "Before" and "After" images.
6. Use the **Color selector** to change the color of **Reveal slider** and **Reveal slider arrows**.
7. Click **Save**.

</details>
{% endcolumn %}

{% column %}
![](/files/LrMzHjthklk8jvDhuiiS)
{% endcolumn %}
{% endcolumns %}

<sub><mark style="color:$info;">Click Before or After blocks to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="161.3125">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image</td><td><p>Upload images for the before and after blocks.</p><p>We recommend images with the same dimensions and similar composition to best reveal the differences between them. A minimum width of 2500px will help ensure optimal quality across devices.</p></td></tr><tr><td>Image focal point</td><td>Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="/pages/W1limMa3a6HViAgYU6Ns">Image settings guide</a>.</td></tr><tr><td>Filter effect</td><td>Select one of graphical effects to apply to the image. Available filters: <strong>Blur</strong>, <strong>Brightness</strong>, <strong>Contrast</strong>, <strong>Grayscale</strong>, <strong>Invert</strong>, <strong>Saturate</strong>, <strong>Sepia</strong>.</td></tr><tr><td>Filter amount</td><td>Use the slider to increase or decrease the degree of the filter effect.</td></tr><tr><td>Color scheme</td><td>Select a color scheme to apply background and text colors for overlay.</td></tr><tr><td>Overlay opacity</td><td>Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.</td></tr><tr><td>Show label</td><td>Choose to show 'Before' and 'After' labels.</td></tr><tr><td>Label</td><td>Change the default text of the labels.</td></tr><tr><td>Label position</td><td>Select a position for the label on the images.</td></tr><tr><td>Label text color</td><td>Select the color of the label text.</td></tr><tr><td>Label background color</td><td>Select the color of the label background.</td></tr></tbody></table>

<sub><mark style="color:$info;">Click section to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="190">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image position</td><td>Display the Before/After image to the <strong>Left</strong>, <strong>Right</strong>, or <strong>Below</strong> the section headings.</td></tr><tr><td>Image aspect ratio</td><td>Crop the shape of your images to <strong>Square (1:1)</strong>, <strong>Landscape (3:2)</strong>, or <strong>Portrait (2:3)</strong>. Choose <strong>Natural</strong> to display the original image shape.</td></tr><tr><td>Image reveal direction</td><td>Select <strong>Horizontal</strong> or <strong>Vertical</strong> to reveal the images from left to right or top to bottom.</td></tr><tr><td>Max width for image</td><td>Use the slider to limit the maximum width of the combined "Before" and "After" images.</td></tr></tbody></table>

#### Slider color

<table><thead><tr><th width="171">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Reveal slider</td><td>Select the color for the divider line and icon for revealing the images.</td></tr><tr><td>Reveal slider arrows</td><td>Select the color of the arrows of the slider icon.</td></tr></tbody></table>

***

> **Related links**
>
> [Image hero](/stiletto/sections/theme-sections/image-hero.md)\
> [Image hero split](/stiletto/sections/theme-sections/image-hero-split.md)\
> [Image with text](/stiletto/sections/theme-sections/image-with-text.md)\
> [Image with text split](/stiletto/sections/theme-sections/image-with-text-split.md)