Height
The Height setting controls how thick the announcement bar appears. Selecting the slim option keeps the drawer more compact, making room for cart content—especially helpful on smaller screens. The thick option provides greater visual emphasis, helping your message stand out to customers.
Position
Use the Position setting to choose whether the announcement bar appears above or below the product list inside the cart drawer. It will always display just above the footer section, regardless of placement.
Timer (minutes)
If you'd like the announcement to expire after a set time, you can enable the countdown timer and define its duration in minutes. Since the display is minute-based only, we recommend setting a maximum of 59:60 to ensure accurate behavior. Once the timer runs out, the entire announcement bar is automatically removed from the cart.
Announcement Text
This section lets you enter and format the message displayed in the announcement banner. You can style specific portions of the text using the formatting bar above the input field, which includes options for bold, italics, underline, and color.
If you're using the countdown feature, insert the {TIMER} variable directly into your message where you want the time to appear.
Important
Make sure to manually type the {TIMER} variable rather than copy-pasting it. This avoids hidden formatting issues that could prevent the timer from displaying correctly in your live cart.
Font size
You can control the size of the announcement text using the slider, with options ranging from 10px to 24px. This helps ensure readability across both mobile and desktop experiences.
Colors
Background Color allows you to define the overall fill color of the announcement bar. Border Color lets you adjust the horizontal lines above and below the banner for a styled container look.
Advanced Timer Configuration
For additional functionality, JavaScript can be used to customize the countdown timer. Note that AfterSell restricts direct JavaScript usage in the Custom HTML section for security purposes; instead, use the "Scripts (Before Load)" section. Example code:
<script> window.upcartOnCartLoaded = function(cart) { // Your countdown timer code here }; </script>Be sure to test the placement and syntax of your code carefully. Some platform restrictions may still affect how scripts are processed.