Show the banner only when discounted upsells are in the cart

This recipe shows the announcement banner only while the cart shows an upsell with a reduced price, for example one with an upsell discount or a compare-at price. Combined with a countdown, the banner adds urgency exactly when there is a deal to grab.

Custom CSS is the simplest way to do this: no script needed, and it reacts instantly when the upsells change.

Add the CSS

1. Set up the banner

   Turn on and write your banner under Cart designerAnnouncement banner, for example "Upsell deals end in {countdown}". See Announcement banner and countdown.

2. Open Custom CSS

   Go to Cart designerCustom CSS.

3. Paste the CSS

   Paste the code below into the CSS editor, after any CSS you already have.

4. Check and save

   Open the preview with an upsell that has a reduced price, check that the banner appears, then click Save.

/* Hide the banner unless a discounted upsell is in the cart */
.ec-banner-container {
  display: none;
}
.ec-cart-inner:has(.ec-upsell-price-if-sale) .ec-banner-container {
  display: flex;
}

The first rule hides the banner. The second shows it again whenever the cart contains an upsell price marked as reduced.

You can also type a prompt into the AI generator in the same section, for example "Only show the announcement banner when an upsell with a sale price is visible", and let it write similar CSS.

Use the same idea elsewhere

The same pattern can show or hide other visual elements, such as the upsell heading or subheading.