Hi, is there a way to only enable sticky headers for my product pages?

[Mdb_Gioto]

Hi, is there a way to enable sticky headers only for my product pages?

I just want a normal header for the homepage of my website pages so it is easy to read. Thank you!

P.S. I am using symmetry theme theme

this is my link store: https://vomeroitaly.com/

thanks

[Guleria]

Hello @Mdb_Gioto ,

Yes possible but need customization.

If you can just find the classes which are used to make the header sticky.
Once you find it make them conditional

like this

{%- if template == "product" -%}

class will use 

{%- endif -%}

If you need help with code part you can drop me an email.

You can find the email in the signature below.

Thanks

[kevinkarma55]

Hi,

Do you remember where you add the following code?: 

[Mdb_Gioto]

nope, is it possible to find it?

[kevinkarma55]

try finding it in theme.liquid

[Mdb_Gioto]

I don't see it

[kevinkarma55]

how about header.liquid ? 

[Mdb_Gioto]

yes, found it! thanks!

 What now?

[kevinkarma55 · Accepted solution]

Good job! Ok so here is the part you need to change:

basically all the code that is inside .section-header {...} need to be put inside like following:

{% if template.name != "index" %} 
 .section-header {
   position: -webkit-sticky;
   position: sticky;
}
{% endif %}

so you final <style> code looks like this:

<style data-shopify="">
  .logo img {
    width: 270px;
  }
  .logo-area__middle--logo-image {
    max-width: 270px;
  }
  @media (max-width: 767.98px) {
    .logo img {
      width: 180px;
    }
  }
{% if template.name != "index" %} 
  .section-header {
    position: -webkit-sticky;
    position: sticky;
  }
{% endif %}
</style>

and SAVE

what I did above is that your section header sticky effect only works if page is not homepage