Getting rid of collection titles on collection pages Focal theme

Store Design
1

I would like to get rid of the collection titles that are overlaid over the header photos on collection pages but no one seems to have the proper code to do this on the Focal theme… help?

If needed my site is https://newhouseofvintage.myshopify.com/ entry password ropowg.

2

Hi @norahnewhouse ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.list-collections__item-info {
    display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

3

This did not work unfortunately. Is this compatible with Focal? Im desperate

4

Hi @norahnewhouse ,

Are you trying to remove title (40s,50s,60s,70s…) in this page? https://newhouseofvintage.myshopify.com/collections

5

No, the collection header title. For an example, on the “Sale” page the header has a photo and then the collection title overlaid on top of the photo. I would like to have just the photo no title overlapping!

6

Hi @norahnewhouse ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.image-overlay__content-wrapper .image-overlay__content {
     display: none !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

7

This did not work either. I am desperate to figure out how to fix this

8

Hi @norahnewhouse ,

I checked that your theme.css file has a structure error missing the closing “}” tag at the end of the file. Can you copy my code to the top of the file?

Screen Shot 2022-03-29 at 7.50.48 AM.png
Screen Shot 2022-03-29 at 7.50.48 AM.png2864×1376 561 KB

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

So this did work on getting rid of the titles (thank you so much), but now the header photo on mobile viewing is filled with black blocking to make an even square instead of a rectangle on desktop. How can I fix this to where it is simply the size of the original photo I upload?

10

Hi @norahnewhouse ,

You can try below code:

@media (max-width: 749px) {
#shopify-section-template--14484958904354__collection-banner .image-overlay {
     --image-height: 240px !important;
    background: transparent !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

11

This made the background transparent and did not get rid of it fully - so I feel like with every code you send over it is getting closer and closer to the solution! However the issue is that on mobile, the border still exists even if it is transparent/white now. I would love to have no border around my collection photo and have it simply be the size of the photo only (each collection header photo size is 1200x333). To better explain, that there would be no space between the filters/sorting buttons and the header photo. Thank you in advance!