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

Store Design
,
1

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

2

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

3

Hi,

Do you remember where you add the following code?:

kevinkarma55_0-1729882223511.png
kevinkarma55_0-1729882223511.png241Ă—273 7 KB

4

nope, is it possible to find it?

5

try finding it in theme.liquid

6

I don’t see it

7

how about header.liquid ?

8

yes, found it! thanks!

What now?

1 Like
9

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 code looks like this:

and SAVE

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