In this article, we explore in depth how to enhance your Shopify theme’s header functionality by integrating a JSON field toggle. We’ll guide you through modifying your header to conditionally display an inline search bar when a toggle is enabled in the Theme Editor. This guide not only covers the basics of adding a new JSON field but also delves into using Liquid to control theme elements, styling with CSS, and extending functionality with live search suggestions.
Modern e-commerce stores demand flexibility and dynamic features to engage users. One common improvement is the ability to toggle specific features—like an inline search bar—in the header. Instead of a static button that opens a pop-up, you can empower merchants to switch between a minimalist header and one that includes a search input directly in the navigation area.
In this guide, we’ll show you how to:
This comprehensive approach not only improves the user experience on the storefront but also makes theme customization accessible for merchants without needing to change any code.
Shopify themes use JSON schema to define customizable settings. These settings enable merchants to personalize their store by adjusting parameters without modifying the theme’s code directly. The JSON schema can be added either globally (in config/settings_schema.json) or within individual section files (like sections/header.liquid) if the settings affect only that part of the site.
Understanding how to implement and utilize these settings is key to building a dynamic and customizable Shopify theme.
To let users control the header’s functionality, you first need to create a new JSON field. This field will be a checkbox toggle that, when enabled, will show the inline search bar.
If the feature applies to the entire theme, you might want to add it to the global settings file:
JSON:
[
{
"name": "Header Settings",
"settings": [
{
"type": "checkbox",
"id": "enable_in_header_search",
"label": "Enable In-Header Search",
"default": false
}
]
}
]
Place this snippet in your config/settings_schema.json file. It creates a checkbox labeled “Enable In-Header Search” in the Theme Editor. When checked, settings.enable_in_header_search becomes true.
If the feature only affects a specific section (such as your header), you can define the JSON schema directly in the section file:
Liquid:
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "checkbox",
"id": "enable_in_header_search",
"label": "Enable In-Header Search",
"default": false
}
]
}
{% endschema %}
This approach keeps the setting tied to the header section, making your theme more modular.
Once the JSON toggle is defined, you need to modify your Liquid templates so that the header renders differently based on the toggle’s value.
In your header file (e.g., sections/header.liquid), use Liquid to check the toggle’s status:
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 %}
In this snippet:
settings.enable_in_header_search is true, the inline search form is rendered.false, the default search button (which might open a pop-up) is displayed.This conditional logic ensures that the header adapts dynamically based on the merchant’s configuration.
To ensure that your new inline search bar looks and behaves as intended, you’ll likely need to update your CSS and JavaScript.
Add CSS rules for the new elements to blend them into your theme’s design. For example:
CSS:
.header-search {
display: flex;
align-items: center;
}
.header-search input[type="search"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
These styles can be adjusted according to your overall design guidelines.
If your theme already has JavaScript to handle search functionality (like opening a pop-up), you may need to adjust it so that it doesn’t interfere with the inline search bar. For example, you might conditionally bind event listeners only when the inline search bar is present.
An advanced feature to consider is auto-search suggestions. This functionality displays relevant results as the user types in the search bar, greatly enhancing the user experience.
Attach an event listener to the search input field to detect when the user types:
JavaScript:
document.getElementById('header-search-input').addEventListener('input', function() {
const query = this.value;
if (query.length > 0) {
fetchSearchResults(query);
} else {
clearSearchSuggestions();
}
});
This code listens for input events and triggers a function when the user types.
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);
});
}
This function encodes the user’s query and fetches suggestions asynchronously.
Add an HTML container to your header for showing the suggestions:
HMTL:
<div id="search-suggestions" class="search-suggestions"></div>
Then, define the function to render the suggestions:
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 = '';
}
These functions dynamically populate the suggestion container based on the data returned from the API.
For a smoother experience, consider:
Before going live, thorough testing is essential:
Integrating a JSON field toggle into your Shopify theme empowers merchants by providing an easy way to customize header functionality. This guide has taken you through the process—from creating a new JSON setting to conditionally rendering an inline search bar, and finally, enhancing it with live search suggestions.
By leveraging Shopify’s JSON schema and Liquid templating, you create a more dynamic and user-friendly storefront that can adapt to evolving business needs. Whether you’re a developer or a merchant looking to fine-tune your store’s appearance, these techniques offer a robust foundation for further customization.
Happy coding, and enjoy the enhanced flexibility of your Shopify theme!
UNHYDE is a Munich-based web development agency dedicated to pushing boundaries in web development, user experience, and digital marketing. Our mission is to create high-performing digital platforms that drive meaningful customer engagement and measurable business growth. We operate internationally and are a recognized Shopify Partner agency, having successfully launched countless websites and webstores worldwide.
For more insights or if you're ready to take your website to the next level, feel free to reach out to us at UNHYDE®, the web design agency. We’re always here to collaborate and craft tailored solutions that meet your unique needs.
get in touch
MAKE CONTACT