Replace Search Icon with Search Bar in Shopify Dawn Theme
Published on Jun 13, 2024
Introduction
The Shopify Dawn theme is a popular choice for many online store owners due to its clean design and user-friendly interface. However, some merchants may find that the default search icon doesn’t provide the visibility or functionality they desire. Fortunately, there’s a way to replace the search icon with a more prominent search bar, enhancing the user experience and potentially increasing search usage on your site.
In this comprehensive guide, we’ll walk you through the process of replacing the search icon with a search bar in the Shopify Dawn theme. We’ll cover the necessary code changes, styling options, and additional considerations to ensure a smooth implementation.
Understanding the Dawn Theme Header
The Default Search Icon
By default, the Dawn theme displays a search icon in the header. While this design is clean and minimalistic, it may not be immediately obvious to all users that a search function is available.
Benefits of a Search Bar
Implementing a search bar instead of an icon can:
- Increase visibility of the search function
- Encourage more users to utilize search
- Potentially improve conversion rates by helping customers find products faster
Implementing the Search Bar
Modifying the Header.liquid File
The key to replacing the search icon with a search bar lies in modifying the header.liquid
file. This file controls the layout and functionality of your store’s header.
Step 1: Locate the Header.liquid File
- Log in to your Shopify admin panel
- Navigate to “Online Store” > “Themes”
- Click “Actions” > “Edit code” for your active theme
- Find and open the
header.liquid
file in the Sections folder
Step 2: Replace the Search Icon Code
The most effective solution involves replacing the existing search icon code with a new search bar implementation. Here’s the code you’ll need to add:
<div class="header__icons">
<details-modal class="header__search small-hide">
{%- if settings.predictive_search_enabled -%}
<predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
{%- endif -%}
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input
class="search__input field__input"
id="Search-In-Modal"
type="search"
name="q"
value=""
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results-list"
aria-controls="predictive-search-results-list"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<label class="field__label" for="Search-In-Modal">{{ 'general.search.search' | t }}</label>
<input type="hidden" name="options[prefix]" value="last">
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-search">
</svg>
</button>
</div>
{%- if settings.predictive_search_enabled -%}
<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
<div class="predictive-search__loading-state">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</div>
<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
{%- endif -%}
</form>
{%- if settings.predictive_search_enabled -%}
</predictive-search>
{%- endif -%}
</details-modal>
</div>
This code creates a search bar that integrates seamlessly with the Dawn theme’s existing structure and includes support for predictive search if enabled in your theme settings.
Styling the Search Bar
After implementing the search bar, you may want to adjust its appearance to match your store’s design. You can do this by adding custom CSS to your theme.
Step 1: Add Custom CSS
- In your theme editor, locate the
Assets
folder - Open the
base.css
file - Add the following CSS at the bottom of the file:
@media screen and (min-width: 750px) {
.header predictive-search {
width: 32rem;
}
.search__input.field__input {
border-radius: 30px !important;
border: 1px solid rgba(var(--color-foreground),.1) !important;
}
.header predictive-search .field:before,
.header predictive-search .field:after {
display: none !important;
}
}
This CSS will style the search bar with a rounded appearance and adjust its width on larger screens.
Additional Customization Options
Adjusting Search Bar Size
To modify the size of the search bar, you can adjust the width
property in the CSS. For example, to make it longer, you could change:
.header predictive-search {
width: 40rem; /* Increased from 32rem */
}
Changing Search Bar Shape
To further customize the shape of the search bar, you can modify the border-radius
property. For smoother angles, you might use:
.search__input.field__input {
border-radius: 50px !important; /* Increased from 30px for smoother corners */
}
Altering Search Bar Position
If you want to center the search bar or adjust its position, you can add positioning CSS. For example, to center the search bar:
@media (min-width: 992px) {
.header predictive-search {
position: absolute !important;
left: 50%;
transform: translateX(-50%);
top: 30px;
}
}
Troubleshooting Common Issues
Search Bar Not Appearing
If the search bar doesn’t appear after implementing the changes, double-check that you’ve replaced the correct section of code in the header.liquid
file. Ensure that you’ve included all necessary closing tags and that the indentation is correct.
Styling Conflicts
If your custom CSS isn’t applying correctly, it may be due to specificity issues. Try adding !important
to your CSS rules or use more specific selectors to override existing styles.
Functionality Problems
If the search functionality isn’t working as expected, verify that your Shopify search settings are configured correctly in your admin panel under “Online Store” > “Preferences”.
Conclusion
Replacing the search icon with a search bar in your Shopify Dawn theme can significantly enhance the user experience of your online store. By following the steps outlined in this guide, you can implement a more visible and user-friendly search function that encourages customers to find products quickly and easily.
Remember to test your changes thoroughly across different devices and browsers to ensure a consistent experience for all your visitors. With these modifications, you’re well on your way to optimizing your store’s search functionality and potentially boosting your conversion rates.
Take Our Quick Quiz:
Which primary product image do you think has the highest conversion rate?