Tired of clunky, slow search bars hurting your Shopify store’s performance? A Smart Search Bar with advanced filters and custom design can dramatically improve UX, reduce bounce rates, and increase conversions—without expensive apps!
🚀 Key Benefits of This Smart Search Bar:
✔ Lightning-Fast Search – No lag, better than most paid apps
✔ Advanced Filters – Let customers refine results by price, color, size & more
✔ Fully Customizable – Match your store’s branding seamlessly
✔ SEO-Friendly – Improves on-site search relevance (great for Google rankings!)
✔ FREE Code Snippet – No monthly fees, unlike pricey Shopify apps ($20-$50/month)
⚠️ Potential Downsides to Consider:
❌ Requires Basic Coding – Not 100% plug-and-play (but we provide step-by-step instructions!)
❌ Limited AI Features – Unlike premium tools like SearchSpring or Klevu (but perfect for budget-conscious stores)
❌ Self-Maintenance Needed – No auto-updates like apps (but our code is clean & easy to tweak)
🎥 Watch the Full Tutorial & Get the FREE Code:
👉 Shopify Smart Search Bar – Boost Sales with Advanced Filters & Custom Design!
💡 Pro Tip: Pair this with keyword-optimized product titles for even better SEO results!
Have you tried optimizing your search bar? Which do you prefer—custom code or paid apps? Let’s discuss in the comments! ⬇ #ShopifyHacks #Ecommerce #ConversionBoost
{% schema %}
{
"name": "Premium Search Bar",
"class": "section",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Top padding",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Bottom padding",
"default": 36
},
{
"type": "header",
"content": "Search Bar Design"
},
{
"type": "checkbox",
"id": "show_heading",
"label": "Show Heading (H2)",
"default": true
},
{
"type": "text",
"id": "heading_text",
"label": "Heading Text",
"default": "Search"
},
{
"type": "range",
"id": "heading_font_size",
"label": "Heading Font Size (px)",
"min": 12,
"max": 48,
"step": 1,
"default": 24
},
{
"type": "color",
"id": "heading_color",
"label": "Heading Color",
"default": "#000000"
},
{
"type": "select",
"id": "heading_font_family",
"label": "Heading Font Family",
"options": [
{ "value": "inherit", "label": "Inherit" },
{ "value": "Arial, sans-serif", "label": "Arial" },
{ "value": "'Courier New', monospace", "label": "Courier New" },
{ "value": "'Georgia', serif", "label": "Georgia" },
{ "value": "'Times New Roman', serif", "label": "Times New Roman" },
{ "value": "Verdana, sans-serif", "label": "Verdana" }
],
"default": "inherit"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Heading Alignment",
"default": "center",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
]
},
{
"type": "select",
"id": "search_style",
"label": "Search bar style",
"options": [
{
"value": "minimal",
"label": "Minimal"
},
{
"value": "rounded",
"label": "Rounded"
},
{
"value": "full-width",
"label": "Full width"
},
{
"value": "modern",
"label": "Modern"
}
],
"default": "modern"
},
{
"type": "color",
"id": "search_bg",
"label": "Background color",
"default": "#ffffff"
},
{
"type": "color",
"id": "search_border",
"label": "Border color",
"default": "#e0e0e0"
},
{
"type": "color",
"id": "search_text",
"label": "Text color",
"default": "#333333"
},
{
"type": "text",
"id": "placeholder_text",
"label": "Placeholder text",
"default": "Search products..."
},
{
"type": "header",
"content": "Search Icon Options"
},
{
"type": "checkbox",
"id": "show_search_icon",
"label": "Show search icon",
"default": true
},
{
"type": "select",
"id": "icon_type",
"label": "Icon type",
"options": [
{
"value": "default",
"label": "Default SVG icon"
},
{
"value": "custom",
"label": "Custom image"
}
],
"default": "default"
},
{
"type": "image_picker",
"id": "custom_icon",
"label": "Custom search icon",
"info": "Recommended size: 24x24px (SVG or PNG with transparent background)"
},
{
"type": "range",
"id": "icon_width",
"min": 12,
"max": 40,
"step": 1,
"unit": "px",
"label": "Icon width",
"default": 20
},
{
"type": "header",
"content": "Quick Filters"
},
{
"type": "checkbox",
"id": "show_quick_filters",
"label": "Show quick filters",
"default": true
},
{
"type": "text",
"id": "filter_1_label",
"label": "Filter 1 label",
"default": "Category"
},
{
"type": "text",
"id": "filter_1_options",
"label": "Filter 1 options",
"info": "Comma separated values",
"default": "All,Men,Women,Kids,Accessories"
},
{
"type": "text",
"id": "filter_2_label",
"label": "Filter 2 label",
"default": "Price"
},
{
"type": "text",
"id": "filter_2_options",
"label": "Filter 2 options",
"info": "Comma separated values",
"default": "All,$0-$50,$50-$100,$100+"
},
{
"type": "header",
"content": "Advanced Features"
},
{
"type": "checkbox",
"id": "enable_predictive_search",
"label": "Enable predictive search",
"default": true,
"info": "Must be enabled in Theme Settings > Search & Discovery"
}
],
"presets": [
{
"name": "Premium Search Bar",
"category": "Search"
}
]
}
{% endschema %}
{% style %}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
.search-bar__container {
max-width: 800px;
margin: 0 auto 40px;
position: relative;
}
.search-form-{{ section.id }} {
display: flex;
flex-direction: column;
gap: 15px;
}
.search-input__wrapper {
position: relative;
display: flex;
align-items: center;
background: {{ section.settings.search_bg }};
border: 1px solid {{ section.settings.search_border }};
border-radius: {% if section.settings.search_style == 'rounded' %}50px{% else %}8px{% endif %};
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.search-input__wrapper:hover {
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.search-bar__input {
flex: 1;
padding: 16px 24px;
border: none;
background: transparent;
font-size: 16px;
color: {{ section.settings.search_text }};
height: 54px;
}
.search-bar__input::placeholder {
color: {{ section.settings.search_text | color_modify: 'alpha', 0.6 }};
}
.search-bar__input:focus {
outline: none;
}
.search__button {
background: none;
border: none;
padding: 0 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.search__button .icon {
width: {{ section.settings.icon_width }}px;
height: {{ section.settings.icon_width }}px;
color: {{ section.settings.search_text }};
}
.search__button .custom-icon {
width: {{ section.settings.icon_width }}px;
height: {{ section.settings.icon_width }}px;
object-fit: contain;
}
.reset__button {
background: none;
border: none;
padding: 0 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.reset__button:hover {
opacity: 1;
}
.quick-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.filter-select {
position: relative;
min-width: 120px;
}
.filter-select select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 10px 35px 10px 15px;
border: 1px solid {{ section.settings.search_border }};
border-radius: 6px;
background-color: {{ section.settings.search_bg }};
color: {{ section.settings.search_text }};
font-size: 14px;
cursor: pointer;
width: 100%;
}
.filter-select::after {
content: "▼";
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
pointer-events: none;
color: {{ section.settings.search_text }};
font-size: 10px;
}
/* Modern Search Style */
{% if section.settings.search_style == 'modern' %}
.search-input__wrapper {
border-radius: 8px;
border: none;
background: {{ section.settings.search_bg }};
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.search-bar__input {
padding-left: 20px;
}
.search__button {
background: #000;
height: 54px;
width: 60px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.search__button .icon {
color: #fff;
}
{% endif %}
/* Full-width Style */
{% if section.settings.search_style == 'full-width' %}
.search-bar__container {
max-width: 100%;
}
.search-input__wrapper {
border-radius: 0;
border-left: none;
border-right: none;
}
{% endif %}
.predictive-search.predictive-search--search-template {
z-index: 1000;
width: 100%;
left: 0;
margin-top: 5px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
border-radius: 8px;
overflow: hidden;
}
@media (max-width: 749px) {
.search-bar__input {
padding: 12px 16px;
height: 48px;
}
.search__button {
padding: 0 15px;
}
.quick-filters {
flex-direction: column;
gap: 8px;
}
.filter-select {
width: 100%;
}
}
.custom-heading {
font-size: {{ section.settings.heading_font_size }}px;
color: {{ section.settings.heading_color }};
font-family: {{ section.settings.heading_font_family }};
}
@media (max-width: 749px) {
.custom-heading {
font-size: {{ section.settings.heading_font_size | times: 0.8 | round }}px;
}
}
.template-search__header h1.h2.center {
font-size: {{ section.settings.heading_font_size }}px;
color: {{ section.settings.heading_color }};
font-family: {{ section.settings.heading_font_family }};
text-align: {{ section.settings.heading_alignment }};
}
.quick-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px auto 0;
justify-content: center;
max-width: 80%;
}
.filter-select {
position: relative;
min-width: 100px;
}
.filter-select select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 8px 30px 8px 12px;
border: 1px solid {{ section.settings.search_border }};
border-radius: 4px;
background-color: {{ section.settings.search_bg }};
color: {{ section.settings.search_text }};
font-size: 13px;
cursor: pointer;
width: 100%;
height: 36px;
}
.filter-select::after {
content: "▼";
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
pointer-events: none;
color: {{ section.settings.search_text }};
font-size: 9px;
}
@media (max-width: 749px) {
.quick-filters {
max-width: 100%;
gap: 6px;
}
.filter-select {
min-width: 90px;
}
.filter-select select {
padding: 6px 25px 6px 10px;
font-size: 12px;
height: 32px;
}
}
{% endstyle %}
<div class="section-{{ section.id }}-padding">
<div class="page-width">
<div class="template-search__header">
{% if section.settings.show_heading %}
<h1 class="h2 center custom-heading">
{{ section.settings.heading_text }}
</h1>
{% endif %}
<div class="search-bar__container">
{%- if section.settings.enable_predictive_search and settings.predictive_search_enabled -%}
<predictive-search data-loading-text="{{ 'accessibility.loading' | t }}">
{%- endif -%}
<main-search>
<form action="{{ routes.search_url }}" method="get" role="search" class="search-form-{{ section.id }}">
<div class="search-input__wrapper">
<input
class="search__input field__input search-bar__input"
id="Search-In-Template"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ section.settings.placeholder_text | default: 'Search products...' }}"
{%- if section.settings.enable_predictive_search and settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<input name="options[prefix]" type="hidden" value="last">
<button type="reset" class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}" aria-label="{{ 'general.search.reset' | t }}">
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use xlink:href="#icon-reset"></use>
</svg>
</button>
{% if section.settings.show_search_icon %}
<button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
{% if section.settings.icon_type == 'custom' and section.settings.custom_icon != blank %}
<img src="{{ section.settings.custom_icon | img_url: '100x' }}"
alt="Search"
class="custom-icon"
width="{{ section.settings.icon_width }}"
height="{{ section.settings.icon_width }}">
{% else %}
<svg class="icon icon-search" aria-hidden="true" focusable="false">
<use xlink:href="#icon-search"></use>
</svg>
{% endif %}
</button>
{% endif %}
</div>
{% if section.settings.show_quick_filters %}
<div class="quick-filters">
{% if section.settings.filter_1_label != blank %}
<div class="filter-select">
<label for="filter-1" class="visually-hidden">{{ section.settings.filter_1_label }}</label>
<select id="filter-1" name="filter_1" onchange="this.form.submit()">
{% assign filter_options = section.settings.filter_1_options | split: ',' %}
{% for option in filter_options %}
<option value="{{ option | handleize }}" {% if search.terms contains option %}selected{% endif %}>{{ option }}</option>
{% endfor %}
</select>
</div>
{% endif %}
{% if section.settings.filter_2_label != blank %}
<div class="filter-select">
<label for="filter-2" class="visually-hidden">{{ section.settings.filter_2_label }}</label>
<select id="filter-2" name="filter_2" onchange="this.form.submit()">
{% assign filter_options = section.settings.filter_2_options | split: ',' %}
{% for option in filter_options %}
<option value="{{ option | handleize }}" {% if search.terms contains option %}selected{% endif %}>{{ option }}</option>
{% endfor %}
</select>
</div>
{% endif %}
</div>
{% endif %}
</form>
</main-search>
{%- if section.settings.enable_predictive_search and settings.predictive_search_enabled -%}
<div class="predictive-search predictive-search--search-template" tabindex="-1" data-predictive-search>
<div class="predictive-search__loading-state">
<svg aria-hidden="true" focusable="false" 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 -%}
</div>
</div>
{%- if search.performed -%}
{%- if section.settings.show_sort_options and section.settings.filter_type == 'vertical' and search.filters != empty -%}
<facet-filters-form class="facets facets-vertical-sort page-width small-hide no-js-hidden">
<form class="facets-vertical-form" id="FacetSortForm">
<div class="facet-filters sorting caption">
<div class="facet-filters__field">
<h2 class="facet-filters__label caption-large text-body">
<label for="SortBy">{{ 'products.facets.sort_by_label' | t }}</label>
</h2>
<div class="select">
{%- assign sort_by = search.sort_by | default: search.default_sort_by -%}
<select name="sort_by" class="facet-filters__sort select__select caption-large" id="SortBy" aria-describedby="a11y-refresh-page-message">
{%- for option in search.sort_options -%}
<option value="{{ option.value | escape }}"{% if option.value == sort_by %} selected="selected"{% endif %}>{{ option.name | escape }}</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
<noscript>
<button type="submit" class="facets__button-no-js button button--secondary">{{ 'products.facets.sort_button' | t }}</button>
</noscript>
</div>
</form>
</facet-filters-form>
{%- endif -%}
<div{% if section.settings.filter_type == 'vertical' %} class="facets-vertical page-width"{% endif %}>
{%- if search.filters != empty and section.settings.show_filter_sidebar -%}
<aside aria-labelledby="verticalTitle" class="facets-wrapper{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-search-filters" data-id="{{ section.id }}">
{% render 'facets', results: search, enable_filtering: true, enable_sorting: section.settings.show_sort_options, filter_type: section.settings.filter_type %}
</aside>
{%- endif -%}
<div class="product-grid-container" id="ProductGridContainer">
{%- if search.results.size == 0 and search.filters != empty -%}
<div class="template-search__results collection collection--empty{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay gradient"></div>
<div class="title-wrapper center">
<h2 class="title title--primary">
{{ 'sections.collection_template.empty' | t }}<br>
{{ 'sections.collection_template.use_fewer_filters_html' | t: link: search_url, class: "underlined-link link" }}
</h2>
</div>
</div>
{%- else -%}
<div class="template-search__results collection{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="product-grid" data-id="{{ section.id }}">
<div class="loading-overlay gradient"></div>
<ul class="grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop" role="list">
{%- for item in search.results -%}
<li class="grid__item">
{%- case item.object_type -%}
{%- when 'product' -%}
{% render 'card-product',
card_product: item,
media_aspect_ratio: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
lazy_load: lazy_load
%}
{%- when 'article' -%}
{% render 'article-card',
article: item,
show_image: true,
show_date: section.settings.article_show_date,
show_author: section.settings.article_show_author,
show_badge: true,
media_aspect_ratio: 1,
lazy_load: lazy_load
%}
{%- when 'page' -%}
<div class="article-card-wrapper card-wrapper underline-links-hover">
<div class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}" style="--ratio-percent: 100%;">
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ item.url }}" class="full-unstyled-link">
{{ item.title | truncate: 50 | escape }}
</a>
</h3>
</div>
<div class="card__badge {{ settings.badge_position }}">
<span class="badge color-background-1">{{ 'templates.search.page' | t }}</span>
</div>
</div>
</div>
</div>
{%- endcase -%}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
</div>
</div>