Skip to main content

​
Height

The Height setting controls how thick the announcement bar appears. It offers three options: Slim, Normal, and Thick. Slim keeps the drawer more compact, making room for cart content—especially helpful on smaller screens. Normal sits between the two. Thick 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. Two Upcart carts comparing the announcement bar positioned above and below the products

​
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.
The built-in countdown timer is session-based and counts down from a set number of minutes. It does not support recurring or daily countdowns that reset at a specific time (for example, counting down to 2:00 PM every day). This functionality is not currently available in Upcart.

​
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. Color picker open for styling text in the announcement text editor
The Announcement Text field does not support hyperlinks—there is no link or URL button in the formatting toolbar, and pasted <a> tags or Markdown links are stripped on save. To make the announcement clickable or include a link, use the Custom HTML module instead (see below).
Because the built-in Announcement Text field does not render hyperlinks, you can either replace or supplement the announcement bar by injecting a link with Custom HTML:
  1. Go to Upcart > Cart Editor > Settings > Custom HTML.
  2. Set HTML Location to Above announcements/rewards (to appear above the announcement bar) or Below header/announcements/rewards (to appear directly under it).
  3. Paste a snippet with your link, for example:
  4. Click Save, then test in your live cart.
For more on Custom HTML locations and styling, see Custom HTML and Custom CSS. Upcart’s support team does not write or debug custom code—reach out to a Shopify Expert if you need help building it. If you’re using the countdown feature, insert the timer variable directly into your message. Use {{timer}} for V2 carts or {TIMER} for V1 carts. Announcement text field with the timer countdown variable added to the message

​
Important

Make sure to manually type the timer variable ({{timer}} for V2, {TIMER} for V1) 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. Add your script in the “Scripts (Before Load)” section rather than the Custom HTML module. This is a load-timing requirement, not a security restriction—Custom HTML does execute scripts, but they run too late to hook into the cart’s load event reliably. The “Scripts (Before Load)” section runs your code before the cart loads, so callbacks like upcartSubscribeCartLoaded fire correctly. Example code:
Legacy note: window.upcartOnCartLoaded still works but is deprecated and logs a console warning. Use upcartSubscribeCartLoaded for all new scripts. Be sure to test the placement and syntax of your code carefully. Some platform restrictions may still affect how scripts are processed.