This is directly not possible with the Dawn theme, you need to customize the coe code for this @brekila
Do you maybe have experinece for that to modify code? some examples
Yes, I have done this in the past. Here is an example. Link
Let me know
Hey @brekila,
Thanks for posting this Question to Shopify community where many Developers and Experts are willing to help with your problem.
Based on your requirements it’s important to understand that shopify Dawn theme has limitation regarding the features that a Merchant should have.
But you will find these features in Shopify premium themes. If you cannot afford for the premium theme the cheap workaround is to hire a Shopify Developer.
It’s the simple way and not cost effective. Converting the Dawn theme Search bar to Drawer and add the upsel in it requires to do complex coding.
if you would like me to implement the same features then would you like to share the Store URL and 4 digits collab code so that I can do the requested changes.
Thanks
Hey @brekila
You’re using Dawn theme (by default, clicking the search icon takes you to /search page).
If you want it to open a drawer instead (like the cart drawer), and also show live suggestions/recommendations, you’ll need to
Enable predictive search in Shopify
Create a search-drawer.liquid snippet
<div id="SearchDrawer" class="fixed inset-0 z-50 hidden">
<div class="absolute inset-0 bg-black bg-opacity-50"></div>
<div class="absolute top-0 right-0 w-full max-w-lg bg-white h-full shadow-xl overflow-y-auto">
<div class="p-4 flex justify-between items-center border-b">
<h2 class="text-lg font-semibold">Search</h2>
<button type="button" class="close-search text-gray-500 hover:text-black">âś•</button>
</div>
<div class="p-4">
<form action="{{ routes.search_url }}" method="get" role="search">
<input
type="search"
name="q"
id="SearchInput"
placeholder="Search products..."
class="w-full border px-3 py-2 rounded"
autocomplete="off"
>
</form>
</div>
<!-- Suggestions will load here -->
<div id="SearchResults" class="p-4 space-y-4"></div>
</div>
</div>
Add JavaScript to open/close drawer & fetch results
In theme.liquid (before ), add:
<script>
document.addEventListener('DOMContentLoaded', () => {
const searchToggle = document.querySelectorAll('[data-action="toggle-search"]');
const searchDrawer = document.getElementById('SearchDrawer');
const closeSearch = document.querySelector('.close-search');
const searchInput = document.getElementById('SearchInput');
const searchResults = document.getElementById('SearchResults');
// Open drawer
searchToggle.forEach(btn => {
btn.addEventListener('click', e => {
e.preventDefault();
searchDrawer.classList.remove('hidden');
searchInput.focus();
});
});
// Close drawer
closeSearch.addEventListener('click', () => {
searchDrawer.classList.add('hidden');
});
// Predictive search API
let timer;
searchInput.addEventListener('input', () => {
clearTimeout(timer);
const query = searchInput.value.trim();
if (query.length < 2) {
searchResults.innerHTML = '';
return;
}
timer = setTimeout(() => {
fetch(`/search/suggest.json?q=${query}&resources[type]=product,collection&page=1&limit=5`)
.then(res => res.json())
.then(data => {
let html = '';
if (data.resources.results.products.length > 0) {
html += `<h3 class="font-semibold mb-2">Products</h3>`;
data.resources.results.products.forEach(p => {
html += `
<div class="flex items-center space-x-3">
<img src="${p.image}" alt="${p.title}" class="w-12 h-12 object-cover rounded">
<a href="${p.url}" class="hover:underline">${p.title}</a>
</div>`;
});
}
if (data.resources.results.collections.length > 0) {
html += `<h3 class="font-semibold mt-4 mb-2">Collections</h3>`;
data.resources.results.collections.forEach(c => {
html += `<a href="${c.url}" class="block hover:underline">${c.title}</a>`;
});
}
searchResults.innerHTML = html || '<p>No results found.</p>';
});
}, 300);
});
});
</script>
Replace search icon link with toggle
In header.liquid, replace the search icon link with:
<a href="#" data-action="toggle-search" class="header__icon">
{% render 'icon-search' %}
</a>
Now when you click the search icon, the drawer opens on the homepage.
As you type, live suggestions & recommendations show up instantly.
If you want me to implement this for you, please feel free to reach out and check my past work here: https://rajatweb.dev/ – you’ll find my contact details in my portfolio.
Rajat | Shopify Expert
Hi @brekila,
Dawn theme supports this by default, you can try enabling it at: Customize > Theme settings > Search behavior.
Hi @brekila ,
I am from Mageplaza - Shopify solution expert.
Basically, it is possible to create a new snippet for the search, with the main purpose of designing it in a drawer style. However, this requires a considerable amount of development time. That’s why I would recommend hiring an experienced developer to help you with this. You may also consider our services if you’d like.
Best regards!
Hi,
Hope this will help
Code example
{%- comment -%}
Search Drawer (opens on top of the page, uses Shopify predictive search)
Create a navigation menu called "search-suggestions" (handle: search-suggestions) to control default links.
{%- endcomment -%}
<details id="SearchDrawer" class="search-drawer">
<summary class="search-drawer__toggle">
<!-- This <summary> allows keyboard/ESC support; we open it via JS -->
</summary>
<div class="search-drawer__overlay" role="dialog" aria-modal="true" aria-labelledby="SearchDrawerLabel">
<div class="search-drawer__panel">
<button type="button" class="search-drawer__close" aria-label="{{ 'accessibility.close' | t }}">Ă—</button>
<h2 id="SearchDrawerLabel" class="visually-hidden">{{ 'general.search.search' | t }}</h2>
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
<predictive-search data-loading-text="{{ 'accessibility.loading' | t }}">
<form action="{{ routes.search_url }}" method="get" role="search" class="search-drawer__form">
<input
id="Search-In-Drawer"
type="search"
name="q"
autocomplete="off"
placeholder="{{ 'general.search.search' | t }}"
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
>
<input name="options[prefix]" type="hidden" value="last">
<button class="search-drawer__submit" type="submit">{{ 'general.search.search' | t }}</button>
</form>
<!-- Predictive results drop here as you type -->
<div id="predictive-search" tabindex="-1"></div>
</predictive-search>
<!-- Default suggestions + recommendations (shown before typing) -->
<div class="search-drawer__suggestions" data-default-suggestions>
<h3 class="search-drawer__heading">{{ 'templates.search.suggestions' | t | default: 'Popular searches' }}</h3>
<ul role="list" class="search-drawer__links">
{%- for link in linklists.search-suggestions.links -%}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{%- else -%}
<li><a href="/collections/all?q=best">Best sellers</a></li>
<li><a href="/collections/new">New arrivals</a></li>
<li><a href="/collections/sale">On sale</a></li>
{%- endfor -%}
</ul>
{%- assign featured = collections['frontpage'] | default: collections['all'] -%}
{%- if featured != blank and featured.products_count > 0 -%}
<h3 class="search-drawer__heading">{{ 'sections.featured_collection.title' | t | default: 'Recommended for you' }}</h3>
<div class="search-drawer__products">
{%- for product in featured.products limit: 4 -%}
<a class="search-drawer__product" href="{{ product.url }}">
{{ product | image_url: width: 240 | image_tag: loading: 'lazy' }}
<span class="search-drawer__product-title">{{ product.title }}</span>
<span class="search-drawer__product-price">{{ product.price | money }}</span>
</a>
{%- endfor -%}
</div>
{%- endif -%}
</div>
</div>
</div>
</details>
<style>
.search-drawer__overlay{position:fixed;inset:0;display:none;background:rgba(0,0,0,.45);z-index:60}
.search-drawer[open] .search-drawer__overlay{display:block}
.search-drawer__panel{position:relative;background:#fff;border-radius:12px;max-width:min(760px,96vw);
margin:72px auto 24px;max-height:80vh;overflow:auto;padding:16px 16px 20px}
.search-drawer__close{position:absolute;top:8px;right:12px;font-size:28px;line-height:1;background:transparent;border:0;cursor:pointer}
.search-drawer__form{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.search-drawer__form input[type="search"]{flex:1;padding:.75rem 1rem;border:1px solid var(--color-foreground-20,#ddd);border-radius:8px}
.search-drawer__submit{padding:.65rem 1rem;border-radius:8px;border:1px solid #ddd;background:#f6f6f6;cursor:pointer}
.search-drawer__heading{margin:.75rem 0 .25rem}
.search-drawer__links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 .5rem;padding:0}
.search-drawer__links a{display:inline-block;padding:.4rem .6rem;border:1px solid #eee;border-radius:999px;text-decoration:none}
.search-drawer__products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.search-drawer__product{display:block;text-decoration:none}
.search-drawer__product-title{display:block;margin-top:4px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
</style>
<script>
document.addEventListener('click', function(e){
const openBtn = e.target.closest('[data-open-search]');
if(openBtn){
const drawer = document.getElementById('SearchDrawer');
drawer.setAttribute('open','');
setTimeout(() => {
const input = document.getElementById('Search-In-Drawer');
if(input) input.focus();
}, 0);
}
if (e.target.closest('.search-drawer__close') || e.target.classList.contains('search-drawer__overlay')) {
document.getElementById('SearchDrawer').removeAttribute('open');
}
});
document.addEventListener('keydown', function(e){
if(e.key === 'Escape'){
const drawer = document.getElementById('SearchDrawer');
if(drawer && drawer.hasAttribute('open')) drawer.removeAttribute('open');
}
});
</script>