Goal: We want to show the announcement banner only if upsells are displayed that are discounted in price. The banner will create a countdown to create additional urgency to add these now discounted products.
Approach: While we could be using custom HTML and hide the banner with a script, a much easier and highly performant way to do this is to use custom CSS.
/* hide banner unless discounted upsells are in cart */
.ec-banner-container {
display: none;
}
.ec-cart-inner:has(.ec-upsell-price-if-sale) .ec-banner-container {
display: flex;
}
This CSS was generated by the CSS Generation AI.
Thoughts:
In a similar way, we could hide and show other components, for instance, the upsell headline or subheadline.
Important: We are just visually hiding the banner. Some components, like addons, should rather be deactivated properly using the cart api. Otherwise users might not be able to add or remove addons anymore, because we’d just be hiding the upsell component visually.