Can we change the Overlay button icon?

Search Best Practices - Search Front-End
1

Hey all,

I have a client who’s wondering whether we can change the “close” icon on the Answers Overlay from a chevron to an “x”. Is this possible? Would we make this change on our end or the client’s?

image
image920×954 89.4 KB

2

Hi Hannah!

This change would be made on Yext’s end. You can find the svg and the logic for the button in the theme under static/js/overlay/button-frame/button.html folder. The down carat itself is the svg within <div class="OverlayButton-displayWhenExpanded js-OverlayButton-displayWhenExpanded"> . You’d need to shadow this file and replace the svg with one for an X.

There’s also some animation for the svg, which can be found in the theme under
static/scss/answers/overlay/button/button.scss. You might not need to tweak this (I tried just swapping out the svg and it looked ok), but that’s where it is in the event you need to make changes.

Let us know how this works for you!

Thanks,
Rose

1 Like