Need Help Customizing Header Search for School-Based Website - Strech theme

Store Design
,
1

I would like to customize both the desktop and mobile header search experience on our website.

Screenshot 2026-01-27 at 3.18.47 PM
Screenshot 2026-01-27 at 3.18.47 PM2178×438 96.1 KB

Desktop Header – Search Bar UI

On desktop, I want the search bar to be displayed as a full-width input bar, not just a search icon. I will share a reference image for the exact look and placement we want.

The search bar’s purpose is very specific:
This website is for school uniforms, and the search bar should function as “Find Your School”.

Search Functionality Requirements

  • The search should only return School collections

  • It should NOT return:

    • Products

    • Pages

    • Blog posts

    • Accessories or non-school collections

  • If a user searches for something unrelated (for example: “sportswear”), it should not show products or collections, and instead display a polite default message, such as:
    “No school found with this name. Please try searching for your school.”

Collection Logic

We will have multiple collection types in the store, such as:

  • School collections

  • Product-type collections

  • Accessories and others

However, the search bar must work only with School collections and completely ignore all other collection types.

Reusable Search Block

Additionally:

  • I want the search bar to be created as a reusable block/section

  • So that we can place the same search bar in multiple positions across the site (header, homepage section, etc.)

Mobile Header

For mobile:

  • The search experience should be optimized for mobile

  • UI/UX can differ from desktop if needed, but the search logic must remain the same (school-only search)

Please let me know:

  • The best way to set this up

  • Whether this can be achieved via theme customization, Shopify search settings, or a dedicated search app

  • Any limitations or recommendations you suggest for this setup

website: https://solxuniform.myshopify.com/

password: fds1

Reference website: https://www.swischoolwear.co.uk/

check the header search bar

2

Seems like you are using dawn or similar from Shopify free themes. I don’t know much about apps but you can look for search and discovery app. I am not sure if it offers that specific collection search functionality but may be. If not then this can be achieved with theme customisations i believe.

And about the ui/ux for search that can be handled with a bit of css. And search is/or can be converted into a block, I mean the codes there just need to use it where necessary, again this needs some code tweak.

Best

3

Technically, search API allows you to select what type of results you’re looking for.

Say, you can only search for Collections via API (Predictive Search API reference) – would require a small theme code modification;
or select it in settings of the Search and Discovery app:

Screenshot 2026-01-28 at 12.04.46 AM
Screenshot 2026-01-28 at 12.04.46 AM978×412 13.6 KB

However, the search will be over all collections (unless some have seo.hidden metafield set).

There also needs to be a way to determine if collection is school collection or not. Say, it needs a special metafield.
Or, even better, if all school collections have “school” in title…

How many schools you expect to have?
Say, you may simply have a drop-down, or, even better – searchable drop-down, like a country selector Dawn has (theme demo – at the bottom on desktop, or bottom of the menu drawer on mobile)…