Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an 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!
This is an accepted solution.
Since you mentioned breadcrumbs.liquid, add the following at the top of that file:
<style>
.breadcrumbs {
display: none;
}
</style>
You can remove this via CSS instead of LIquid, would you mind sharing your store's URL so we can provide the solution here?
yes! its missfabbeautylashes.com
Great, would you mind just taking a screenshot of what you want to remove so we're aligned on the need?
Clear! On Mobile only or desktop as well?
Yes! I would love to remove it on both desktop and mobile 🥺
Add the following code to your theme.css file:
#shopify-section-collection > div > div {
display: none;
}
Let me know!
would these go under theme.css.liquid ?
Correct!
i added it, it didn't change 😞
This is an 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!
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!
WAIT! OMG IT WORKED!!1
THANK YOU SOOOOO MUCH!!!
Amazing! Don't forget to like and mark the answer as a solution to help the community better.
Cheers!
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!
Hi @MISSFABBEAUTY !
Would you mind sharing your store's password so we can check this?
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!
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!
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!
This is an accepted solution.
Since you mentioned breadcrumbs.liquid, add the following at the top of that file:
<style>
.breadcrumbs {
display: none;
}
</style>
amazing! it worked.
thank you thank you thank you!!
You're welcome! Cheers!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024