How to override the Search bar functionality?

New Member
4 0 0

Hi, I'm new to Shopify development. We are looking into customizing the Search functionality. We've worked with other eCommerce platforms, which we easily implemented a few interfaces, such as Search, AutoSuggest, Facet, Refinement. Is there similar interfaces to customize the Search experience in Shopify?


I've looked through the Search-template.liqid file and it has something like this:

          <div class="input-group">
            <input type="search" id="SearchInput" name="q" value="{{ search.terms | escape }}" placeholder="{{ '' | t }}" aria-label="{{ '' | t }}" class="input-group__field" autofocus>
            <button class="btn input-group__btn" type="submit">{{ '' | t }}</button>

Question is, how do we override the '' to make a call to our code or web service?





Replies 2 (2)

Shopify Partner
15905 2378 3087

Hello ,

You can customize file.

Check where this is present in edit code section.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
New Member
4 0 0

Hi @oscprofessional ,


I couldn't find that file or function in the Theme. I'm using Boundless theme, but I checked other themes as well. 


Is there examples or tutorials on customizing functions like that? For example, if I want to change this to call my own function, where should I write code for my own function? Apologize as this is a real beginner question.