Are you using the Shopify Dawn theme and want to remove the search icon and search bar from your online store? In this step-by-step guide, we will walk you through the process of how to remove search search bar from the Shopify Dawn theme using a custom code. By following these instructions, you can easily customize your Shopify store to your preference and improve the overall user experience.
How to Remove Search Bar in Shopify Dawn Theme
The following is the step-by-step guide that you should follow to remove the search bar in the Shopify Dawn theme.
Step 1: Create a Backup of Your Theme
Before making any changes, it is essential to create a duplicate of your currently installed theme. This will serve as a backup in case any mistakes are made during the customization process. To create a duplicate, navigate to your Shopify dashboard and follow these steps:
1. Go to “Online Store” on the left-hand side.
2. Click on the three dots next to your current theme.
3. Select “Duplicate” to create an exact copy of your theme.
4. To differentiate it from the original, click on the three dots next to the duplicated version and rename it accordingly (e.g., with the current date).
Step 2: Access Theme Code and Locate “base.css”
Once you have created a backup of your theme, you can proceed to modify the code and remove the search icon and search bar. Follow these steps:
1. Navigate back to “Online Store” and click on “Themes.”
2. Hover over the three dots next to your duplicated theme and select “Edit code.”
3. Look for the “base.css” file by using the search bar on the left-hand side.
4. Click on the “base.css” file located under the “Assets” folder.
Step 3: Add Custom Code to Remove the Search Icon and Search Bar
To remove the search icon and search bar, add the following custom code snippet to the end of the “base.css” file:
“`
.header__icon–search {
display: none !important;
}
“`
Ensure that the code is placed between the curly brackets ({}) of the respective CSS class. The “!important” ensures that the custom code overrides any conflicting style settings within your theme.
Step 4: Save and Preview Changes
After adding the custom code, save your changes by clicking on the “Save” button located in the top right corner. Then, click on “Preview store” to see the modifications in action.
Verify that the search icon and search bar are no longer present on your website’s header. Interact with the header area to ensure the removal is successfully applied.
Learn More: How to Remove Add to Cart Button in Shopify Sense Theme
Conclusion
Congratulations! You have successfully removed the search icon and search bar from your Shopify Dawn theme. By customizing your store to fit your branding and design preferences, you can create a cohesive and seamless shopping experience for your customers. Remember to regularly back up your theme and test any changes on a duplicate to avoid any potential issues.
