How do I make these texts smaller on the collection page?

Store Design
, , ,

Topic summary

A user seeks to reduce the font size of product titles and prices on their Shopify collection page for both mobile and desktop views.

Solutions Provided:

  • GTLOfficial suggests adding CSS code to base.css file targeting product grid links and card price information with font-size: 1.2rem !important

  • LizHoang recommends using the Custom CSS section in Theme Customizer with similar CSS targeting card headings and price spans at 12px !important

Current Status:

The issue remains partially unresolved. The user reports that one solution works on desktop but not on mobile, and mentions their custom CSS section is already full, preventing implementation of the second approach. No follow-up solutions have been offered yet for the mobile display issue.

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

How do I make these texts smaller on the mobile and desktop view?

IMG_5262.jpg
IMG_5262.jpg1169×1420 119 KB

Check it out: sweaters

1 Like
2

yes and the price size

3

Hello @Lucas1200
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

#shopify-section-template--21588491010394__product-grid a.full-unstyled-link {
font-size: 12px !important;
}
.card-information > .price {
font-size: 1.2rem !important;
}

result

55.png
55.png449×652 128 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi @Lucas1200 ,

You can follow the instruction below to reduce size of the text:

  1. Go to Shopify > Theme > Customize > Open Custom CSS

  2. Copy and paste the code below > adjust the font size as desired > Save

#shopify-section-template--21588491010394__product-grid .card__information h3.card__heading > a {
    font-size: 12px !important;
}
.card-information span.price-item {
    font-size: 12px !important;
}
5

It doesn’t worked..

6

It works on desktop not on mobile and my custom css is already full…