Solved

Change design of filters products

Marco211
Explorer
84 0 19

Hi everyone, thanks first of all for your help. So I would like to reduce the font size of the filters on desktop, then I would like to reduce the size of the filters also on smartphones and I would like to remove the arrow of the various filters on smartphones, sorry but I am very poor and I don't know how to do these things. Thank you all

 

refadestudios.com

password: refade

Screenshot 2024-01-23 221749.pngScreenshot 2024-01-23 221719.pngScreenshot 2024-01-23 221658.png

Accepted Solution (1)

Mike-Omega
Shopify Partner
151 27 30

This is an accepted solution.

Hi @Marco211 

This is Mike from Omega

You can try my solution:

 

1. Open Theme -> Edit code 

2. Find base.css or theme.css or something like this and paste this code the bottom of file: 

 

span.facets__summary-label, h2.facets__heading, .facet-filters__sort, .facet-filters__label label {
    font-size: 13px !important;
}

@media (max-width: 767px) {
.mobile-facets__open-label  {
    font-size: 13px !important;
}

span.mobile-facets__arrow.no-js-hidden {
    display: none;
}
}

 

you can change the number of font size also.

 

Hope my answer will help you

Mike from Omega

If it’s helpful to you, please give it a like or mark as a solution.
Need any help for Shopify Design or Custom task, please contact via email: locdt@omegatheme.com
Omega GDPR EU Cookie Banner: Effortlessly stay compliant with EU GDPR, CCPA

View solution in original post

Replies 2 (2)

Mike-Omega
Shopify Partner
151 27 30

This is an accepted solution.

Hi @Marco211 

This is Mike from Omega

You can try my solution:

 

1. Open Theme -> Edit code 

2. Find base.css or theme.css or something like this and paste this code the bottom of file: 

 

span.facets__summary-label, h2.facets__heading, .facet-filters__sort, .facet-filters__label label {
    font-size: 13px !important;
}

@media (max-width: 767px) {
.mobile-facets__open-label  {
    font-size: 13px !important;
}

span.mobile-facets__arrow.no-js-hidden {
    display: none;
}
}

 

you can change the number of font size also.

 

Hope my answer will help you

Mike from Omega

If it’s helpful to you, please give it a like or mark as a solution.
Need any help for Shopify Design or Custom task, please contact via email: locdt@omegatheme.com
Omega GDPR EU Cookie Banner: Effortlessly stay compliant with EU GDPR, CCPA
Marco211
Explorer
84 0 19

Thank you very much