How can I modify the filter design on both desktop and mobile?

Store Design
, ,
1

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

IMG_2328.png
IMG_2328.png478×825 21.4 KB

IMG_2330.png
IMG_2330.png1000×440 100 KB

IMG_2329.png
IMG_2329.png475×781 54.3 KB

password: refade

2

Hi,

Will you share your store URL to be able to guide you through this.

3

password: redade

4

Sorry but wrong password

5

Hello @Marco211

Can you share store URL and Password ?

6

Sorry, password is “refade”

7

password: refade

8

password: refade

9
  1. Go to online store
  2. Click on Edit Code
  3. Open your base.css file
  4. Paste the below code at the bottom and save

.facets__summary {font-size: 1rem !important;}

Change the value of 1rem to your desired value like 0.9rem or 1.1rem

10

To hide the arrows on mobile add the following code:

  1. Go to online store
  2. Click on Edit Code
  3. Open your base.css file
  4. Paste the below code at the bottom and save

.menu-drawer__menu-item>.icon-arrow {display: none !important;}