I already placed a banner on the Collection Page so I want to remove the Collection Title so that it won’t be redundant.
Here’s the URL
Topic summary
Issue: Users want to remove collection title text from their Shopify Debut theme collection pages to avoid redundancy with custom banners or images.
Primary Solution: Add CSS code to hide the collection title by editing theme.scss.liquid file:
- Navigate to: Online Store → Themes → Edit code → Assets → theme.scss.liquid
- Add CSS snippet at the bottom of the file
Common CSS Solutions Provided:
.collection-header .section-header h1 { display: none; }#shopify-section-collection-template .section-header h1 { display: none; }.header.section-header.text-center h1 { display: none; }#shopify-section-collection-template .collection-hero__title.page-width h1 { display: none; }
Key Challenges:
- Different CSS selectors work for different site configurations
- Some users report none of the generic solutions working for their specific setup
- File naming varies (some have
theme.cssvstheme.scss.liquid)
Resolution Pattern: When generic solutions fail, users share their site URL and screenshots with @oscprofessional, who inspects the specific site and provides customized CSS targeting the exact element class/ID. Multiple users confirmed success after receiving personalized CSS code.
Hello gofuturefresh,
Add this css to theme.scss.liquid
.collection-header .section-header h1 {
display: none;
}
Hello gofuturefresh,
Add this css at the end of file
Online Store-> Themes → Edit code->Assets->theme.scss.liquid
header.collection-header h1 {
display: none;
}
2 Likes
Thanks
I added this snippet on theme.scss.liquid on debut but nothing changed, is there something I am missing?
Hello hpilearning,
Can you share your site url?
So that i will check your site and give you solution here.
There may be different css for your site.
1 Like
https://health-plus-inc.myshopify.com/
temp code: cookie
Trying to remove the title so it only shows the image on the collection. (specifically on the home page as you scroll down to ‘find by category’ i want the titles off of those images as well as the category page if possible/necessary )
Do you also know how to remove a dark overlay on the ‘gallery’ input section? Thank you in advance!
This didnt work for me 
but perhaps im not looking at the right answer or question.
I want to remove the blank space where the collection titles used to be.
From the photo attached you will see the blank space I am talking about where the collection titles used to be displayed.
Hope someone can help! <3
Please share site url and password so that I will help you
None of those syntax were working for me. But I did figure it out by inspecting the website and found that this is what works.
header.section-header.text-center h1 {
display: none;
}
I tried it and it worked!!!
JasonR
1 Like
header.section-header.text-center h1 {
display: none;
}
it did not work for me. anyone figured out another way?
#shopify-section-collection-template .section-header h1 {
display: none;
}
I can’t get this to work for my shopify site using debut theme. I tried all the suggestions given in this thread
www.mypuppyprints.com is the url
thanks
online store > theme > action > edit code > assets > theme.scss.liquid > scroll down to bottom and add? > save. Good Luck!
#shopify-section-collection-template .section-header h1 {
display: none;
}
it did work thank you so much, your a life saver. keep up the good work. cheers
I tried all the codes none of them work .
Hello simoneedream,
Please share your site url.
So that i can check and let you know the exact solution here.
Hello simoneedream,
Your site is password protected.
Please share your store password.