Display announcement bar only on home & product page

[SethN1]

Hi, how would I display the announcement bar only on my home and product page, without hiding it from every page? Right now, I have it hidden from my normal pages, with the following: 

{% if page.handle == 'germs-on-toothbrushes' or page.handle == 'toothbrush-sanitizer-effectiveness' %}
<style>
.announcement-bar { display: none!important; }
.announcement-bar + .site-header { top: 0px; }
#PageContainer { padding-top: 0px; }
</style>
{% endif %}

However, now that I am posting blogs, I have not been able to figure out what to replace page.handle with to hide it on my blog posts. What code would I be able to insert to just display it on my product and home page? Thank you 🙂

[drakedev]

I suggest you not use the page handle to build this logic, but the template object

Here an example

{% if template != 'index' and template != 'product' %}
  <style>
    .announcement-bar { display: none!important; }
    .announcement-bar + .site-header { top: 0px; }
    #PageContainer { padding-top: 0px; }
    </style> 
{% endif %}

[turtleweb]

Hi, Remove your code and add the below code. So, announcement bar will be display only on the home page and product page.

{% if template == 'index' or template == 'product' %}
<style>
.announcement-bar { display: none!important; }
.announcement-bar + .site-header { top: 0px; }
#PageContainer { padding-top: 0px; }
</style>
{% endif %}

[2cb]

use this code under theme.liquid or where should I paste this code. I am trying to have announcement bar only on the collections page.

{% if template == 'collection" %}
<style>
.announcement-bar { display: none!important; }
.announcement-bar + .site-header { top: 0px; }
#PageContainer { padding-top: 0px; }
</style>
{% endif %}