Dynamic Banner Ads let you show each subscriber a banner personalized to who they are; by segment, subscription status, product, lifecycle stage, location, and more. When a subscriber qualifies for more than one banner, banners display as an automatic carousel so they see every message that applies to them.
Follow the steps below to get started.
Before You Begin
You must be using Customer Portal V3 (accessed via Customer Portal (Beta) in your left-hand navigation).
Dynamic segment targeting requires at least one active segment. If you haven't created segments yet, start with Creating Universal Segments and the Universal Segments Playbook before continuing.
1. Add a Banner Ad Widget to Your Portal
The Banner Ad is a widget you place in your portal layout like any other component.
To add a banner:
Navigate to Customer Portal in your left-hand navigation.
Click the Widgets tab in the editor panel.
Locate one of the Banner Ads in the widget list.
Drag the Banner Ad widget onto the portal canvas and drop it into your desired layout zone.
A new banner widget appears in an unconfigured state, ready to be set up.
📌 Note: You can place up to 4 Banner Ad widgets in your portal layout. Each widget is independently configured, so changes to one banner do not affect any other. A count indicator in the widget panel shows how many of the 4 slots are currently filled.
2. Upload Your Banner Images
Each banner supports separate images for desktop and mobile so your creative looks right on every screen.
To upload images:
Click the Banner Ad widget on the canvas to open its configuration panel.
Under Desktop Image, click the upload area or drag and drop a file to upload your desktop creative.
Under Mobile Image, click the upload area or drag and drop a file to upload your mobile creative.
Once uploaded, a thumbnail preview of each image appears in the slot.
GIFs are fully supported and will animate in the banner. Upload them the same way as static images.
Supported formats: JPG, PNG, GIF, WebP, SVG, AVIF. Maximum file size: 10MB per image.
📌 Note: Banner display size is determined by the layout zone where the banner is placed. A full-width zone uses the desktop image; a narrower zone uses the mobile image. Upload both to ensure your banner looks correct at every placement width.
✅ Best Practice: Design desktop and mobile creatives separately. A desktop banner cropped for mobile often loses key copy or imagery. Purpose-built mobile creative converts better.
3. Set a Banner Action
The banner action determines what happens when a subscriber clicks the banner. You can send subscribers to any URL, or connect the banner directly to a Quick Action.
To set the banner action:
In the banner configuration panel, locate the Banner Action section.
Click the Action on Click dropdown and select your action type:
Go to Link: subscribers are taken to the URL you specify when they click the banner.
Add Products: subscribers see a one-click product add flow when they click the banner.
None: elicits no action when clicked, useful for educational material without the need for an external source to be linked
Quick Action: subscribers are taken to the quick action that is selected, enabling you to push forward exciting flows from within the customer portal
If you select Go to Link
Enter your destination URL in the Link field.
Subscribers will be taken directly to this link if enabled
💡 Tip: Links are extremely helpful for navigating customers to external material, such as a landing page or expanded educational material regarding loyalty, new products, or benefits of the subscription.
If you select Add Products
Click Select within the Add Products section.
Choose the product you want subscribers to be able to add directly from the banner.
📌 Note: Products must be configured in Products > Catalog for custom pricing and variant restrictions to apply to the banner add-on flow. Products not configured there will pull default Shopify pricing and all available variants. Add-On and Subscription availability will depend on the settings in the Catalog.
If you select Quick Action
Select a previously created Quick Action from the list
Subscribers will be taken to the Quick Action flow when embedded in the banner ad
💡 Tip: Quick Actions enable hundreds of user flow opportunities that can also be exposed within the banner ad. More information can be found in the Quick Actions Playbook.
4. Target the Banner to a Segment
Segment targeting controls which subscribers see this banner. If you want the banner to show to everyone, leave targeting set to Everyone. To show the banner only to subscribers in a specific audience, select one or more segments.
To set segment targeting:
In the banner configuration panel, locate the Target Banner to section.
Click the Target dropdown.
Select Everyone to show the banner to all subscribers, or select one or more of your active segments to restrict who sees this banner.
📌 Note: If you have no active segments, a prompt appears instead of the dropdown: "You don't have any segments. Why don't you go ahead and make one." Click Make a Segment to open the Segments builder in a new tab without losing your current banner configuration.
✅ Best Practice: Pair segment-targeted banners with a default banner. Use a banner targeted to a specific segment (e.g., subscribers who buy vanilla protein) alongside a banner set to Everyone for a general message. Subscribers who match the specific segment will see both in a carousel; everyone else sees only the general banner.
5. Add Additional Banners (Optional)
You can configure unlimited banner options within a single Banner Ad widget and up to 3 Banner Ad widgets in your portal layout. Use multiple banner options within a widget to run different creative for different segments in the same placement.
To add another banner option within the same widget:
In the banner configuration panel, click Add Banner Option.
Configure the new option — upload images, set an action, and set a segment target — exactly as you did for the first.
Repeat for additional options as needed.
To add a second (or third, or fourth) Banner Ad widget to a different zone in your layout:
Click the Widgets tab.
Drag another Banner Ad widget onto the canvas into a new layout zone.
Configure it independently.
How the Carousel Works
When a subscriber qualifies for more than one banner because they match more than one of the segments you've targeted, all applicable banners display as an interactive carousel in their portal. The carousel includes left/right navigation arrows, dot indicators, and swipe support on mobile.
If a subscriber qualifies for exactly one banner, it displays as a static image with no carousel chrome. If a subscriber qualifies for no banners, the banner zone is hidden entirely.
You set the targeting rules; Stay handles the carousel automatically.