Background on "collection card" or collection list (Dawn Theme)

[sonny_7]

Hi everyone,

I would like to do something that seems rather simple but I cannot manage..
I’ve searched on Forums too but no success.

I have set-up a collection list on my main page using the “Dawn theme” and what I would like is to have the information text below (where you can see Tea & Gift Boxes) with a white background, exactly like on the 1st picture attached here (this is taken from the Trade theme).

As of now I have this text but the background is not white and I don’t know how to make it white at this exact spot?!
Can somehow help me with that?

Thanks!

[Moeed]

Hey @sonny_7

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @sonny_7

You can add this code to Custom CSS of your Collection list section and check

.card__content { background: #fff; }
.card__content .card__heading { #121212; }

[B2Bridge]

Hi @sonny_7
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[sonny_7]

Thanks for that but unfortunately this didn’t work.
It turned everything to white and texts & images were not visible anymore.

[sonny_7]

Hi,

Yes here is the link: https://fwn5as-ed.myshopify.com/?_ab=0&_fd=0&_sc=1
Password: test

[B2Bridge]

Hi @sonny_7 , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

.card__media > .media {
    border-radius: 0px !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}
.card__content > .card__information {
    background-color: #fff !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}
.card__information > .card__heading {
    color: #000 !important;
    margin-left: 15px !important; 
}

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you

[Dan-From-Ryviu]

Could you share your store link so I can check?

[sonny_7]

ok this worked on the page yes.
However it triggers a problem on the collection list page

You can see on the screenshot attached that the information with the title and price splited in 2 and it oddly organised.
While before it was more well arranged.

Any idea?

[sonny_7]

any idea?

[sonny_7]

Yes here is the link: https://fwn5as-ed.myshopify.com/?_ab=0&_fd=0&_sc=1
Password: test

[Dan-From-Ryviu]

Please add this code at the base.css file in Sales channels > Online store > Themes > Edit code

.collection-list .card-wrapper {
    background: #fff;
    border-radius: 0 0 8px 8px;
}
.collection-list .card__inner .media {
    border-radius: unset !important;
}
.collection-list .card--standard > .card__content .card__heading {
    color: #121212;
    padding-left: 1.7rem;
}

[sonny_7]

Ok now this worked!
Thanks very much