Craft theme - How to change background color of product card - photo attached

Store Design
, ,

Topic summary

Goal: change the tan background color on product cards in the Craft theme (image provided).

Key finding: the color is controlled in the theme’s CSS. Multiple replies point to editing Assets > base.css.

Proposed fix: in base.css, target the product card content and set a new background color, e.g.:

  • .card–card.card–media > .card__content { background: white; }
    You can replace “white” with any desired color value. One reply suggests narrowing/removing broader selectors so the change doesn’t affect other areas.

Where to edit: Shopify Admin > Online Store > Themes > Edit code > Assets > base.css. Another reply confirms you can search for the existing snippet there and change its color value.

Alternate suggestion: one response advised pasting code into theme.liquid, but the code block was empty, so that guidance needs clarification.

Attachments: screenshots and a CSS snippet are central to the guidance.

Status: no confirmation from the original poster that the change worked; resolution pending.

Summarized with AI on January 7. AI used: gpt-5.
1

I’ve looked everywhere, how do you change this tan background color on the product cards? Thank you.

Untitled.png
Untitled.png1072×253 105 KB

1 Like
2

Hi @YIC

Would you mind to share your store URL? Thanks!

3

https://yourideacreations.com/

1 Like
4

Thanks for the info, Seems like you add the color on the base.css.

Made4uoRibe_0-1705800990633.png
Made4uoRibe_0-1705800990633.png400×140 4.99 KB

Find this one in the Asset Folder > base.css

Im not sure what you are aiming for this code. But you can take out the other selector and re edit the code. So it wont affect the other area.

Made4uoRibe_1-1705801588490.png

.card--card.card--media>.card__content {
    background: white;
}

You can change the color you like.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Hello @YIC :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file base.css, find this code snippet

![Screenshot 2024-01-21 at 09.13.25.png|280x94](upload://lOibAIcgLV9GhLj6jov1zEInv3R.png)

Then you can change the color value in the code.

1 Like
6

Hi @YIC ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly