Debut Theme - How to remove header for collection list

Solved
BB17
Excursionist
29 0 6

Hi, i am using debut theme. Wondering how to remove header for collection list? There are 4 collection list... i need to remove header for all 4 of them. Screenshot 2021-09-23 at 3.20.28 PM.pngScreenshot 2021-09-23 at 3.23.46 PM.png

Accepted Solutions (2)

Accepted Solutions
oscprofessional
Shopify Partner
9400 1577 1967

This is an accepted solution.

@BB17 ,

.template-collection main#MainContent {
    padding: 0;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

oscprofessional
Shopify Partner
9400 1577 1967

This is an accepted solution.

@BB17 ,

.filters-toolbar__item-child {
    padding-top: 19px;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 14 (14)
diego_ezfy
Shopify Partner
2324 418 557

@BB17,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>

#shopify-section-collection .section-header{
    display: none !important;
}
</style>



Kind regards,
Diego

◦ Slideshow images cutting off or looking bad? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets & save money. Examples here.
oscprofessional
Shopify Partner
9400 1577 1967

@BB17 ,

Hi

Share your Store URL !

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Nick
Community Moderator
4331 431 910

Hi @BB17,

Just to clarify do you mean the heading highlighted here?

23-24-xqgpm-3dm9d

If so, this might be coded into the theme to have a title for this page. Because this is the Debut theme which is a free Shopify developed theme, you can use the 60 minutes free design time from the theme support team and they can see if this is possible and do it for you if you aren't comfortable doing it yourself? You can log in and contact the support team for this here

Nick | Community Moderator @Shopify

 - Was my reply helpful? Click Like to let me know! 
 
- Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

BB17
Excursionist
29 0 6

@diego_ezfy 

After adding the code, the header still can be seen.... example from one of the collection list /gridScreenshot 2021-09-23 at 3.20.28 PM.png

oscprofessional
Shopify Partner
9400 1577 1967

 

.collection-hero__image.ratio-container.js.lazyloaded {
    display: none;
}
#shopify-section-collection-template .section-header.text-center {
    display: none;
}

 

@BB17 ,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
BB17
Excursionist
29 0 6

@oscprofessional 

But for mobile view, the header still can be seen and not removed for all collection list/grid... 

Please help.. Thanks Screenshot 2021-09-24 at 1.10.50 PM.png

oscprofessional
Shopify Partner
9400 1577 1967

@BB17 ,

oscprofessional_0-1632460564724.png

don't add css in media.

 

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
BB17
Excursionist
29 0 6

@oscprofessional 

but how come there is still this part which i think supposed to be the header ? Can this part (green box) be removed totally in desktop and mobile view ? 

Screenshot 2021-09-24 at 1.58.35 PM.png

oscprofessional
Shopify Partner
9400 1577 1967

This is an accepted solution.

@BB17 ,

.template-collection main#MainContent {
    padding: 0;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post