Change Product Name and Price Color on Homepage Debut Theme

Shopify Discussion

Topic summary

Goal: change the homepage product title and price color in the Debut theme.

Key steps shared:

  • Edit code via Online Store > Themes > Edit code. Open the Assets folder and add custom CSS.
  • Use class selectors for product title and price (e.g., .product-card__title and .price-item) and set a color value.
  • Ensure to include the CSS priority flag “!important” so the new color overrides theme defaults.

Corrections and refinements:

  • The initial attempt failed due to missing the exclamation mark in “!important.”
  • A refined selector was suggested: “.grid-view-item.product-card .price-item, .grid-view-item__title.product-card__title” with “!important,” and a note to minimize overuse of “!important.”

Technical notes:

  • Class selectors target specific elements; “!important” forces the style to take precedence.
  • Code snippets are central to this fix.

Latest update/status:

  • A 2024 follow-up notes “theme.css” cannot be found, asking how to apply the change now. No updated file path or method was provided, so the thread remains unresolved for current themes.
Summarized with AI on January 8. AI used: gpt-5.
1

Hello,

I’m using the debut theme and I need to change the color of my product name and price on the homepage. Here is a link to my site preview:

https://8dk3dtko14xkkdw0-68119757090.shopifypreview.com

Thanks!

1 Like
2

Hi @md249 , go to edit code > assets > theme.css and add this:

.product-card__title,
.price-item{
color: red!important;
}

Instead of red write any colour you’d like. :slightly_smiling_face:

3

Thanks! @MarinaPetrovic

This is the code I just added in, and it doesnt appear to have updated the color:

.product-card__title,
.price-item{
color: #421224 important;
}

4

Hi @md249 , you forgot exclamation mark, change it to this:

.product-card__title,
.price-item{
color: #421224!important;
}
5

Hi @md249

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.product-card__title,
.price-item{
color: #421224 !important;
}

Hope my answer will help you

6

Hi @md249 ,

Please follow the instructions below to change the product cards in the home page

  1. From your Admin page, go to Online store > Themes > click the 3 dots > Edit code

  2. The code editor will open, go to Asset folder, and open the theme.css file

  3. At the very bottom of your code, delete the following code below that causing some errors.

.product-card__title,
.price-item{
color: #421224 important;
}
  1. Replace this with the code below. NOTE: Minimize using !important as much as possible
.grid-view-item.product-card .price-item, .grid-view-item__title.product-card__title {
    color: red !important;
}

Hope this helps

7

theme.css is nowhere to be found now in 2024 can you tell me how I can do the same but actually?

8

theme.css is nowhere to be found now in 2024 can you tell me how I can do the same but actually?