Change Price size only one SHOP ALL page

Topic summary

A user needed to reduce the font size of product prices specifically on their “Shop All” collection page, which appeared too large.

Solutions Provided:

Three different CSS-based approaches were offered:

  1. Collection-specific targeting via theme.liquid file using a conditional statement for the specific collection ID
  2. Custom CSS in Theme Settings targeting .collection .grid__item .price .price-item with 14px font size
  3. base.css modification targeting .price__regular .price-item--regular with 14px font size

Resolution:

The issue was successfully resolved. The user implemented the second solution (Custom CSS approach), confirming it worked to adjust the price font size to 14px on the collection page.

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

hey - looking to change the font size of PRICE on my SHOP ALL page, its looking a bit too big -
url:
https://mahru.in/collections/all-products
password:
mahru@123

3 Likes

Please add this code to theme.liquid file, after in Online store > Themes > Edit code.

Replace 20px in my code with value fit your require.

{% if collection.id == 317187293373 %}

{% endif %}
1 Like

Hi @snk729

let add this Custom CSS to your Theme Settings configure:

.collection .grid__item .price .price-item {
  font-size: 14px;
}

the result:

1 Like

Hi @snk729

In the base.css file, add the following code

.price__regular .price-item--regular {
    font-size: 14px;
}
1 Like

Thank you all - managed to change the font size with this code :

.collection .grid__item .price .price-item {
font-size: 14px;
}