Moderne E-Commerce-Stores brauchen flexible, dynamische Header-Features. Ein häufig gewünschter Ausbau ist die Möglichkeit, eine Inline-Suchleiste im Header per Toggle ein- oder auszuschalten. Statt eines statischen Buttons, der ein Pop-up öffnet, können Merchant-Teams so zwischen einer minimalistischen Navigationsleiste und einer direkt eingeblendeten Suche wechseln. In diesem Leitfaden zeigen wir dir, wie du ein JSON-Feld als Toggle im Theme Editor integrierst, wie du den Header mit Liquid bedingt renderst, wie du mit CSS das Styling anpasst und wie du die Inline-Suche mit Live-Suchvorschlägen erweiterst. Das Ergebnis ist ein besseres Nutzererlebnis und zugleich eine komfortable Konfiguration ohne Codeänderungen für Merchant-Teams.
Shopify Themes definieren anpassbare Einstellungen über JSON Schema. Diese Settings erlauben Merchant-Teams, ihren Store im Theme Editor zu konfigurieren, ohne Code anzufassen. Du kannst JSON Schema global in config/settings_schema.json pflegen oder direkt innerhalb einer Section-Datei wie sections/header.liquid, wenn die Einstellung nur diese Section betrifft. Vorteile im Überblick: Benutzerfreundliche Anpassung direkt im Theme Editor. Klare Modularität, weil Einstellungen pro Section gebündelt sind. Dynamische Features wie ein Inline-Search-Toggle lassen sich kontrolliert aktivieren.
Um die Header-Funktion steuerbar zu machen, legst du ein neues JSON-Feld an. Dieses Checkbox-Feld blendet bei Aktivierung die Inline-Suchleiste ein.
Wenn das Feature im gesamten Theme verfügbar sein soll, nutze die globalen Einstellungen:
JSON:
[
{
"name": "Header Settings",
"settings": [
{
"type": "checkbox",
"id": "enable_in_header_search",
"label": "Enable In-Header Search",
"default": false
}
]
}
]
Dieses Snippet erzeugt im Theme Editor die Checkbox „Enable In-Header Search“. Ist sie aktiviert, ist settings.enable_in_header_search true.
Soll das Feature nur den Header betreffen, definiere das Schema direkt in der Section:
Liquid:
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "checkbox",
"id": "enable_in_header_search",
"label": "Enable In-Header Search",
"default": false
}
]
}
{% endschema %}
So bleibt die Einstellung eng an die Header-Section gekoppelt und hält dein Theme modular.
Nachdem der Toggle existiert, steuerst du die Ausgabe im Header anhand seines Werts. Beispiel 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 %}
Wenn settings.enable_in_header_search true ist, wird das Inline-Suchformular gezeigt, andernfalls der Standard-Button. So passt sich der Header dynamisch an die Konfiguration im Theme Editor an.
Für eine stimmige Integration benötigst du in der Regel ein paar Styles und ggf. kleinere JavaScript-Anpassungen.
CSS:
.header-search {
display: flex;
align-items: center;
}
.header-search input[type="search"] {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
width: 200px;
}
Passe Abstände, Farben und Breiten an euer Designsystem an. Achte auf Fokuszustände und ausreichende Kontraste für Barrierefreiheit.
Wenn dein Theme bereits JS für die bisherige Suche (z. B. Pop-up) nutzt, entkopple Event-Listener oder binde sie nur, wenn die Inline-Suchleiste aktiv ist. Eine einfache Möglichkeit ist, vor dem Binden zu prüfen, ob das Inline-Element existiert.
Ein großer UX-Gewinn sind Suchvorschläge in Echtzeit. Während Nutzer:innen tippen, erscheinen relevante Treffer. So baust du das Feature auf.
JavaScript:
document.getElementById('header-search-input').addEventListener('input', function() {
const query = this.value;
if (query.length > 0) {
fetchSearchResults(query);
} else {
clearSearchSuggestions();
}
});
Der Listener reagiert auf Eingaben und triggert das Laden von Vorschlägen.
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);
});
}
Die Anfrage holt asynchron Vorschläge. Je nach Theme, App oder Store-Setup kann der Endpoint variieren. Prüfe, ob dein Theme einen vorhandenen Suggest-Endpoint mitliefert oder ob du einen eigenen Endpunkt (z. B. über Search & Discovery oder eine App) nutzen solltest.
Füge im Header einen Container für die Vorschläge ein:
HMTL:
<div id="search-suggestions" class="search-suggestions"></div>
Und rendere die 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 = '';
}
Achte auf klickbare Vorschläge, Links zum Produkt und sinnvolle Fallbacks, wenn keine Ergebnisse vorhanden sind.
Vor dem Go-live sind systematische Checks entscheidend.
Mit einem JSON-Toggle im Header machst du dein Shopify Theme spürbar flexibler und benutzerfreundlicher. Du hast gesehen, wie du das Setting im Theme Editor bereitstellst, die Ausgabe mit Liquid bedingt steuerst, per CSS gestaltest und mit Live-Suchvorschlägen die User Experience weiter verbesserst. Durch die Kombination aus JSON Schema und Liquid entsteht eine robuste, erweiterbare Basis, auf der Merchant-Teams ohne Codezugriff schnell zwischen Layoutvarianten wechseln können. Viel Erfolg beim Implementieren und beim Feinschliff deiner Header-Suche.
UNHYDE ist eine Web- und Shopify-Agentur aus München mit Fokus auf Webentwicklung, UX und digitales Wachstum. Unsere Mission: performante Plattformen, die messbare Kundenerlebnisse und Business-Impact schaffen. Als anerkannter Shopify Partner haben wir weltweit zahlreiche Shops und Webplattformen erfolgreich gelauncht. Schreibe uns unter hello@unhyde.me – wir unterstützen dich bei konversionsstarken Header-Erweiterungen, robustem Search-Setup und sauberen Theme-Implementierungen.
Get in touch
contact now