How to make the price smaller on collection page?

Topic summary

Goal: reduce product price text size on the collection page (Brooklyn theme) and adjust spacing to the product title.

Implemented suggestions:

  • Add CSS at the bottom of theme.scss.liquid:
    #CollectionSection .grid-product__wrapper .grid-product__price { font-size: 0.8rem !important; }
  • Alternative method (with steps): Online Store > Themes > Actions > Edit code > Assets > theme.scss.css, then add:
    .grid-product__price { font-size: 12px !important; }
  • A screenshot was shared to illustrate where to add the code, but it’s not essential to apply the change.

Open question:

  • How to reduce the gap (spacing) between the product title and the price. No CSS for spacing was provided yet; only font-size solutions were given.

Status: Partially resolved. Price size reduction has workable CSS options; the spacing adjustment remains unanswered/ongoing.

Summarized with AI on January 15. AI used: gpt-5.

Hello,

can someone tell me how to make the price smaller on the collection page?

im using the Brooklyn theme: aliudclothing.com

Thank you!

Kim

1 Like

Hi @KimGottwald

Add this code at the bottom of your theme.scss.liquid file

#CollectionSection .grid-product__wrapper .grid-product__price { font-size: 0.8rem !important; }
1 Like

Thank you, can you furthermore tell me how to make the gap between price and product title smaller?

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.css and paste this at the bottom of the file:
.grid-product__price {
font-size: 12px!important;
}