Re: How do I remove header image and title from Collections?

Solved

How do I remove header image and title from Collections?

0scar
Tourist
10 0 2

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.

Screen Shot 2024-05-06 at 3.00.26 pm.png

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!

Accepted Solution (1)
Arif_Shopidevs
Shopify Partner
141 18 14

This is an 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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Replies 9 (9)

webwondersco
Shopify Partner
1113 164 162

@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

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
0scar
Tourist
10 0 2

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
Shopify Partner
9595 1199 1540

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

Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Arif_Shopidevs
Shopify Partner
141 18 14

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 

13-05-24-wokiee-header.png

Hope it will solve your issue. 

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
0scar
Tourist
10 0 2

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
Shopify Partner
141 18 14

This is an 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

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
0scar
Tourist
10 0 2

Perfect, thanks @Arif_Shopidevs 

0scar
Tourist
10 0 2

@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
Shopify Partner
141 18 14

@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.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers