How do I remove header image and title from Collections?

[0scar]

My theme (Wokiee - Startup skin) Collections pages default to a header image with title and there doesn't appear to be any simple way to remove it. If you don't load an image, it picks the first listed product image as header at 100% page width.

I want a nice simple product grid to load above the fold in my Collections pages. 

I have searched code workarounds to remove the header image and title from collections, but nothing has worked. This may be due to the only suggestions I've found being for the old .SCSS, when my Wokiee theme is .CSS - you can view the page at https://r-e-p-o-s-e.com/collections/lamps

Thanks in advance!

[webwondersco]

@0scar Hope you are doing well.

Did you check your theme customize setting option? you can find the option there to hide the banner image.

Or else you can use CSS to hide the banner image for the collection page.

But I think first option is good for you

[0scar]

Thanks @webwondersco, but this theme does not appear to give you the option to remove header image and title from collections pages in the settings.

[suyash1]

@0scar - can you please provide this page link?

[Arif_Shopidevs]

hi @0scar 

If you use this css and insert in your base.css file

Step 1: Navigate to your Shopify admin panel and go to Online Store.

Step 2: Click on "Themes" and then select  Edit code

Step 3: Find base.css

    .pagecollection #tt-pageContent.show_unavailable_variants > div:first-child{
           
      height: 74px;
    background-color: #212826;
    position: unset;
    padding: 85px;
}
    .pagecollection #tt-pageContent.show_unavailable_variants > div:first-child img{
        display:none;
    }

The header will look like this 

Hope it will solve your issue. 

[0scar]

Thanks @Arif_Shopidevs - how would I remove the title. In your screengrab it shows "Carryall Bags", I need to remove these titles from all collection pages.

[Arif_Shopidevs · Accepted solution]

Hi @0scar 
Use bellow css which hide the top title "Carryal Bags" also

 .pagecollection #tt-pageContent.show_unavailable_variants > div:first-child{
     height: 74px;
     background-color: #212826;
     position: unset;
     padding: 85px;
}
 .pagecollection #tt-pageContent.show_unavailable_variants > div:first-child img{
     display:none;
}
 .pagecollection #tt-pageContent.show_unavailable_variants .box-text{
     display:none!important;
}

Hope your issue will solved now.

Thank you 
Regards
Shopidevs

[0scar]

Perfect, thanks @Arif_Shopidevs 

[0scar]

@Arif_Shopidevs - would you also know how to load page with the menu logo dark, as it does on product pages:

https://r-e-p-o-s-e.com/products/dishcloth

Thanks in advance

Oscar

[Arif_Shopidevs]

@0scar 
In your theme settings you can check where the logo option. The logo comes from theme settings. you can set the collection page or other page white logo to your home page logo.
That logo is set for transparent header. When you change that it will solve your issues.