Instant Search

Personalized and customized instant search widgets that fit with the look and feel of your brand. Let your customer to find products in instant.

Sledge provides several widgets you can use to integrate it with your store.

Available widgets :

If you're using Hydrogen or Next.js,
make sure to install the @sledge-app/react-instant-search package first.

npm i @sledge-app/react-instant-search

Search Widget

Search Widget is an Instant Search's widget you can use to search your product or other data like (collection, page, blog, article) in a text field form.

Here is a step-by-step guide to adding this widget with block.

From your Shopify admin, navigate to Online Store > Themes > click the Customize button.
Click + Add Section > Search search widget > select the Search Widget section.

You can rearrange Search widget by Click and drag the ⋮⋮ icon
When ready, Save your changes.

If the position is not suitable, you can add it manually by selecting the

block

Search Icon Popup

Search Icon Popup is an Instant Search's widget you can use to search your product or other data like (collection, page, blog, article) in a popup search form.

Here is a step-by-step guide to adding this widget with block.

In the Theme Installation, click Integrate to my theme on Instant Search option.

Then click Add widget to my theme on Add Search Icon Popup option.

You will be directed to the Editor, and the Search Icon Popup will have been added automatically.

You can rearrange Search Icon Popup by Click and drag the ⋮⋮ icon
You can customize the Search Icon Popup by click the Search Icon Popup Block.

When ready, Save your changes.

If the position is not suitable, you can add it manually by selecting the

block

Search Result

Search Result is an Instant Search's widget you can use to display product or other data search results like (collection, page, blog, article) on a single page.

By default, Sledge provides you a proxy page that links to
https://YOUR-SHOPIFY-STORE.myshopify.com/apps/sledge/search

If you want to create a custom URL for the Search result as you desire,
you can put a Search result on the new page.

Here is a step-by-step guide to adding this widget to new page.

From your Shopify admin, navigate to Online Store > Themes > click the Customize button.
Navigate to the drop-down menu at the top, select Pages > + Create template.

For example, you can create a template named search result and select Based on Default page. When ready, you can save the template by click Create template button.

Once you've Created search result template, You will be directed to the Search result page editor.
Click + Add Section > Search Search Result > Slides to Apps > select the Search Result.

You can customize the Search Result by click the Search Result Block.

Click Save located in the upper-right corner.
Once you've adding Search Result, now it's time to Create a Page.
From your Shopify admin, navigate to Online Store > Pages > click the Add page button.

Add a title, and select Theme template you created earlier, for example: Search Result,
When ready, click Save.

Once you've creating a Search Result Page, Let's change URL on Search Icon Popup.

If you haven't added a Search Icon Popup yet, look here to see how to add the widget.

From your Shopify admin, navigate to Online Store > Themes > click the Customize button.
Click on your Search Icon Popup > Click URL Search Result > Select Pages > Select Search Result

After you've ready, you can simply click Save located in the upper-right corner.
You can see the Search Result page at https://YOUR-SHOPIFY-STORE.myshopify.com/pages/search-result

Learn more

Congratulations! Now that you've learned usage of Instant Search widgets, you can start implementing Instant Search into your store.

If your store requires custom layout and custom callback for the widget, you can learn more on how to modify them based on your needs :

Product Review Product Filters