Modern e-commerce stores need flexible, dynamic header features. A frequently requested extension is the option to toggle on or off an inline search bar in the header. Instead of a static button that opens a pop-up, merchant teams can switch between a minimalistic navigation bar and a search that appears directly. In this guide, we'll show you how to integrate a JSON field as a toggle in the theme editor, how to conditionally render the header with Liquid, how to adjust styling using CSS, and how to extend the inline search with live search suggestions. The result is a better user experience and, at the same time, convenient configuration without code changes for merchant teams.
Shopify themes define customizable settings via JSON Schema. These settings allow merchant teams to configure their store in the theme editor without touching any code. You can maintain JSON schema globally in config/settings_schema.json or directly within a section file such as sections/header.liquid if the setting only affects that section. Benefits at a glance: User-friendly customization directly in the theme editor. Clear modularity because settings are bundled per section. Dynamic features such as an inline search toggle can be activated in a controlled manner.
To make the header function controllable, create a new JSON field. When activated, this checkbox displays the inline search bar.
If you want the feature to be available throughout the theme, use the global settings:
JSON:
[
{
"name": "Header Settings",
"settings": [
{
"type": "checkbox",
"id": "enable_in_header_search",
"label": "Enable In-Header Search",
"default": false
}
]
}
]
This snippet creates the “Enable In-Header Search” checkbox in the theme editor. When activated, settings.enable_in_header_search is true.
If the feature should only affect the header, define the scheme directly in the section:
Liquid:
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "checkbox",
"id": "enable_in_header_search",
"label": "Enable In-Header Search",
"default": false
}
]
}
{% endschema %}
This keeps the setting closely linked to the header section and keeps your theme modular.
After the toggle exists, you control the output in the header based on its value. Example in sections/header.liquid:
Liquid:
{% if settings.enable_in_header_search %}
<!-- Inline Search Bar -->
<form action="/search" method="get" class="header-search">
<input type="search" name="q" placeholder="Search..." aria-label="Search" id="header-search-input">
</form>
{% else %}
<!-- Default Search Button -->
<button id="search-btn">Search</button>
{% endif %}
If settings.enable_in_header_search is true, the inline search form is shown, otherwise the standard button. In this way, the header dynamically adapts to the configuration in the theme editor.
For a consistent integration, you usually need a few styles and possibly minor JavaScript adjustments.
CSS:
.header-search {
display: flex;
align-items: center;
}
.header-search input[type="search"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
Adjust spacing, colors, and widths to your design system. Pay attention to focus states and sufficient contrasts for accessibility.
If your theme is already using JS for the previous search (e.g. pop-up), unpair event listeners or only bind them when the inline search bar is active. An easy way is to check whether the inline element exists before binding.
Real-time search suggestions are a big advantage in UX. As users type, relevant hits appear. This is how you build up the feature.
JavaScript:
document.getElementById('header-search-input').addEventListener('input', function() {
const query = this.value;
if (query.length > 0) {
fetchSearchResults(query);
} else {
clearSearchSuggestions();
}
});
The listener responds to input and triggers the loading of suggestions.
JavaScript:
function fetchSearchResults(query) {
fetch(`/search/suggest.json?q=${encodeURIComponent(query)}`)
.then(response => response.json())
.then(data => {
displaySearchSuggestions(data.results);
})
.catch(error => {
console.error('Error fetching search suggestions:', error);
});
}
The request fetches suggestions asynchronously. Depending on the theme, app, or store setup, the endpoint may vary. Check whether your theme comes with an existing suggest endpoint or whether you should use your own endpoint (e.g. via Search & Discovery or an app).
Add a container for suggestions in the header:
HMTL:
<div id="search-suggestions" class="search-suggestions"></div>
And render the items:
function displaySearchSuggestions(results) {
const suggestionsContainer = document.getElementById('search-suggestions');
suggestionsContainer.innerHTML = ''; // Clear previous suggestions
results.forEach(item => {
const suggestionItem = document.createElement('div');
suggestionItem.className = 'suggestion-item';
suggestionItem.textContent = item.title; // Adjust according to your data structure
suggestionsContainer.appendChild(suggestionItem);
});
}
function clearSearchSuggestions() {
document.getElementById('search-suggestions').innerHTML = '';
}
Look for clickable suggestions, links to the product, and meaningful fallbacks when there aren't any results.
With a JSON toggle in the header, you make your Shopify theme noticeably more flexible and user-friendly. You've seen how to provide the setting in the theme editor, conditionally control the output with Liquid, design using CSS and further improve the user experience with live search suggestions. The combination of JSON Schema and Liquid creates a robust, extensible basis on which merchant teams can quickly switch between layout variants without access to code. Good luck implementing and fine-tuning your header search.
UNHYDE is a web and Shopify agency from Munich with a focus on web development, UX and digital growth. Our mission: high-performance platforms that create measurable customer experiences and business impact. As a recognized Shopify partner, we have successfully launched numerous shops and web platforms worldwide. Write to us at hello@unhyde.me — we help you with high-conversion header extensions, robust search setup, and clean theme implementations.
Get in touch
contact now
