Add Search Bar to header Theme Fashionopolism

Store Design

Topic summary

A store owner seeks to add a search bar to the header of their Fashionopolism theme on oldglory.com for both desktop and mobile views. Currently, desktop displays only a magnifying glass icon, while mobile search is accessible only through the left navigation menu.

User’s Goal:

  • Add a visible search bar below the header (similar to their previous theme)
  • Include the magnifying glass icon in mobile view
  • Screenshots provided showing desired placement

Responses Received:

  • One user offered CSS code for modal styling adjustments (unclear relevance to the specific request)
  • Another suggested the theme may require custom Liquid code modifications by a developer

Current Status:
The discussion remains open with no definitive solution provided. The user clarified they specifically want the magnifying glass icon added to mobile view, but implementation details and exact code placement are still unresolved.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I’m and looking to add a search bar in the header on both the desktop top view and mobile view. Currently desktop has a magnifying glass and search on mobile is only available when you go to navigation bar on left. Looking for code and where to place it.

Website: oldglory.com

Thanks,

Chris

2 Likes
2

Hello @ChrisKap
Can you explain how exactly you want to set it up? A proper explanation would help. If possible, please send a screenshot as well.

3

Hi @ChrisKap ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

.modal__container[data-wau-modal-full] .modal__inner-wrapper {;
    height: 23% !important;
}
.modal__general-modal__wrapper .slideout__trigger--close {
    top: 65px !important;
}
.modal__inner-content-container button.search-button {
    background: black !important;
}
4

I am looking to add the search bar below header similiar to the last theme we had.

Here is a snapshot of the desktop:

ChrisKap_0-1738519705876.jpeg
ChrisKap_0-1738519705876.jpeg1340×197 37.4 KB

Here is a snapshot of the mobile:

ChrisKap_1-1738519750996.jpeg
ChrisKap_1-1738519750996.jpeg510×155 18 KB

Thanks,

Chris

5

Hi @ChrisKap

If your theme doesn’t have this design in your store. You might need a developer to adjust the Liquid code to make the search bar visible in the header. Let us know if you’re interested. Thanks!

6

I am looking to add the magnifying glass to the mobile view.

Thanks,

Chris