How To Hide Announcement Bar From Specific Product Page

Solved

How To Hide Announcement Bar From Specific Product Page

englishcyclist
Shopify Partner
12 0 8

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

 

Accepted Solution (1)

theycallmemakka
Shopify Partner
1690 407 426

This is an 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' %}

 

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 4 (4)

theycallmemakka
Shopify Partner
1690 407 426

This is an 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' %}

 

 

Support Me: Buy me a Coffee


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

englishcyclist
Shopify Partner
12 0 8

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

nidhidhiman004
Shopify Partner
74 5 8

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

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639

Stacksols
Shopify Partner
6 3 3

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