Product Documentation
Product DocumentationDeveloper GuideAPI ReferenceHelp Center
  • About Search.io
  • Fundamentals
    • Search settings
      • Understanding relevance and ranking
      • Textual relevance
      • Ranking adjustments
      • Dynamic boosting
      • Synonyms
      • Redirects
    • Promotion rules
      • Triggers
      • Manual curation
      • Boosting
      • Banners
    • Integrating search
      • Display options
      • Filters and sort options
      • Result templates
      • Search UI integration
    • Roles & permissions
    • Reporting
      • Event tracking
      • Trends
      • Content issues
      • Explore
    • Filter expressions
    • Indexing Data
      • Schema
  • Guides
    • General
      • Previewing results
    • ๐Ÿ“„Content websites
      • Crawling a website
      • Adding custom fields
      • Configuring domains
      • Excluding documents
      • Improving content
    • ๐Ÿ›๏ธE-commerce
      • Define schema and sync data
      • Relevance tuning
      • Creating a user interface
      • Adding a sale banner
  • Integrations
    • Shopify
      • Shopify metafields
    • Webflow
    • Drupal
    • Wordpress
  • Deep dives
    • Concepts and terminology
    • How Search.io works
    • Autocomplete
    • Spelling
  • Helpful Links
    • Developer Documentation
    • API Reference
    • Help Center
Powered by GitBook
On this page
  • Installation
  • Creating a custom search UI

Was this helpful?

  1. Integrations

Shopify

Increase revenue quickly through better on-site search and discovery for Shopify. Search.io makes it easy to put the right product in front of your customer.

PreviousAdding a sale bannerNextShopify metafields

Last updated 3 years ago

Was this helpful?

Installation

1. Add the Search.io app to your store

Head to the and install the Search.io โ€‘ Product Search & Merchandising app.

2. Create a Search.io account

Next up, you will need a Search.io account. If you don't already have one, using Google single sign-on, or specify a username and password.

To use Search.io with Shopify you will need a paid or trial plan. For more information on the 14-day free trial and pricing, see the .

3. Create a Search.io collection

A collection in Search.io, not to be confused with Shopify collections, stores all of the product information required to create a great search. Search.io will suggest a name based on your store name, but feel free to change it.

4. Index your products

Kick back and relax. Search.io will index your products in the background. This initial index will take about 30 seconds, but depending on the number of products in your store, Search.io will continue the indexing process in the background.

5. Integrate the Search UI

After the initial index is complete, you will land on the dashboard. Once your search is up and running, the dashboard will display search analytics and the most popular search terms, helping you get a better understanding of what your customers are looking for.

Now it's time to install the search UI into your store. Click the link at the bottom of the left-hand navigation menu.

This is the Search UI Builder. On the left you'll find configuration options to adjust the filters, and the look and feel of your search UI. On the right is a live preview, showing your products. Go ahead and try out some of the filters and the search.

The font style and color of the filters and search results will automatically adapt to your store styles once installed.

Once you are happy with the search UI, click the Install button on the bottom left. Follow the displayed installation instructions, which are tailored to your configuration.

๐ŸŽ‰ Congratulations, you are done!

Creating a custom search UI

The React SDK comes with many of the components available in the Search UI Builder, but also allows you to build your own components and leverage Hooks to integrate the search.

If you are manually installing Search.io into a live store, we recommend that you and implement the app on a copy first. That way you can ensure everything is perfect before you push it live.

Need help with the installation? with one of our experts. Weโ€™ll advise how to best integrate Search.io into your Shopify theme and get you up and running in no time.

To create a custom search experience, use the It does require development experience and the implementation takes longer, but it enables you to create a completely unique search UI.

Search.io supports . Adding metafields to Search.io can further improve your storeโ€™s search ranking and relevance, and show product metafield data in your search results view.

duplicate the active theme
Book a quick consultation
Search.io React SDK.
Shopify metafields
Shopify metafields
Shopify App store
sign up
pricing page
Shopify