Problems using the search bar on mobile devices in TOKYO

Ask & Offer

Topic summary

A user encountered an issue with the TOKYO theme where the search bar on mobile devices (iPhone/smartphones) displayed results behind a grey overlay, making them unclickable. Desktop functionality remained normal.

Troubleshooting steps taken:

  • Tested on multiple mobile devices
  • Removed custom CSS
  • Reverted to a 2-month-old webpage version

Solution provided:
Add CSS code to the theme.liquid file (above the </body> tag) to remove the overlay:

predictive-search[open]:before {
    content: unset !important;
}

Current status:

  • Initial fix successfully implemented and confirmed working
  • User requested additional styling adjustment to match desktop appearance (grey background with highlighted search bar)
  • Further customization requires backend access; discussion moved to private messages
Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi together,

I’ve discovered this problem with my website and need to ask for your support. I am using the TOKYO theme.

Problem:

When using the search bar on my laptop, everything works fine and looks great:

2025-07-30 19_53_34-HERITAGE SUPPLIES - Der Shop für Oldtimerteile, Werkzeuge und Zubehör. und 14 we
2025-07-30 19_53_34-HERITAGE SUPPLIES - Der Shop für Oldtimerteile, Werkzeuge und Zubehör. und 14 we1177×462 43.4 KB

But when I use the iPhone, the same search is having the problem, that it is somehow ‘hidden by a grey overlay’ and unclickable. You can see in the backround everything works and displays, but something is hindering me to click on the search results:

HERITAGE SUPPLIES - Der Shop für Oldtimerteile, Werkzeuge und Zubehör
HERITAGE SUPPLIES - Der Shop für Oldtimerteile, Werkzeuge und Zubehör1206×2622 212 KB

The search bar is therefore completely useless at the moment (on mobile devices) as you can imagine.

I’ve tested this problem on several iPhones / Smartphones, tried to delete all the custom CSS and also backtested a webpage version from 2 months ago.

www.heritage-supplies.com

Your support is highly appreciated.

Thank you very much in advance.

Kind regards
Raphael

1 Like
2

Hey @RF55

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
predictive-search[open]:before {
    content: unset !important;
}
</style>

RESULT

image
image375×665 30.4 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
3

Hi Moeed,

Thanks a lot for answering so quickly.

It worked!

From optical side, I would prefer to have the background in grey and the search bar highlighted, just like in the first (desktop) screenshot. Is there a chance to adapt this too?

Thank you, Moeed.

1 Like
4

For that, I would require the access of your shopify backend, feel free to share your collaborator request code in my private messages and I can help you out.

Best,
Moeed