How to Set Up the Image Comparison Section in Be Yours

The Image comparison section displays two overlapping images that customers can compare by dragging a divider. It is useful for before-and-after results, product transformations, material finishes, and visual comparisons.

The section supports Horizontal and Vertical comparison layouts, separate mobile images, and up to 2 Look blocks.

Demo Usage

You can see Image comparison on these official Be Yours demo pages:

• Beauty – Homepage: Find the Before & After section beneath Shop by Collection.
• Beauty – Product page: Find the See the difference section below Inside the formula.
• Peace – Homepage: Find the Before & After section below the Build Your Own Basket area.

Version note: Image comparison was introduced in Be Yours 5.0.0. Support for separate mobile images was added in 6.3.0. The instructions below are based on Be Yours 9.5.1.

Steps:

1. Add the Image Comparison Section

• From Shopify admin, go to Online Store > Themes.
• Find your Be Yours theme and click Customize.
• Open the page template where you want to display the comparison.
• Click Add section and select Image comparison.
• Add or configure the two Look blocks.
• Click Save.

2. Configure the Look Blocks

Each Look block represents one side of the comparison. Use two blocks for a before-and-after comparison.

• First Look block: Before image.
• Second Look block: After image.

Setting	Description
Image	Desktop image for the look.
Mobile image	Optional image shown on mobile. If empty, the desktop image is used.
Heading	Optional label, such as Before or After.
Heading size	Small, Medium, or Large.
Heading position	Start, Center, or End.
Enable highlight	Applies highlight styling to italic text in the block heading.
Highlight style	Selects the highlight effect.

The section supports a maximum of 2 Look blocks. The Look headings are shown on desktop and hidden on mobile.

3. Configure the Comparison Layout

Open the Image comparison section settings.

Setting	Description
Layout	Choose Horizontal or Vertical comparison.
Desktop height	Select a fixed height, Full screen, or Adapt to first image.
Mobile height	Select Auto, a fixed height, Full screen, or Adapt to image.
Make section full width	Extends the comparison area across the available page width.
Show section divider	Adds a divider above the section.

Tip: Use images with matching dimensions and aligned subjects for the clearest comparison. You can upload separate mobile images to improve framing on smaller screens.

4. Configure the Section Heading

Setting	Description
Heading	Title displayed above the comparison.
Heading size	Small, Medium, or Large.
Heading alignment	Left, Center, or Right.
Heading tag	Selects the heading tag for page structure and SEO.

The section heading is separate from the optional Heading inside each Look block.

5. Configure Colors, Highlight, and Spacing

Setting	Description
Lines	Sets the comparison divider color.
Highlight	Sets the color used by highlight effects.
Enable highlight	Enables highlight effects for the section heading.
Highlight style	Selects the highlight effect.
Top padding	Adjusts spacing above the section.
Bottom padding	Adjusts spacing below the section.

For highlight styling, select the text you want to highlight and click the italic (I) button in the editor. You can configure highlight styling separately for the section heading and each Look heading.

6. Notes and Troubleshooting

• Add two Look blocks to show distinct before-and-after images.
• If the images appear in the wrong order, rearrange the Look blocks.
• If an image is missing, check the Image setting in its Look block.
• If a mobile image does not appear, confirm it is assigned to Mobile image; otherwise the desktop image is used.
• If images are cropped, adjust Desktop height or Mobile height and check the image proportions.
• If the divider is hard to see, change the Lines color.
• If highlighted text does not appear, enable highlight and italicize the desired text.
• If a Before/After label does not appear on mobile, this is expected behavior.
• For an interactive comparison, customers drag the divider to reveal more of either image.

If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.