The Shopify Debut theme features a convenient search icon in the header by default; however, not every store requires this function. Whether you are aiming for a cleaner design or simply removing unused features, this guide will show you exactly how to remove the search icon while maintaining a sleek, professional look for your online store.
We’ll cover:
Step-by-step removal methods (including video tutorial)
Why you might want to remove the search icon
Why you might want to remove the search icon
✅ Important considerations before making changes
Plus, we’ve included a video walkthrough to make the process foolproof! 👇
Why Remove the Search Icon in Debut Theme?
Here are the top reasons store owners remove the search icon:
Cleaner Design – Less clutter = more focus on your products
Better Mobile Experience – Frees up space in the mobile header
Reduced Distractions – If search isn’t critical to your store
Custom Navigation – When you have alternative search solutions
3 Methods to Remove the Search Icon
Method 1: Via Theme Customizer (No Coding)
Go to Online Store > Themes > Customize
Select Header section
Toggle off “Show search bar” option
Save changes
Method 2: Using CSS (Permanent Solution)
Go to Online Store > Themes > Edit Code
Locate theme.scss.liquid under Assets
Add this code:
.site-header__search {
display: none !important;
}
Save changes
Method 3: Using Liquid Code (Advanced)
For complete removal from the HTML structure:
Edit header.liquid under Sections
Find and delete the search icon code block
Save changes
📹 Video Tutorial Available Here:
Important Considerations
⚠️ Backup First! – Duplicate your theme before editing code
⚠️ Mobile Check – Verify how your header looks on mobile after changes
⚠️ Alternative Search – Consider if customers might still need search functionality
Final Thoughts
Removing the search icon from your Debut theme is a simple way to streamline your store’s design. Whether you use the no-code method or dive into CSS/Liquid, you can achieve a cleaner header in minutes.