Are you tired of customers struggling to find products on your Shopify store? Adding an extra search bar to strategic locations can significantly enhance user experience and boost sales. In this guide, we’ll show you how to effortlessly implement an additional search bar using a free code snippet and a detailed video tutorial.
The Benefits of an Extra Search Bar
Before diving into the technicalities, let’s explore why adding an extra search bar is beneficial for your Shopify store:
- Improved User Experience: Customers can quickly find what they’re looking for without scrolling to the top of the page.
- Increased Product Discoverability: By placing search bars in high-traffic areas, you can introduce customers to products they might not have considered.
- Enhanced Conversion Rates: A readily available search bar can streamline the purchasing process, leading to more sales.
- Flexible Store Layout: You can customize your store’s layout without compromising search functionality.
Free Code Snippet to Add an Extra Search Bar
To get started, you’ll need to add a custom liquid section to your Shopify theme. Here’s a basic code snippet that you can customize:
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-search.css' | asset_url | stylesheet_tag }}
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
<script src="{{ 'facets.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<script src="{{ 'main-search.js' | asset_url }}" defer="defer"></script>
<style>
.template-search__header {
margin-bottom: 3rem;
}
.template-search__search {
margin: 0 auto 3.5rem;
max-width: 74.1rem;
}
.template-search__search .search {
margin-top: 3rem;
}
.template-search--empty {
padding-bottom: 18rem;
}
@media screen and (min-width: 750px) {
.template-search__header {
margin-bottom: 5rem;
}
}
.search__button .icon {
height: 1.8rem;
}
</style>
{%- liquid
assign sort_by = search.sort_by | default: search.default_sort_by
assign terms = search.terms | escape
assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
-%}
{%- 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;
}
}
{%- endstyle -%}
<div class="template-search{% unless search.performed and search.results_count > 0 %} template-search--empty{% endunless %} section-{{ section.id }}-padding">
<div class="template-search__header page-width">
<h1 class="h2 center">
{%- if search.performed -%}
{{- 'templates.search.title' | t -}}
{%- else -%}
{{- 'general.search.search' | t -}}
{%- endif -%}
</h1>
<div class="template-search__search">
{%- if 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">
<div class="field">
<input
class="search__input field__input"
id="Search-In-Template"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if 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 -%}
>
<label class="field__label" for="Search-In-Template">{{ 'general.search.search' | t }}</label>
<input name="options[prefix]" type="hidden" value="last">
{%- if 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 -%}
<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">
</svg>
</button>
<button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<svg class="icon icon-search" aria-hidden="true" focusable="false">
<use xlink:href="#icon-search">
</svg>
</button>
</div>
</form>
</main-search>
{%- if settings.predictive_search_enabled -%}
</predictive-search>
{%- endif -%}
</div>
{%- if search.performed -%}
{%- unless section.settings.enable_filtering or section.settings.enable_sorting -%}
{%- if search.results_count > 0 -%}
<p role="status">{{ 'templates.search.results_with_count_and_term' | t: terms: search.terms, count: search.results_count }}</p>
{%- endif -%}
{%- endunless -%}
{%- if search.results_count == 0 and search.filters == empty -%}
<p role="status">{{ 'templates.search.no_results' | t: terms: search.terms }}</p>
{%- endif -%}
{%- endif -%}
</div>
{%- if search.performed -%}
{%- if section.settings.enable_sorting 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>
<div class="product-count-vertical light" role="status">
<h2 class="product-count__text text-body">
<span id="ProductCountDesktop">
{%- if search.results_count -%}
{{ 'templates.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
{%- elsif search.products_count == search.all_products_count -%}
{{ 'products.facets.product_count_simple' | t: count: search.products_count }}
{%- else -%}
{{ 'products.facets.product_count' | t: product_count: search.products_count, count: search.all_products_count }}
{%- endif -%}
</span>
</h2>
<div class="loading-overlay__spinner">
<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>
</form>
</facet-filters-form>
{%- endif -%}
<div{% if section.settings.filter_type == 'vertical' %} class="facets-vertical page-width"{% endif %}>
{%- if search.filters != empty -%}
{%- if section.settings.enable_filtering or section.settings.enable_sorting -%}
<aside aria-labelledby="verticalTitle" class="facets-wrapper{% unless section.settings.enable_filtering %} facets-wrapper--no-filters{% endunless %}{% if section.settings.filter_type != 'vertical' %} page-width{% endif %}" id="main-search-filters" data-id="{{ section.id }}">
{% render 'facets', results: search, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, filter_type: section.settings.filter_type %}
</aside>
{%- endif -%}
{%- 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 -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li class="grid__item">
{%- case item.object_type -%}
{%- when 'product' -%}
{%- capture product_settings -%}{%- if section.settings.product_show_vendor -%}vendor,{%- endif -%}title,price{%- endcapture -%}
{% 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>
The video will guide you through the following steps:
- Accessing Your Shopify Theme Editor: Navigate to your Shopify admin, then go to Online Store > Themes > Actions > Edit Code.
- Creating a New Section: Add a new section named “custom-search” or any preferred name.
- Pasting the Code Snippet: Replace the default section code with the provided code snippet.
- Customizing the Search Bar: Modify the placeholder text, button style, and other elements to match your store’s design.
- Adding the Search Bar to Your Page: In the theme editor, select the desired section where you want to place the search bar and add the “custom-search” section.
Additional Tips
- Test Thoroughly: Ensure the search bar functions correctly on different devices and browsers.
- Consider Placement: Strategically position the search bar for maximum visibility and usability.
- Experiment with Design: Customize the search bar’s appearance to match your store’s branding.
By following these steps and incorporating the provided code snippet, you can easily add an extra search bar to your Shopify store and enhance the overall shopping experience for your customers.