How to change product or category card color on trade theme?

Shopify Discussion
,

Topic summary

Issue: In the Trade theme, product and collection cards display a dark background that doesn’t match the store’s global color scheme.

Key insights:

  • Cards often inherit colors from the section or use theme defaults; some sections (e.g., Featured collection) have their own “Color scheme” setting that can override global colors.
  • Multiple members requested the store URL/password for precise targeting.
  • It was noted that the dark card background is effectively hard‑coded in the theme’s card styles.

Solutions proposed:

  • Check the section’s own color settings in Online Store → Themes → Customize and set the desired scheme there.
  • If no setting exists, add custom CSS (via Theme settings → Custom CSS) targeting card selectors (e.g., .card, .collection-card, .product-card) to set a new background and adjust text color, using !important as needed.

Outcome: The custom CSS override resolved the issue for the OP. Status: Resolved.

Summarized with AI on December 10. AI used: gpt-5.
1

Im using Trade Theme and my color schema is setup to match all my brand colors, but when i apply it to a section where i want to highlight certain products, the product card is not the color i need. same goes for collection cards.

how do i change that? I dont want it to have that dark color.

Bildschirmfoto 2025-12-05 um 23.34.05
Bildschirmfoto 2025-12-05 um 23.34.051168Ă—535 22.1 KB

1 Like
2

In the Trade theme, product and collection cards often inherit colors from the section or theme defaults, so even if your overall color scheme matches your brand, individual cards can still show the “dark” default color.

To change this:

  1. Go to Online Store → Themes → Customize.

  2. Open the section where the product or collection cards appear.

  3. Look for section-specific color settings—some sections let you override the default card background, text, and button colors.

  4. If there’s no option in the Customizer, you can add custom CSS to target just those cards. For example:

/* Change product card background */
.section-class .card-class {
  background-color: #YOUR_DESIRED_COLOR;
}

Replace .section-class and .card-class with the actual classes used by that section (you can find them using your browser’s inspect tool).

This will let you highlight certain products or collections with your preferred colors without affecting the rest of the theme.

3

Hi @aczeko

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

@aczeko if you need to add color to this specific section, then custom css needs to be added. can you please share your website link?

5

Many sections, including “Featured collection” has their own setting for Color scheme, make sure it’s the one you want:

Screenshot 2025-12-06 at 3.22.18 PM
Screenshot 2025-12-06 at 3.22.18 PM703Ă—266 24.7 KB

But yes, share a link to your store (with a preview password if one is set).

2 Likes
6

Hey @aczeko

Just simply share the color code which you require and also your store URL and Password (if enabled)

Best,
Moeed

7

Hi @aczeko ,
In the Trade theme, the product cards and collection cards don’t fully follow the global color scheme. The dark background you’re seeing is actually hard-coded in the card styles of the theme.

Override it with custom CSS

Go to:
Online Store → Themes → Customize → Theme settings → Custom CSS

Add this:

.card,
.collection-card,
.product-card {
  background: #ffffff !important; /* change to your color */
  color: #000000; /* adjust text if needed */
}
8

Thanks, this worked out!