How can I change the color of product prices to green?

Store Design

Topic summary

A user seeks to change product price colors to green on their website (www.nonastore.com.br).

Multiple solutions provided:

  • Add custom CSS code to the theme files
  • Navigate to: Online Store → Theme → Edit code → Assets → style.min.css
  • Insert CSS at the bottom of the file before closing tags

CSS code variations suggested:

  • p.price.productPrice { color: green !important; }
  • ins#product-price { color: #168018 !important; }
  • .price ins { color: green !important; }
  • .product.price.productPrice { color: green; }

Key differences:

  • Some target specific elements (ins, p tags) vs. general price classes
  • Color values vary (“green” keyword vs. hex code #168018)
  • Some include !important flag for override priority

All respondents recommend editing the theme’s CSS file directly. Screenshots were shared showing implementation steps. The discussion remains open with no confirmation from the original poster on which solution worked.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

I want to change the color of all prices on product page to green. how can i do that? my website is www.nonastore.com.br

2

Hallo @nonastore

You can add code by following these steps to change collection and product pages background color:

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file

  3. Paste the below code before

p.price.productPrice { color: green !important; }

If you require any further information, feel free to contact me.

Best regards,

ScreenShot Tool -20230116131654.png
ScreenShot Tool -20230116131654.png865×408 51.9 KB

1 Like
3

@nonastore ,

ins#product-price {
    color: #168018 !important;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.min.scss.liquid

1 Like
4

put below css into style.min.css file

.price ins {
    color: green !important;
}

Ujjaval_0-1673855116957.png
Ujjaval_0-1673855116957.png1600×753 130 KB

1 Like
5

Hi @nonastore

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->style.min.css

ins#product-price {
    color: green !important;
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

1 Like
6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >style.min.css and paste this at the bottom of the file:
.product .price.productPrice {
color: green;
}

ZestardTech_0-1673861151074.png
ZestardTech_0-1673861151074.png1873×757 145 KB

1 Like