Solved

Adjust font size for Product Quantity in Filter and Price Sizes

Verterra
Excursionist
23 1 2

Hi, I am currently experiencing some different font sizes on my website, particularly for the

 

1. Filter menu (the number of products listed is smaller than the rest of the filter labels), and;
2. For the old sales price, which is now much smaller than the current sale price displayed 

 

Screenshot 2024-05-15 at 3.38.38 PM.png

 

My file preview link is here: https://verterra.sg/?_ab=0&_fd=0&_sc=1&preview_theme_id=166588514587

 

Thanks!

Accepted Solutions (2)

BSSTech-Venture
Shopify Expert
434 104 117

This is an accepted solution.

Hi @Verterra

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BssTechVenture_1-1715759581357.png

 

Step 2: Search file base.css,  theme.css or styles.css

BssTechVenture_2-1715759589713.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

 h2.product-count__text.text-body {
        font-size: 17px !important;
    }

    s.price-item.price-item--regular {
        font-size: 17px !important;
    }

 

 

Here is result: 

BssTechVenture_0-1715759542051.png

Hope this can help you, 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@Verterra Please follow the below steps to adjust the font size for the product count displayed in the filter and price sizes. Let me know whether it is helpful for you.

 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "base.css" file and paste below code at the bottom of the file like in the below attached screenshot.

 

.facets-container .product-count__text, .price--on-sale .price-item--regular {
    font-size: 1.8rem !important;
}
@media screen and (max-width: 749px){
    .facets-container .product-count__text {
        font-size: 1.5rem !important;
    }
}

 

Vinsinfo_2-1715770909191.png

 

Final result will be like the below image,
Vinsinfo_0-1715770851793.png
Vinsinfo_1-1715770890969.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 4 (4)

BSSTech-Venture
Shopify Expert
434 104 117

This is an accepted solution.

Hi @Verterra

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BssTechVenture_1-1715759581357.png

 

Step 2: Search file base.css,  theme.css or styles.css

BssTechVenture_2-1715759589713.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

 h2.product-count__text.text-body {
        font-size: 17px !important;
    }

    s.price-item.price-item--regular {
        font-size: 17px !important;
    }

 

 

Here is result: 

BssTechVenture_0-1715759542051.png

Hope this can help you, 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Verterra
Excursionist
23 1 2

Thank you for your help! 

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@Verterra Please follow the below steps to adjust the font size for the product count displayed in the filter and price sizes. Let me know whether it is helpful for you.

 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "base.css" file and paste below code at the bottom of the file like in the below attached screenshot.

 

.facets-container .product-count__text, .price--on-sale .price-item--regular {
    font-size: 1.8rem !important;
}
@media screen and (max-width: 749px){
    .facets-container .product-count__text {
        font-size: 1.5rem !important;
    }
}

 

Vinsinfo_2-1715770909191.png

 

Final result will be like the below image,
Vinsinfo_0-1715770851793.png
Vinsinfo_1-1715770890969.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Verterra
Excursionist
23 1 2

Hi, this worked perfectly for me. Thank you! 🙂