How to Place an Announcement Bar Inside the Cart Drawer or Cart Page

Placing an announcement bar inside the Cart Drawer or Cart Page allows you to deliver important messages at a key moment in the customer journey — right before checkout 🛒

This is especially useful for promoting free shipping thresholds, limited-time offers, or important checkout information.

Cart Page Announcement Bar Placement 🛒

When using the Cart Page announcement bar, there are two placement options available in the Placement tab.

At the Top of the Cart (Default)

If you select “At the top of the cart”, the announcement bar will be displayed by default at the top of the cart page, and will show up on the Cart Drawer, too.

This option:

• Requires no additional placement changes when you publish the Cart Page bar.
• Automatically places the announcement bar in a visible position on the cart drawer and the cart page
• It is ideal for free shipping messages or last-minute important information

Simply publish the Cart Page announcement, and it will appear at the top of the cart page and Cart Drawer

Custom Position on the Cart Page 📍

Using Custom position allows you to place the Cart Page announcement bar exactly where you want inside the cart page — for example, between cart items, above totals, or near checkout actions. Please note that using this section is designed for the cart page, and the Cart Drawer will not show the announcement bar. This type requires the App Block on the Cart Page template and pasting the Bar ID inside.

Step 1: Select “Custom position”

1. Open the Essential Announcer app
2. Open your Cart Page announcement bar
3. Go to the Placement tab
4. Select Custom position

Once selected, the announcement bar will no longer use the default cart placement.

Step 2: Copy the Announcement ID 🆔

After selecting Custom position, an Announcement ID will be displayed.

• Copy the Announcement ID
• This ID is required to connect the announcement bar with the app block in your theme

⚠️ The announcement must be saved and published for the ID to become available.

Step 3: Add the App Block to the Cart Page template 🎨

1. Go to your Shopify Admin
2. Navigate to Online Store → Themes
3. Click Edit theme
4. Open the Cart page template
5. Add the Essential Announcer – Announcement Bar app block to you preferred location
6. Paste the copied Announcement ID into the app block

Step 4: Adjust Position and Save ✅

• Drag the app block to your desired location on the cart page template
• Click Save to apply your changes

The announcement bar will now appear exactly where the app block is placed on the cart page.

Using the Announcement Bar in the Cart Drawer 🛒

To display an announcement bar inside the Cart Drawer, you should use the Cart Page announcement bar type.

Default Setup ✅

In most cases, the announcement bar will appear in the Cart Drawer automatically when using Shopify-based themes.

To set this up:

1. Create a Cart Page announcement bar in the Essential Announcer app
2. Open the Placement tab
3. Select At the top of the cart option
4. Publish the announcement

With this setup, the announcement bar will be displayed at the very top of the Cart Drawer by default, without any additional configuration.

If the Announcement Bar Does Not Appear in the Cart Drawer ⚠️

Some themes use a custom cart drawer structure that may prevent the announcement bar from appearing by default.

If the announcement bar does not show up:

• A custom fix using a code snippet may be required. You can add this snippet to your Cart Drawer Theme file to your preferred Cart Drawer location:

<div class="essential-announcement-bar-side-cart"></div>

• Our team can implement this fix for you ASAP. Simply reach out to our 247 tech support team.

  
  

💙 If you run into this issue, please contact our support team and we’ll be happy to help with the implementation.

📩 Contact us anytime at support@essential-apps.com — we’re available 24/7.