Search: Add a search bar to your homepage

Note:
Groupthought does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme. Please work with a developer or Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.
This tutorial is intended for use with the Pipeline theme.

This tutorial will allow you to display a search bar as a section on your homepage. 

Result:

1

Create a new section file

Open your Code Editor:

https://shopify.com/admin/themes/current

In the Sections folder, choose Add a new section:

Call the file:

index-search

Example:

Use the Create section button to complete.

Delete all the default code that's generated:

70541e37cc480d81d8560bfb6d005897.png

Replace with all this code:

Click to view code

Save the file.

2

Add the section in the Theme Editor

Customize your theme:

https://shopify.com/admin/themes/current/editor

Add the new section:

At the bottom, in the text group, add the Search section:

Save your section settings in the Theme Editor


Customize the placeholder text

To customize the placeholder text "Search our store", use the Language Editor. You can easily open the Language Editor from the Theme actions button at the bottom of the Theme Editor:

Once in the Language Editor, use the filter bar (1) and find the Search Placeholder text (2). Change the text there: