Add Search to Header mobile view Theme Fashionopolism

Store Design

Topic summary

A user wants to add a search icon to the mobile header of their Shopify store (oldglory.com) using the Fashionopolism theme.

Proposed Solution:

  • Add CSS code to the theme.liquid file that displays the search icon on mobile devices (screens under 767px)
  • The code targets .header__search and sets display:block !important

Current Status:

  • The user implemented the suggested CSS code but reports no visible changes
  • The issue remains unresolved and may require further troubleshooting or alternative approaches
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I would like to add the search icon to the header for mobile view. Looking for code and where to add it.

Website: oldglory.com

Thanks,

Chris

2

Hello there @ChrisKap You should give the following steps a try and see if it works

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

<style>
@media(max-width:767px){
#shopify-section-header .header__icons .header__search{display:block !important}
}
</style>
3

I added the code and saved it. There doesn’t appear to be any changes