# Comparison Banner

The **Comparison Banner** is a dynamic section that allows you to compare two or more products, services, or features side-by-side. It's ideal for showcasing key differences between similar products, helping customers quickly identify which option best suits their needs.

{% hint style="success" %}

1. **Go to Shopify Admin** > Online Store > Themes.
2. Click **Customize** on your active theme.
3. In the theme editor, click **Add Section** > **Comparison Banner.**
4. Customize the section by adding **images, pricing, and key feature comparisons**.
   {% endhint %}

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

### **Settings & Customization**

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

#### **Layout**

* **Expand to Full Width:** Enable this option to extend the banner across the entire screen width.
* **Color scheme:** You can customize the section’s appearance by changing the **text color, background color**, and more using **preset color** options.
* **Background Opacity:** Adjust transparency (Range: 0–100, Default: 100). This setting applies to the background image, customizable in theme settings.

#### **Before & After Image Settings**

* **Before Image:** Upload an image (Recommended size: 2480 × 980px).
* **Before Label:** Set a custom label (Default: "Before").
* **Text Position:** Choose **Top, Center, or Bottom** (automatically optimized for mobile).
* **After Image:** Upload an image (Recommended size: 2480 × 980px).
* **After Label:** Set a custom label (Default: "After").
* **Text Position:** Choose **Top, Center, or Bottom** (automatically optimized for mobile).

#### Section divider

* **Shapes** : Adds shape effects to the section. Options: **( Curve Top, Curve Bottom, Curve Both, None, Border Top, Border Bottom, and Both Border)**.


---

# 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://themessupport.gitbook.io/lollipop-theme/sections/comparison-banner.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.