HOW TO HIDE COLLECTION / PRODUCT HEADERS?

[MISSFABBEAUTY]

How can you hide collection/product headers? I run on the grid theme.

I know you need to edit the theme code, but how can I do this? 

I find this header to be distracting from my website theme which puts my product/description down below hurting my conversions. 

It looks something like this, and this is what I would like to hide from my theme. 

PRODUCTS

Home / Collection / Products

[JHKCreate · Accepted solution]

The code you have removes the breadcrumb from the Collection, add this one as well to remove the code from the Product page:

#shopify-section-product > div {
    display: none;
}

Let me know!

[JHKCreate]

Hi @MISSFABBEAUTY 

You can remove this via CSS instead of LIquid, would you mind sharing your store's URL so we can provide the solution here?

[MISSFABBEAUTY]

yes! its missfabbeautylashes.com 

[JHKCreate]

Great, would you mind just taking a screenshot of what you want to remove so we're aligned on the need?

[MISSFABBEAUTY]

 

[JHKCreate]

Clear! On Mobile only or desktop as well?

[MISSFABBEAUTY]

Yes! I would love to remove it on both desktop and mobile 🥺

[JHKCreate]

Add the following code to your theme.css file:

#shopify-section-collection > div > div {
    display: none;
}

Let me know! 

[MISSFABBEAUTY]

would these go under theme.css.liquid ?

[JHKCreate]

Correct!

[MISSFABBEAUTY]

i added it, it didn't change 😞 

[JHKCreate · Accepted solution]

The code you have removes the breadcrumb from the Collection, add this one as well to remove the code from the Product page:

#shopify-section-product > div {
    display: none;
}

Let me know!

[MISSFABBEAUTY]

I added this, did not work. I believe i'm adding it in the right place, not sure why its not coming off.

 WAH. i appreciate the help though! 

[MISSFABBEAUTY]

WAIT! OMG IT WORKED!!1 

THANK YOU SOOOOO MUCH!!! 

[JHKCreate]

Amazing! Don't forget to like and mark the answer as a solution to help the community better.

Cheers!

[MISSFABBEAUTY]

HELLO! i was wondering if you could help me again.

The header came back up, i noticed that the code i was using was also appearing on the site in the very bottom.

Please help with the same issue, i'd appreciate it! 

[JHKCreate]

Hi @MISSFABBEAUTY !

Would you mind sharing your store's password so we can check this?

[MISSFABBEAUTY]

The site is now up, i removed the coding to the site as well. 

Can you help me remove the header, i tried to do it again and it's not working 😞

do i put the coding side to side?

or below one another? 

thank you!

[JHKCreate]

Add the following code for the breadcrumbs to be hidden, the structure changed so the old code does not work anymore:

.breadcrumbs {
    display: none;
}

Let me know if that works for you! 

[MISSFABBEAUTY]

Where should I add this code? Under the breadcrumbs.liquid template? 

Also, should I be adding the other codes as well to my theme.css.liquid template? 

I'm seeing that after I add the coding to my pages, the coding appears on the website.

I very much appreciate the help!

[JHKCreate · Accepted solution]

Since you mentioned breadcrumbs.liquid, add the following at the top of that file:

<style>
.breadcrumbs {
    display: none;
}
</style>

[MISSFABBEAUTY]

amazing! it worked. 

thank you thank you thank you!! 

[JHKCreate]

You're welcome! Cheers!