How To Hide Announcement Bar From Specific Product Page

[englishcyclist]

Hi all,

I would love some help removing the standard Shopify Announcement Bar from a particular product page.

(https://englishcyclist.com/products/custom-map)

Its a unique page where the standard product page template is replaced with a custom app I had developed... Is it possible to remove the announcement bar from a single page like this?

If it helps I am using Dawn v2.5.0

Many thanks, Rob

Cheers, Ro

[theycallmemakka · Accepted solution]

Hi @englishcyclist ,

You can add bellow code on the theme.liquid just above </head>

{% assign target_page = 'shopify-setup-basic' %}
    {% if target_page contains product.handle %}
      <style>
        div#shopify-section-announcement-bar {
            display: none!important;
        }
      </style>
    {% endif %}

You can add multiple product pages on target_page seperated by comma. For example:

{% assign target_page = 'shopify-setup-basic, page-2, page-3' %}

[englishcyclist]

Thanks! I started with your solution as it was first in the list and it worked perfect first time thank you!

[nidhidhiman004]

Hi @englishcyclist 

add this script before </head> on theme.liquid file

<script>
document.addEventListener('DOMContentLoaded', function () {

var currentPage = window.location.pathname;

var isProductPage = currentPage.includes('/products/');
var isCollectionPage = currentPage.includes('/collections/');

if (!isProductPage && !isCollectionPage) {
document.querySelector('.announcement-bar').style.display = 'block';
} else {

document.querySelector('.announcement-bar').style.display = 'none';
}
});

</script>

or

you have do edit some files on header or announcment file

{% unless template contains 'product' or template contains 'collection' %}
<div class="announcement-bar">
<p>shippings text</p>
</div>
{% endunless %}

Thanks

[Stacksols]

Hello Rob, 

Yes, it is possible. Open the theme.liquid file and add this code at the bottom, just before the closing </body> tag.

{% if template == 'product' %}
   {% if product.handle == "custom-map" %}
<style>
.shopify-section-announcement-bar{
   display:none !important;
}
</style>
   {% endif %}
{% endif %}

Do let me know if you still need any help, I would love to help.

Regards,

Stacksols