PNP Search Filter Design

[SS_0021]

Hi all,

I would like to change the design of the filter. Can I use CSS, React? Where exactly do I need to upload these stylesheets?

[#2]

@SS_0021 

PnP Search Filter does provide custom layout option where you can customize design for it

https://microsoft-search.github.io/pnp-modern-search/usage/search-filters/layouts/

You can take existing template as base which you can find at https://github.com/microsoft-search/pnp-modern-search/tree/main/search-parts/src/layouts/filters and then you can upload it somewhere in document library and adapt based on your requirements.

After that you can provide it in property pane as shown below

---

Hope it will helpful to you and if so then Please mark my response as Best Response & Like to help others in this community

[#3]

Thanks very much for your answer. Also, do you know how to manage to display the name of the image?

[#4]

@SS_0021 

Please elaborate your requirement more here what do exactly mean by "how to manage to display the name of the image?"

[#5]

@kalpeshvaghela 

Do you see the image which is in the image? This is the name of the image.

[#6]

@kalpeshvaghela 

Another question: if I remove all options except title, the image doesn't appear. When all selections are present, I see the image. I don't understand why? How is it possible to remove all other information except the image view.

[#7]

@kalpeshvaghela Hi do you know what I mean?