How do I make this texts the same size as the filter texts?

Store Design
, , ,

Topic summary

A user seeks to match the font size of product count text with filter text on their Shopify store’s collection page. The issue appears to be a visual discrepancy rather than an actual size difference.

Initial diagnosis:

  • Both elements already share the same font properties
  • The perceived size difference stems from different text colors

Solution provided:

  • Custom CSS code to explicitly set font size to 14px for both desktop and mobile
  • Desktop fix: Target .facetFiltersForm form .product-count .product-count__text h2 with font-size: 14px !important
  • Mobile fix: Additional media query for screens under 768px width, setting font size to 1.5rem

Outcome:
The CSS solution successfully resolved the desktop display, and follow-up code was provided to extend the fix to mobile devices.

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

How do I make this texts the same size as the filter texts? the are not the same right now.

Check it out: https://www.vedettemaison.com/collections/sweaters

Scherm­afbeelding 2024-11-02 om 15.51.44.png
Scherm­afbeelding 2024-11-02 om 15.51.44.png2774×385 65.9 KB

2

Hi @Lucas1200

Hope You have a Good Day,
I have checked the font sizes of both the " Filter " and " Count text " and the font properties used for both are the same it is just the color is different which is why it seems big also due to the word count.

Here are the Screen Shot Prove taken from your store.

Mehran_Ali_2-1730663924144.png
Mehran_Ali_2-1730663924144.png794×420 129 KB

Mehran_Ali_3-1730663944394.png
Mehran_Ali_3-1730663944394.png518×465 87.1 KB

3

How can u fix it?

4

Well what to fix here you said the font properties are not the same but in your store, they both have the same font properties now you tell me what do you want
Either you want to reduce the size of Count or you want to just same the color of both because right now the only difference between them are color

5

Hi @Lucas1200

To edit the font size of the text, you can follow the instruction here:

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

  2. Copy and paste the code below to the section > save.

https://prnt.sc/8KdQyESF9_dw

form#FacetFiltersForm div#FacetsWrapperDesktop h2#verticalTitle {
    font-size: 14px !important;
}
form#FacetFiltersForm .product-count h2.product-count__text {
    font-size: 14px !important;
}
6

Thank you, is works on desktop now, but it doesn’t work on mobile. Can you help me with that too?

7

Hi @Lucas1200

you can add this CSS code to apply the adjustment on Mobile :

@media screen and (max-width: 768px){
#shopify-section-template--21588491010394__product-grid h2.product-count__text.text-body {
    font-size: 1.5rem !important;
}
}