How to Customize Filter and Sort font size and font weight in Dawn Theme 5.0

[rolloneone]

Just wondering how to change the filter and sort fonts in collection page in Dawn Theme 5.0. Would like to make fonts size bigger and semi-bold.

[Amlibolikha]

Hi @rolloneone ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

[KetanKumar]

@rolloneone 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Denishamakwana]

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

[OUTSIDEGRID]

Hi @rolloneone ,

To customize the filter and sort fonts in collection page in Dawn Theme 5.0., first create a backup version of your site, avoid working in the original version.

Next go to the code editor, click on Assets > component-facets.css and in the end of the file make changes to the font-size and font-weight property in the following selectors :

/* label of sort by */
.facet-filters__label{
font-size: 1.8rem;
font-weight: 600;
}

/* sort by options */
.facet-filters__sort{
font-size: 1rem;

}

/* filter label */
.facets__heading{
font-size: 1.8rem;
font-weight: 600;

}

/* filter titles */
.facets__summary {
font-size: 1.2rem;

}

/* text inside checkboxes */
.facet-checkbox{
font-size: 1rem;

}

You can check how to do this in the tutorial bellow about filter design applied to the Dawn version 1.1.0, a similar process.  

[video]

Before launching the new version of the site confirm if the changes didn't affect any other text element besides the filter and sort menu.

I hope this helps! 

All the best, Bruno

OUTSIDEGRID

You can find more solutions in my blog or in my Youtube channel

[Denis20]

Hello

How can i change the font design of the filtzers in the horizontal scale??

[PWKC]

Could you please share which code I should change to increase the font size on the same page as described above, but with the text: 7 products. screenshot attached. thank you