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="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="input-group__field" autofocus>
            <button class="btn input-group__btn" type="submit">{{ 'general.search.submit' | t }}</button>
          </div>

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

 

 

 

 

0 Likes
Highlighted

Hello ,

You can customize general.search.submit file.

Check where this is present in edit code section.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
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. 

0 Likes