Return to previous page

Ajax Search widget – mobile fullscreen overlay + extended results (categories, suggestions, related

This topic has 2 replies, 2 voices, and was last updated 1 week, 4 days ago ago by Jack Richardson

Andrei Andrei

Participant

April 6, 2026 at 08:52

Hi,

I’m using XStore theme with the Ajax Search widget in the header (Elementor). I want to replicate a specific search UX on mobile only.

Here’s what I need:

1. When the user taps the search bar on mobile, the search opens as a fullscreen overlay (not a small dropdown) — similar to how desirel.ro handles it on mobile.

2. Inside this fullscreen search, I need the following sections:
– Live product results with image + price (this seems to work already)
– Recommended categories based on the search term (e.g. user types ‘plug’ → shows category ‘Plug anal’)
– Search suggestions as clickable chips (e.g. ‘butt plug’, ‘plug anal’)
– Related pages/posts (blog guides relevant to the search term)

My questions:

a) Does the Ajax Search widget support a fullscreen overlay mode on mobile natively, or does it need custom CSS/JS?

b) Can the widget show recommended categories dynamically based on the typed term?

c) Is there a built-in way to show search suggestions as chips or related blog posts in the results?

d) If these are not supported natively, can you advise whether it’s safe to extend the widget with custom JS and hooks, or if there’s a risk of breaking updates?

Thank you.

Files is visible for topic creator and
support staff only.

#468394 Copied

1 Answer

Jack Richardson

Support staff

April 6, 2026 at 10:13

Hello @Andrei Andrei,

1) The current AJAX search does not support modification into a popup search on mobile devices. Therefore, you can hide the existing Header AJAX search widget on responsive devices (tablet or mobile) and display the popup search that you have added to your header content for those devices, while keeping it hidden on desktop. To set responsive visibility for the widget, open your widget, go to the “Advanced” tab, and then select the “Responsive” section.

2) The widget does not display content dynamically based on your query. You can only add static content using the “Additional Content” option in the Popup Search widget. Please refer to the following link for guidance: https://prnt.sc/G2GOjQBb2Sjc.

3) You can use the “Trending Searches” feature to display popular search terms: https://prnt.sc/Sg1yw0I-8BAp. To make these terms dynamic, you will need to use a plugin or apply additional customizations.

4) If you have coding experience, you can create your own Elementor widget based on our existing one and extend its options by loading additional scripts or styles to meet your specific requirements. Please note that we do not provide such customizations through our support forum. This can be achieved by requesting additional customization services or installing plugins that offer the functionality you need.

We have also provided details about using the popup search in your header in our next reply: https://www.8theme.com/topic/ajax-search-mobile-fullscreen-popup-not-working-on-mobile-devices/#post-467598.

Best regards,
Jack Richardson
The 8Theme’s Team

#468403 Copied
Viewing 2 results - 1 through 2 (of 2 total)