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
- From your Shopify admin, go to Apps › P: Quantity Breaks & Bundles.
- In the left menu, click Advanced settings.
- Open the Banner Widget tab.
- Toggle the Turn on button to enable the banner.
- 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.
- Running line banner – Scrolls text horizontally across the screen.
- Multiple rotating banners – Cycles through several banners automatically.
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 |
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: |
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: |
Button background color | Example: |
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? 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: |
End Color | Example: |
Border size (px) | Set the border thickness. |
Border radius (px) | Adjust corner roundness. |
Border color | Example: |
7. Typography
Adjust text size and colors for both desktop and mobile.
Setting | Description |
|---|---|
Title size on desktop (px) | Example: |
Title size on mobile (px) | Example: |
Title color | Example: |
Subtitle size on desktop (px) | Example: |
Subtitle size on mobile (px) | Example: |
Subtitle color | Example: |
Preview and activate
- Review your banner setup in the Preview Banner panel.
- Toggle Turn on to activate the banner.
- 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.
Updated on: 27/10/2025
Thank you!