# Image comparison

This section is ideal for highlighting transformations, product effects, or service results. Its interactive slider feature engages users, making it a powerful tool for storytelling and enhancing credibility.

<figure><img src="/files/fiIslLMGgfGLdehAFyYa" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Image comparison** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/UTPVz0A3FfCsS7WCFPBy" alt=""><figcaption></figcaption></figure>

### 2, Section settings

* **Layout:**

{% tabs %}
{% tab title="Standard" %}
The header and description appear above the "Before" and "After" images. Suitable for designs that require a focus on introductory content.
{% endtab %}

{% tab title="Split" %}
The header and description are positioned to the left of the "Before" and "After" images. Ideal for space-efficient layouts that prioritize comparison imagery.
{% endtab %}
{% endtabs %}

* **Image height**: Controls the vertical dimensions of the "Before" and "After" images.
  * **Small**: Compact height, suitable for concise comparisons.
  * **Medium**: Balanced height that works well for most layouts.
  * **Large**: Tall images for dramatic comparisons or detailed visuals.

### **3, Block settings:**

Each section consists of two blocks: **Before** and **After**. The layout ensures that: The **Before block** always appears on the left. The **After block** always appears on the right.

* **Before block:**
  * **Image**: Upload the "Before" image.
  * **Mobile image**: Upload an image optimized for mobile displays. If not uploaded, the desktop image will be used.
  * **Image overlay opacity**: Adjust the transparency of the overlay on the image (0% to 100%).
  * **Label**: Add a descriptive label to identify the image, such as “Before” or a more specific descriptor. *Examples*: “Before Treatment,” “Original,” or “Day 1.” If left blank, the label will not display.
  * **Label position**: Choose the placement of the label: **Top left, Middle left, Bottom left.**
* **After block**
  * **Image**: Upload the "After" image.
  * **Mobile image**: Upload an image optimized for mobile displays. If not uploaded, the desktop image will be used.
  * **Image overlay opacity**: Adjust the transparency of the overlay on the image (0% to 100%).
  * **Label**: Add a label to describe the image, such as “After” or another specific term. *Examples*: “After Treatment,” “Enhanced,” or “Final Result.” If left blank, the label will not appear.
  * **Label position**: Choose the placement of the label: **Top right, Middle right, Bottom right.**

{% hint style="info" %}
&#x20;**Note**: *We recommend:*

* To achieve a smooth comparison, ensure that both images have the same dimensions and similar composition. Use identical lighting and framing for a more realistic comparison.
* Experiment with **overlay opacity** to enhance text visibility without overshadowing the images.
  {% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.byinspiredlabs.com/section/image-comparison.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.