How to change price font color, size, etc. on Product Cards

Store Design
, ,

Topic summary

A user seeks to customize the appearance (color, size, font type) of product prices on their Shopify store’s product cards, including both regular and sale prices.

Initial Request:

  • Modify styling for both discounted (red) prices and original crossed-out (blue) prices
  • Changes needed without affecting product titles

Solution Provided:
BSSCommerce-HDL offered CSS code snippets to be inserted in the theme.liquid file above the </head> tag:

  • For non-discounted prices: Custom CSS targeting regular price elements
  • For discounted prices: Separate CSS code for sale price styling

Both solutions include visual examples showing the results.

Outstanding Issue:
The user confirmed the discount price solution works but still needs help styling regular prices on non-sale items. The thread remains open awaiting a complete solution for all price types.

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

Title says it all. I want to be able to change the color, and size of the font for my price and also the original price when an item is marked down on my product cards. You can check my website out at https://rttrove.com/ if you need to for help. Thanks!

1 Like
2

Hi @namestolen , Can you kindly share the details of your problem (screenshot) with us? We will check it and suggest you a solution if possible.

3

I want to be able to change the font color, size, type etc. of the red circled prices on my Product Cards and also the blue slashed discount price without changing the products title.

Product Card Example.jpg
Product Card Example.jpg1356Ă—1719 343 KB

1 Like
4

Hi @namestolen , For apply price not discount:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723948986666.png
BSSCommerceHDL_0-1723948986666.png1905Ă—652 407 KB

Hope this can help you :heart_eyes:

5

@namestolen , And this for product apply discount:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1723949414906.png
BSSCommerceHDL_0-1723949414906.png324Ă—505 176 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

6

Thanks so much! But that only helps with items that are on sale…How do I also change just the regular price of items as well? Thanks again! I will mark you as “Accepted Solution”.