A Shopify store owner using the Empire 12 theme encountered duplicate search boxes appearing on search results pages—one in the header (desired) and another in the body content (unwanted).
Initial Solutions Attempted:
theme.css file was suggested but didn’t work for the userWorking Solution:
A CSS-based fix was provided to be added through the theme customizer rather than code files:
.productgrid--masthead {
visibility: hidden;
height: 0;
overflow: hidden;
}
.template-search .breadcrumbs-container {
display: none;
}
Resolution:
The issue was successfully resolved using the breadcrumbs CSS code, which eliminated the unwanted search box while preserving the header search functionality.
Hello everyone
I might Need a little help here
I dont Link How the “ search Box “ Appear on the “ HEADER “ and also “ On The “ BODY “
and I want it to be on the “ HEADER “
How can I dismiss the “ SEARCH BOX on THE BODY “
My website : www.oscarliving.co.id
Theme : Empire 12
so here is the problem on the screen shot
Thank you guys for the HELP
When you search for something on your Shopify store, two search boxes appear one in the header (which you want) and another in the middle of the page (which you don’t want). This happens because the Empire 12 theme adds an extra search form on the search results page.
To fix this easily, you can hide the second search box using CSS. It’s safe, simple, and reversible.
Here’s what to do:
1. In your Shopify admin, go to Online Store → Themes.
2. On your active theme, click the three dots (⋯) and choose Edit code.
3. Open the file named theme.css (or base.css) under the Assets folder.
4. Scroll to the bottom and paste this code:
/* Hide duplicate search box on search results page */
.template-search .search-form,
.search-page__form {
display: none !important;
}
5. Click Save, then refresh your website.
Now the search bar in the header will stay visible, and the one in the body will disappear.
If you ever want it back, just remove that CSS code. This method is the easiest and safest way to keep your search bar only in the header.
Let me know if you still don’t get it
Dear The fresh Concept
Thank you for getting back
I have try your solution but there are nothing happen
I have try this is in here
Thank you very much
Oscar Living - www.oscarliving.co.id
Pusat Furniture kantor terbesar dan terlengkap
Avoid editing your theme code.
Theme code edits make updating your theme difficult.
You can try this code added in “Customise” – go to search page and add the code to the “Custom CSS” setting of the search section:
.productgrid--masthead {
visibility: hidden;
height: 0;
overflow: hidden;
}
If you want to remove the breadcrumbs on this page too, then this can go into “Theme settings”=> “Custom CSS” (can’t be used in section setting):
.template-search .breadcrumbs-container {
display: none;
}
Dear Tim -1
I have Try to put on the CSS code on search section as you told
But it still did not work
Show me either a screenshot of where you’ve applied the code I gave you, or share a preview link to a theme where the code is applied.
I do not see my code in the live theme, so can’t tell what can be wrong.
Dear Maximus 3
Thank you very much for the help
The code just works perfectly
Thank you so much
