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
11534 1807 2311

This is an accepted solution.

@BB17 ,

.template-collection main#MainContent {
    padding: 0;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
11534 1807 2311

This is an accepted solution.

@BB17 ,

.filters-toolbar__item-child {
    padding-top: 19px;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 14 (14)
diego_ezfy
Shopify Partner
2725 511 690

@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

oscprofessional
Shopify Partner
11534 1807 2311

@BB17 ,

Hi

Share your Store URL !

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Nick
Community Moderator
Community Moderator
4510 433 980

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
11534 1807 2311

 

.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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
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
11534 1807 2311

@BB17 ,

oscprofessional_0-1632460564724.png

don't add css in media.

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
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
11534 1807 2311

This is an accepted solution.

@BB17 ,

.template-collection main#MainContent {
    padding: 0;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
BB17
Excursionist
29 0 6

@oscprofessional 

Thanks. 

But the wording "sort by" and "1 product" in the green boxed has moved up... how to make it middle for all collection list/grid?  for desktop view...

Screenshot 2021-09-24 at 2.41.52 PM.png

oscprofessional
Shopify Partner
11534 1807 2311

@BB17 ,

Issue is solved?

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
BB17
Excursionist
29 0 6

@oscprofessional 

But please refer the issue i posted yesterday that is still not solve.. Screenshot 2021-09-25 at 2.38.40 PM.png

oscprofessional
Shopify Partner
11534 1807 2311

This is an accepted solution.

@BB17 ,

.filters-toolbar__item-child {
    padding-top: 19px;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
BB17
Excursionist
29 0 6