# Image compare

{% hint style="info" %}
This section was added in v1.5.0 on Oct 27, 2022. See our [Changelog](https://help.fluorescent.co/stiletto/readme/changelog) and [theme update guide](https://help.fluorescent.co/stiletto/general/theme-updates) 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.

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

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

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## Add before and after images

***

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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-7b3834ae11c309862678374c7aec5152a195c525%2Fimage-compare-section.jpeg?alt=media)
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](https://help.fluorescent.co/stiletto/general/image-guide/theme-image-settings#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>

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-703f06fc7b158c54787dc4f4459b7b3e65dbd388%2Fimage-compare-block.jpeg?alt=media)

## Change image compare style

***

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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-ec2acdf676b07f8ebc0db97b93a8e1cfbd9e7e0a%2Fimage-compare-settings.jpeg?alt=media)
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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-18e593ad0edf007db92b2db4471c455059562ccf%2Faspect-ratio.jpeg?alt=media)
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>

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fk6ItUX2gNmUh8lgEUS9H%2Fimage-compare-vertical.jpeg?alt=media\&token=2ee523f0-4d04-48a0-8339-d52866d91f99)

## Section header

***

The **Section header** appears above the section. Add a **Heading**, **Subheading**, and optional **Button**.

<details>

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

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

1. Click on the **Image compare** section to open the settings.
2. Enter **Heading** text to display a section title.

   > we recommend one to three words.

   > Set the **Heading size** to **Small**, **Medium**, or **Large**.
3. Enter **Subheading** text to display beneath the heading.

   > We recommend one to three short sentences.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
4. Click **Save**.

</details>

<details>

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

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

1. Click the **Image compare** section to open the settings.
2. Select or paste a URL for the **Button link**.
3. Enter text for the **Button label**.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
4. Click **Save**.

</details>

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-06de992eed5f78f4570989ab47fd546228559336%2Fimage-compare-button.jpeg?alt=media)

`Click section to find settings`

<table><thead><tr><th width="200">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Enter text to display a section title above the section.</td></tr><tr><td><mark style="color:blue;">Heading tag</mark></td><td>Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics.<br><br>This option doesn't change the heading's appearance.</td></tr><tr><td><mark style="color:blue;">Subheading</mark></td><td>Enter text to display a section subheading below the heading.</td></tr><tr><td><mark style="color:blue;">Button link</mark></td><td>Select or paste a URL for the button.</td></tr><tr><td><mark style="color:blue;">Button label</mark></td><td>Enter text to display a button label. Leave this field blank to remove the button.</td></tr></tbody></table>

## Section style

***

Adjust the overall section style by changing the **Padding** around the section content, and add an optional **Top divider** to clearly separate sections.

<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.
2. Choose to **Enable animation** to show visual effects when scrolling, hovering, or interacting with the section.

   > Learn more about [Section animations](https://help.fluorescent.co/stiletto/theme-styles/animation) in Stiletto.
3. Choose to display a **Top divider** that separates sections with a **Solid** line.

   > The Top divider uses the color of **Lines and borders** set in the Theme settings.
4. Select a **Padding** option to change the spacing between sections. Choose between **Top and bottom**, **Top only**, **Bottom only**, or set it to **None**.
5. Click **Save**.

</details>

## Settings reference

Click the **Image blocks** to find the following settings.

#### Before and After blocks

<table><thead><tr><th width="161">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="../../general/image-guide/theme-image-settings">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>Overlay</td><td>Select a color to overlay the image. This option helps provide contrast with text and headings to keep them clear and readable.</td></tr><tr><td>Overlay gradient</td><td>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 <a href="https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients">color gradient guide</a> to learn more.</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>

Click the **Image compare** section to find the following settings.

#### Section layout

<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>

#### 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>

#### Section content

<table><thead><tr><th width="144">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text alignment</td><td>Align section headings to the <strong>Left</strong>, <strong>Right</strong>, or <strong>Center</strong>.</td></tr><tr><td>Heading</td><td>Add text to show a main heading above the section.</td></tr><tr><td>Heading size</td><td>Change the font size of the heading to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td>Subheading</td><td>Add text to show a subheading below the main heading.</td></tr><tr><td>Button link</td><td>Select or paste a URL for a button.</td></tr><tr><td>Button label</td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td>Button style</td><td>Choose a style for the button. Select <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

***

> **Related links**
>
> [Image hero](https://help.fluorescent.co/stiletto/sections/theme-sections/image-hero)\
> [Image hero split](https://help.fluorescent.co/stiletto/sections/theme-sections/image-hero-split)\
> [Image with text](https://help.fluorescent.co/stiletto/sections/theme-sections/image-with-text)\
> [Image with text split](https://help.fluorescent.co/stiletto/sections/theme-sections/image-with-text-split)