How to use the Upsell.com announcement bar to encourage time-limited storewide discounts | Shopify

What is the Announcement Bar?

The Announcement Bar is a narrow banner that appears at the top of customers' shopping experience and promotes a time-limited, storewide discount. The Announcement Bar lets you show a time-limited discount with a countdown timer that can be accepted on your Thank You anad Order Status pages and then carry over to the online store where customers can proceed to benefit from the discount they accepted.

The goal is to provide a cleaner, integrated way to create urgency and increase conversions, without intrusive popups.

Where does the Announcement Bar appear?

When enabled in the discount timer, the Announcement Bar can be set to appears up to two locations:

• Thank you page
• Order status page

Once you've added the announcement bar to your store, it will display on your online store as a bar at the top of the screen.

Both of these locations share the same offer and countdown logic, so customers see a consistent message as they move through the journey.

What we will explore in this guide:-

This guide will walk you through:

• Enabling necessary technology on the cart drawer
• Creating a new Thank You page slot in Upsell.com
• Configuring the timer and discount
• Creating and editing the Thank You page announcement bar
• Configuring the Online store bar to show the discount code
• Testing the full flow on your storefront

We will not explore the following in any substantive detail:-

• How to create slots and widgets in general - more information can be found by clicking the link here
• How to add slots to your store's theme/page editor - more information can be found by clicking the link here
• Configuring the timer and discount - more information can be found by clicking the link here

How to create a discount announcement bar with timer on the thank you page

First we need to enable the technology that will enable Upsell.com to work its Announcement Bar magic. Here's how:-

1. Ensure that slot-technology is enabled

1. The easiest way to turn this technology on is accessed via Upsell.com's Flow Builder

2. Click Cart drawer on the Pages window on the left-hand side

3. Click Enable slots on the cart drawer

4. When the Cart Drawer editor loads up, ensure that 'Cart Drawer Slots…' is enabled

2. Create a new Thank You page slot

1. In your Shopify admin, go to Apps → Upsell.com and open the Thank you page flow

2. Click Create a slot

3. In the dialog, click the pre-made Announcement Bar slot

4. Click Create to confirm

3. Place the Thank You slot in the Shopify theme editor

1. From the slot page, click Place your slots in the Shopify editor

2. In the Shopify editor, click Add block in the Thank You page section

3. Select the correct Upsell.com Announcement Bar block for the page you are adding this to (e.g. Thank You page or Order Status page)

4. Click Save in the theme editor

5. Click Exit

4. Configure timer and discount

To configure the timer and discount parts of this widget, please follow the helpdesk article contained here.

For the purpose of our worked example, we are going to be keeping a 10% discount that is going to be called:-

20_min_discount

5. Amending the Thank You / Order Status page bar

Now that we've got the special Upsell.com technology enabled and the Widget set up on the theme editor we can now begin editing the Announcement Bar widget itself.

Add and format the text that will appear in the Announcement Bar on the page

1. You can:-

• amend the text
• insert/edit a hyperlink (including whether you'd like the link to open in the current window or a new window)
• change the font size
• change text alignment
• change text color
• bolden and italicize

More information about all of these can be found here

I've gone with a hyper-linked, large, center-aligned, bold banner with a 'success' color - usually green, but dependant on your settings.

2. You can choose to replace the text with different text upon the timer's expiry. To do so, click timer expired settings belown the text box. You'll be able to edit the text in exactly the same way as the initial announcement bar, as well as previewing how that looks

3. Once you're happy with your design, click Save to apply the text and link changes

6. Configure timer-expired behaviour

1. Please see detailed information here

7. Configure the Accept button

1. Click on the Accept button element in the settings for the thank you page bar

2. Click Button type and select whether you want the accept button to be primary, secondary or plain

3. Enter the text you would like to appear on the accept button

4. Click Save

8. Configure the close button and bar style

1. Select the Close button element

2. Decide whether you wish to provide your customers with an option to close the Announcement Bar

3. Click Save

4. If you decide to provide your customer with an option to close, select your preferred button style)

5. Click Save

9. Configure the Online Store bar and show the discount code

1. In the widget, open the Online store bar block and click Text

2. Enter the text of your choice and format as you wish

3. As before, you can:-

• amend the text
• insert/edit a hyperlink (including whether you'd like the link to open in the current window or a new window)
• change the font size
• change text alignment
• change text color
• bolden and italicize

More information about all of these can be found here

4. You can insert the dynamic tag {{discount code}} which will show the discount code you built into the widget earlier at step 4

10. Fine-tune timer-expired settings for the Online Store bar

1. Open TIMER EXPIRED SETTINGS for the Online store bar discount

2. You can choose to replace the text with different text upon the timer's expiry. To do so, click timer expired settings belown the text box. You'll be able to edit the text in exactly the same way as the initial announcement bar, as well as previewing how that looks

2. You can choose to replace the text when the timer expires by checking the box and can then preview how that expired text will display by clicking preview active offer

4. Click Save

11. Test the full flow on your storefront

1. Open your storefront (for example, 34r234524243.myshopify.com) and click Catalog

2. Click a product that will satisfy the condition you created on the page you are testing. Buy the product and reach the thank you / order status page you are testing

3. On the Thank You / Order status page, verify that:-

• The announcement bar is visible at the top
• The countdown timer is running
• The accept button works as expected
• The close button works as expected (if selected)

4. Check that the discount is applied correctly on products added during the time the storewide discount applies:-

Troubleshooting tips

• If the bar does not appear on the Thank You page, confirm that:

‎ ‎ ‎ ‎ ‎ * The slot is created and saved‎

‎ ‎ ‎ ‎ ‎ * The Upsell.com block is added to the Thank You page in the Shopify editor

‎ ‎ ‎ ‎ ‎ * The discount and timer settings are active for your test order

• If the Online store bar does not show the discount code, check that:

‎ ‎ ‎ ‎ ‎ * You added {{discount code}} in the text configuration

‎ ‎ ‎ ‎ ‎ * The bar is linked to the correct discount configuration

‎ ‎ ‎ ‎ ‎ * The timer has not yet expired for that shopper

Well, that's a wrap!

If this article did not solve your issue, our support team is available for you 24/7. Just click the live chat button at the bottom-right corner of this page.

Updated on: 26/11/2025