How to show Announcement bar only on Cart page

[amisha-29]

I want to show Announcement bar only on Cart page not on every page how can i do this? I'm using dawn theme currently.

[topnewyork]

Hi @amisha-29,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const bar = document.querySelector('.announcement-bar-section');

    if (!bar) return;

    if (window.location.pathname === '/cart') {
      bar.classList.remove('hide-bar');
    } else {
      bar.classList.add('hide-bar');
    }
  });
</script>

<style>
  .hide-bar {
  display: none !important;
}

</style>

Thanks!

[amisha-29]

I added this code as you told me but now I'm not able to see anything for the header section so i can add that announcement bar only on my cart page. Header section is not showing.

[steve_michael2]

Hello @amisha-29 ,

Can you please share store URL?

[AnneLuo · Accepted solution]

Hi, @amisha-29 

Steps:
1. Go to your Shopify Admin:
Online Store > Themes > Dawn > Edit code

2. Locate the announcement bar section:
Find and open:
sections/announcement-bar.liquid

3. Add a condition to render only on the cart page:
Wrap the entire content of the announcement bar with this {% if %} condition:

{% if request.page_type == 'cart' %}
<!-- Original announcement bar code here -->
{% endif %}

Your updated announcement-bar.liquid might look like this:

{% if request.page_type == 'cart' %}
<div class="announcement-bar">
<!-- existing announcement bar HTML here -->
</div>
{% endif %}

If you will unable to implement the same then I'm happy to do this for you, let me know.

Hope this helps! If yes then Please don't forget hit Like and Mark it as solution!

[amisha-29]

It worked thankyou