Product description font is changed

Store Design
,

Topic summary

A user encountered a styling issue on their collection page where product prices and descriptions were linked together, preventing independent formatting. This problem occurred specifically for products without a compare-at price.

Root Cause:
The price and description elements were sharing CSS properties, causing style changes to affect both simultaneously.

Solution Provided:
Two community members offered CSS-based solutions:

  • Primary fix: Add custom CSS targeting .card-information > .price to style prices independently
  • For descriptions: Use .card-information .card-product-caption to modify description styling separately

Implementation:
The user can add custom CSS through the theme editor to control font, color, and other properties for each element independently.

Status: :white_check_mark: Resolved - The user confirmed the CSS solution worked successfully.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am having a problem with the site I am setting up. In the collection page, some of the products have the issue that the price is stuck with the product description. So whenever I change the font or style of the price, the description also be affected and changed. I found out that those products are the one which has the original price (no Compare-at price). I hope that someone can help me to separate them out so I can change the style and font for each of them differently

shinhajoon_1-1745813870209.png
shinhajoon_1-1745813870209.png1280×588 147 KB

1 Like
2

Hi @shinhajoon

Please share me your store url & password (if applicable) to let me detect the issue & share you the solution

3

Hi @BiDeal-Discount ,

The URL is https://www.the969.com/collections/all

4

You want price will have style different for only it like this, right? not impact to description

BiDealDiscount_0-1745814819977.png
BiDealDiscount_0-1745814819977.png1166×855 141 KB

5

Hey @shinhajoon

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1745814923364.png
Moeed_0-1745814923364.png1290×576 145 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

yes, price will have a different style and font and not impact the description

7

go to edit theme editor → add custom CSS:

.card-information > .price{
  color: #94392a;
}

BiDealDiscount_0-1745815237916.png
BiDealDiscount_0-1745815237916.png1846×927 204 KB

1 Like
8

so if I want to change the font for the price, then I just need to add the font into this one like this, right?

.card-information > .price {
  color: #94392a;
  font: 16px Arial, sans-serif;
}
9

exactly. Just do like that

10

If you want to change style for description only, you can use:

. card-information .card-product-caption {
   color: ;
   font: ;
}
1 Like
11

Awesome, thank you so much. It worked!

12

You’re welcome :hugs: