Solved

Adjust font size for Product Quantity in Filter and Price Sizes

Verterra
Excursionist
28 1 5

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)

BSSCommerce-HDL
Shopify Expert
733 243 255

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Vinsinfo
Shopify Partner
318 115 113

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 4 (4)

BSSCommerce-HDL
Shopify Expert
733 243 255

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Verterra
Excursionist
28 1 5

Thank you for your help! 

Vinsinfo
Shopify Partner
318 115 113

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
Verterra
Excursionist
28 1 5

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