> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/media/image-compare.md). # Image compare The Image compare section lets visitors slide between two images to see a before and after. It’s perfect for showcasing transformations, product results, edits, or variations side by side. The Image Compare section displays two images side by side with an interactive slider that lets visitors drag to reveal one image while hiding the other. This is perfect for showing before and after comparisons, product transformations, or any visual changes you want to highlight. Visitors can drag the handle left or right to compare the images, making it an engaging way to showcase differences or improvements.
{% hint style="info" %} ### How to set it up 1. Go to **Online Store** > **Themes** > **Customize**. 2. Open **Sections** > **Image compare**. 3. Make your changes, preview live, then click **Save**. {% endhint %} ### Settings #### Heading * **Heading**: The main title that appears above the image comparison section. This helps visitors understand what they're comparing. * **Underline**: Adds a decorative underline beneath the heading when enabled. * **Heading size**: Controls how large the heading appears, from extra small (XS) to extra extra large (2XL). #### Content * **Description**: Optional text that appears below the heading to provide additional context or information about the comparison. * **Content alignment**: Controls how the heading and description are aligned on the page (left, center, or right). This setting only appears when you have a heading or description. * **Accessibility description**: A text description that screen readers will announce to users with visual impairments. This helps make your image comparison accessible to everyone. For example, "This image shows a before and after comparison of room renovation". #### Layout * **Full width**: When enabled, the image compare section spans the entire width of the browser window instead of being contained within the page margins. * **Color scheme**: Choose a color scheme that matches your store's design. This affects the background and text colors of the section. #### Image comparison * **Initial position**: Sets where the comparison slider starts when the page loads. The value is a percentage of the image width, from 0% (fully showing the "before" image) to 100% (fully showing the "after" image). The default is 50%, which shows both images equally. * **Enable custom media border settings**: When enabled, you can customize the border width and border radius specifically for the images in this section, overriding the global theme settings. * **Image border width**: Controls the thickness of the border around the images. Set to 0 to remove borders completely. This setting only appears when custom media border settings are enabled. * **Image border radius**: Controls how rounded the corners of the images are. Higher values create more rounded corners. This setting only appears when custom media border settings are enabled. #### Media * **Image before**: Upload the first image that appears on the left side of the comparison. This is typically the "before" image. * **Image after**: Upload the second image that appears on the right side of the comparison. This is typically the "after" image. * **Image height**: Choose how tall the comparison images appear. Options include Adapt to media (maintains the original image proportions), Small, Medium, or Large (fixed heights for consistent sizing). #### Labels * **Show labels**: When enabled, text labels appear on the images to identify which is "before" and which is "after". * **Label before**: The text that appears on the "before" image. The default is "Before". * **Label after**: The text that appears on the "after" image. The default is "After". * **Labels position**: Choose whether the labels appear at the top or bottom of the images. * **Color scheme**: Choose a color scheme for the label backgrounds that contrasts well with your images. * **Transparent labels background**: When enabled, the label backgrounds become transparent, showing only the text and border. * **Enable custom content border width**: When enabled, you can customize the border width of the labels specifically for this section, overriding the global theme settings. * **Content border width**: Controls the thickness of the border around the labels. Set to 0 to remove borders completely. This setting only appears when custom content border width is enabled. #### Padding * **Top**: Adds space above the image compare section to create visual separation from other content. * **Bottom**: Adds space below the image compare section to create visual separation from other content. *** ### Tips * Use high-quality images that are the same size and aspect ratio for the best comparison effect. Mismatched images can look awkward when sliding between them. * The initial position setting is useful if you want to emphasize one image over the other. For example, set it to 30% to show more of the "after" image initially. * Labels help visitors understand what they're comparing, especially if the difference isn't immediately obvious. Use clear, descriptive labels like "Before renovation" and "After renovation". * The transparent labels background option works well when you want the labels to be less prominent and let the images be the focus. * Test the comparison on mobile devices to ensure the drag interaction works smoothly. The handle is touch-friendly and responds to swipe gestures. * Use the custom border settings to create a unique look that matches your brand, but remember these override your global theme settings.