> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.omegatheme.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Banner Widget

The **Banner Widget** allows you to display an active discount campaign directly on your storefront.
It helps highlight ongoing offers and guide customers to claim deals faster — increasing visibility and conversions.
> ⚠️ **Important:** The banner will only appear on your storefront if:The selected **campaign is live**, andThe **Banner Widget display** is **turned on**.

## Where to find the Banner Widget
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/anh-man-hinh-2025-12-29-luc-17_1xl55hq.png)
1. From your Shopify admin, go to **Apps › P: Quantity Breaks & Bundles**.
2. In the left menu, click **Boost conversion**.
3. Open the **Banner Widget** tab.
4. Toggle the **Turn on** button to enable the banner.
5. Use the **Preview Banner** panel on the right to view how it appears on your storefront.


## Setting up your banner
### 1. Content settings
#### **Select banner type**
Choose how you want your banner to appear:
* **Simple banner** – Displays one banner in a fixed position.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/widgetbanner-1_n3c35b.png)
* **Running line banner** – Scrolls text horizontally across the screen.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/widgetbanner-2_esrrrt.png)
* **Multiple rotating banners** – Cycles through several banners automatically.
![](https://storage.crisp.chat/users/helpdesk/website/-/8/3/8/3/8383e5404a31c000/widgetbanner-3_4tgmqp.png)
### 2. Banner content
You can use special variables to display dynamic campaign values:
* `%mnq`, `%mxq` → show **minimum** and **maximum eligible quantity**
* `%mnd`, `%mxd` → show **minimum** and **maximum discount value**
| Field | Description |
| ---- |
| **Campaign** | Select the campaign you want to display. |
| **Title widget** | Use `{campaign_name}` or `{display_name}` for dynamic campaign names. |
| **Subtitle widget** | Add optional supporting text or use discount placeholders. |
| **Banner icon** | Click once to select, click twice to unselect an icon. |
| **Icon color** | Define the color for your icon. Example: `#FFFFFF, 100%`. |
| **Icon size (px)** | Adjust icon size (default 20px). |

### 3. Call to action
Choose what happens when customers interact with your banner:
| Option | Description |
| ---- |
| **Button** | Adds a clickable button with customizable text and colors. |
| **Make the entire banner clickable** | Turns the whole banner area into a clickable link. |
| **No call to action** | Displays banner content without any clickable elements. |
If you choose **Button**, you’ll see additional customization fields:
| Field | Description |
| ---- |
| **Button text** | Example: *Claim Now* |
| **Button text color** | Example: `#313131, 100%` |
| **Button background color** | Example: `#FFFFFF, 100%` |
| **Close icon** | Allow customers to dismiss the banner if they wish. |

### 4. Select page to display
Choose where to show the banner across your storefront:
* **Every page** – Displays site-wide.
* **Home page only** – Displays on your home page.
* **All product pages** – Displays on all product detail pages.
* **All collection pages** – Displays on collection listing pages.
> 💬 Need a custom display position? ${color}[#005bd3](Contact us )for advanced setup.

### 5. Display settings
| Option | Description |
| ---- |
| **Sticky bar on top** | Keeps the banner fixed at the top of your page. |
| **Always visible while scrolling** | Keeps the banner visible even when users scroll down. |

### 6. Background
You can customize the banner’s background to match your store branding.
| Field | Description |
| ---- |
| **Single color background** | Choose one flat background color. |
| **Gradient background** | Blend two colors using Start and End colors. |
| **Start Color** | Example: `#E3150E, 100%` |
| **End Color** | Example: `#0F0902, 100%` |
| **Border size (px)** | Set the border thickness. |
| **Border radius (px)** | Adjust corner roundness. |
| **Border color** | Example: `#0F0902, 100%` |

### 7. Typography
Adjust text size and colors for both desktop and mobile.
| Setting | Description |
| ---- |
| **Title size on desktop (px)** | Example: `28` |
| **Title size on mobile (px)** | Example: `12` |
| **Title color** | Example: `#0D2B35, 100%` |
| **Subtitle size on desktop (px)** | Example: `14` |
| **Subtitle size on mobile (px)** | Example: `10` |
| **Subtitle color** | Example: `#0D2B35, 100%` |

## Preview and activate
1. Review your banner setup in the **Preview Banner** panel.
2. Toggle **Turn on** to activate the banner.
3. Visit your store to confirm the banner appears correctly.
> ⚠️ **Reminder:** The banner will only display on your store when:The campaign you selected is **live**, andThe **Banner Widget display toggle** is turned **on**.

## Best practices
* Keep titles short (under 50 characters).
* Use gradient backgrounds to attract attention.
* Match banner colors with your brand palette.
* Test visibility on both desktop and mobile.
* Combine the banner with the **Popup Widget** for stronger engagement.

## FAQs
**1. My banner isn’t showing - what should I check?**
Ensure that:
* The **Banner Widget** is turned on.
* The **campaign** is currently live.
* The app embed is active in your Shopify theme (Online Store → Customize → App embeds → enable *Pareto*).

**2. Can I display multiple campaigns?**
Yes. Choose **Running line banner or Multiple rotating banners** to show multiple campaigns automatically.

**3. What are `%mnq`, `%mxq`, `%mnd`, and `%mxd`?**
These are dynamic placeholders that pull values from your campaign setup:
* `%mnq` → Minimum eligible quantity
* `%mxq` → Maximum eligible quantity
* `%mnd` → Minimum discount value
* `%mxd` → Maximum discount value

**4. Can customers close the banner?**
Yes, enable the **Close icon** option so customers can hide it temporarily.

**5. Will the banner affect my theme layout?**
No. The banner is fully responsive and designed to work smoothly with most Shopify themes.