Unable to change background colour on collection list page Trade Theme

[Sugi_Rgopal]

I’m having issues with my Trade 15.3.0 theme. I have almost completed my website, but my https://thoughtfultouches.co.uk/collections page but its not functioning properly as other pages do. I’m unable to make changes to the background colour to the under Theme Setting → Colour scheme. (background is set to blue)

My septs as follows, Content → Menus → Main menu → Add menu items → Label name: (All collections) – Link: (All Collections) | Page is created and listed under Menu items.

i have tried below code, it’s working but effecting all the other pages as well.

“.collection {
background-color: #0A2268; /* Replace #your-desired-color with a hex code or keyword */
}”

Please let me know how to fix this issue. TIA

[The_ScriptFlow]

Hey in order the change the background of the collection boxed you need to paste the following code in the end of component-card.css file.

.card--card::after, .card--standard .card__inner::after {
   background-color: red !important;
}

Here is how you can find component-card.css file.

Go to Shopify Admin > Click on Online Store > Click on three Dots > Edit Code > component-card.css file.

Results:

I set the background color to red you can set anyone that you want.

[tim_1]

If your css code works but affects other pages, try pasting it into “Custom CSS” setting of this section.

Can’t see it on your site though…

[Sugi_Rgopal]

@The_ScriptFlow @tim_1

Thank you for responding back, the code works but i did try to change the background colour code from Theme Setting on the original Scheme 1 and it worked. but there seems to be a padding issues at the bottom of collection page list for which i tried to add a custom liquid to get rid of the gap issue.

Thank you for your support.

[tim_1]

What are these settings on your “Custom liquid?” – Set them to zero.

[mt686]

This usually happens because the All collections page in Trade/Dawn uses a shared .collection class, so any CSS you add there ends up hitting other templates too.

Instead of targeting .collection globally, try scoping it just to the collections list template. For example:

.template-list-collections .collection {
  background-color: #0A2268;
}

or sometimes:

body.template-collection-list {
  background-color: #0A2268;
}

You can confirm the exact class by right-clicking the page, inspecting the body tag, and copying the template class Shopify adds.

Also worth mentioning: I built Easy Edits, which lets you click directly on a section like that and change the background color visually, or just tell the AI what you want changed and it applies it only to that page. No guessing CSS selectors.

https://apps.shopify.com/easy-edits