# Image comparison slide

The **Image comparison slide** section allows users to display two images side by side for a visual comparison. Users can slide between the images to see differences or changes, making it ideal for before-and-after scenarios or showcasing variations. This interactive feature enhances engagement by providing a clear and dynamic way to present changes or options, and it can be customized to fit the specific design and layout of your Shopify store.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FwGAvurrNq4ID9NqGs9wm%2Fimage.png?alt=media&#x26;token=e1551ac8-4f0b-4313-9b2e-4762a501ff0a" alt=""><figcaption></figcaption></figure>

## Section settings

### General settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p></p><p>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fix width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Color scheme</td><td>Select colors from <strong>Theme settings -> Colors</strong></td></tr><tr><td>Heading</td><td>The title of the section</td></tr><tr><td>Description</td><td>The description of the section</td></tr><tr><td>Content alignment</td><td><p>The position of the heading and description.</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr></tbody></table>

### Image options

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Image before</td><td>Displays the initial state for comparison</td></tr><tr><td>Image after</td><td>Shows the state after changes are applied</td></tr><tr><td>Text left</td><td>Provides context or details on the left side</td></tr><tr><td>Text right</td><td>Offers additional information on the right side</td></tr><tr><td>Image ratio</td><td><p>"Image ratio" refers to the proportional relationship between the width and height of the image.</p><p>5 options for image ratio</p><ul><li>Adapt to first image</li><li>Square (1:1)</li><li>Portrait (3:4)</li><li>Landscape (4:3)</li><li>Custom</li></ul></td></tr><tr><td>Custom ratio</td><td>Where you can add your own image ratio</td></tr></tbody></table>

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section

## Theme block

### Content

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FKgjBl8wUHLgt7CUNL5dY%2Fimage.png?alt=media&#x26;token=bd1b558f-8b27-4ce1-bf93-2ab5751304df" alt=""><figcaption></figcaption></figure>

#### Heading, Subheading, Description

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading, Subheading, Description</td><td>Custom content block</td></tr><tr><td>Size</td><td>The size of content block</td></tr><tr><td>Spacing bottom</td><td>Spacing between the content and the next component</td></tr></tbody></table>

#### Product

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Select product</td><td>You can select specific products to display</td></tr><tr><td>Show border top</td><td>Toggle to add a border above the product set for better visual emphasis</td></tr><tr><td>Spacing bottom</td><td>Spacing between the content and the next component</td></tr></tbody></table>