Tutorial: Set Up Your E-commerce Store with On-site Search

Tutorial: Set Up Your E-commerce Store with On-site Search

As sites like Amazon and Etsy continue to grow, so too do customers’ expectations as to what e-commerce sites can provide when searching and filtering their catalog of products. At bigger companies, search is so important that there might be an entire team working on just that feature, which can make it difficult for smaller companies to compete.

Filters and facets, autocomplete, typeahead, misspelling management, and instant search with rich item previews are just some of the features that customers have come to expect when searching on your e-commerce site. This is a lot to pull off for a small team, especially if you’re focused on building and growing your store.

However, instead of implementing site search on your own, companies like Sajari allow you to deliver a first-class site search experience without requiring anywhere close to the same amount of development. Let’s take a look at how you can instantly upgrade the site search experience on your e-commerce site.

Integrating a Search Box Into an E-commerce Site

The first step to a better search bar is to sign up for a Sajari account. Once you have an account, head over to the Getting Started guide to begin. You’ll be using Sajari’s React components and hooks to create a seamless search experience for your e-commerce site; these pre-built interfaces allow you to get up and running quickly.

Mapping JSON Schema for Search

Sajari’s app will take you through the onboarding process step by step. One of the first things you’ll be prompted for is the JSON schema of your products. This builds the index for Sajari to know what information about your products is most relevant to visitors, what information you want to make searchable, and so on. If you have a JSON export of your products, you can upload it; if you don’t have this yet, view a sample JSON file here.

Creating the search schema

After you walk through each of the steps of the wizard, Sajari will import your products and build an index, also known as a collection.

Keeping your Collection Updated

After this initial import of data, you will need to keep Sajari notified of any new products that are added or modified. Luckily, Sajari provides an API with accompanying documentation that will help you keep your collections up to date with the latest product information. In addition to allowing you to call the API directly, Sajari has SDKs for many popular languages, including Node, Python, .NET, and many others.

Implementing the Search Front-End

Now that you have your product data in Sajari, it’s time to actually display the search functionality on your site. Sajari has a tool called Search UI Designer that lets you design just what your search experience will look like. You’ll even be able to see the real product data you just imported as you build out this process.

Designing the search experience with Sajari’s "Search UI Designer"

Once you’ve configured the settings to your liking, you can click on the Install button to receive a couple of code snippets to install directly into your application. The first snippet is for rendering the search input and looks something like this:


<div data-widget="search-input">
  <script type="application/json">
    {
      "account": "1629181217263xxxxxx",
      "collection": "products",
      "endpoint": "//jsonapi-us-valkyrie.sajari.net",
      "pipeline": "app",
      "preset": "app",
      "variables": {},
      "mode": "suggestions",
      "redirect": {
        "url": ""
      },
      "theme": {
        "color": {
          "primary": {
            "base": "#667eea",
            "text": "#ffffff",
            "active": "#5a67d8"
          }
        }
      }
    }
  </script>
  <noscript>This page requires JavaScript</noscript>
</div>
<script async src="https://cdn.sajari.com/embed/1/loader.js"></script>


You can see that some of the settings you selected in the Search UI Designer are present in this snippet, and these are what control the appearance of the search field itself. The second snippet you need to embed is on the results page itself and looks something like this:


<div data-widget="search-results">
  <script type="application/json">
    {
      "account": "1629181217263xxxxxx",
      "collection": "products",
      "endpoint": "//jsonapi-us-valkyrie.sajari.net",
      "pipeline": "app",
      "preset": "app",
      "variables": {},
      "filters": [],
      "options": {
        "sorting": {
          "options": [
            {
              "name": "Most relevant",
              "value": ""
            },
            {
              "name": "Alphabetical: A to Z",
              "value": "Name"
            },
            {
              "name": "Alphabetical: Z to A",
              "value": "-Name"
            }
          ]
        },
        "results": {
          "viewType": "list",
          "imageAspectRatio": {
            "grid": 0.563,
            "list": 1
          },
          "imageObjectFit": {
            "grid": "cover",
            "list": "cover"
          }
        },
        "input": {
          "hide": false,
          "position": "top"
        }
      },
      "theme": {
        "color": {
          "primary": {
            "base": "#667eea",
            "text": "#ffffff",
            "active": "#5a67d8"
          }
        }
      },
      "fields": {
        "title": "Name",
        "subtitle": "Short_description",
        "url": "External_URL",
        "image": "Images",
        "originalPrice": "Regular_price",
        "description": "Description",
        "price": "Sale_price"
      }
    }
  </script>
  <noscript>This page requires JavaScript</noscript>
</div>


Once you have these two snippets in place, you will have a working site search bar with access to your previously uploaded product collection.

Site search up and running

You’ll notice that you get features like pagination, the ability to sort by different result facets (most relevant, alphabetical, etc.), as well as the choice to display your results in a list or a grid right out of the box, with no additional coding or configuration required.

Enabling Advanced Search Features

Besides basic site search, Sajari really comes in handy when it comes to the more advanced features that would be even more difficult to develop yourself.

Dynamic Boosting

To maximize sales, Sajari makes use of a machine-learning feature called dynamic boosting. Dynamic boosting automates the order of products in search results based on the outcomes you specify such as clicks, add-to-cart, conversions, and revenue. The search platform knows which keyword searches and results are leading to the right outcomes, so you can program it to optimize results for future queries.

In your search collection, you can assign a score to boost results by outcomes. Dynamic boosting lets you promote products based on rules. For example, you could promote best-selling products that are on sale by defining sale price as an attribute in the collection. You wouldn’t have to indicate particular products to be promoted—rather, the system would use the data you specify to automatically boost the best results from your on-sale items.

Fine-Tuning Relevance

In addition to boosting particular products, you can also weigh particular fields more highly for better search relevance. For example, if you know you’ve tagged your products particularly well, you can apply a greater weight to the tag field than the title. Or, if you want users to be able to find products by text that’s in their description, you can increase the weight that the description field has in your search results. These adjustments are easy to make in the textual relevance interface and can have an immediate impact on the relevance and usefulness of your site search, without your writing a single extra line of code.

An example of adjusting textual relevance for a Sajari collection

Synonyms

One of the most impressive features of the best-known search engines like Google or Amazon is their ability to infer what users are searching for and provide them relevant products, even if the users don’t provide the search query exactly or with the correct spelling. In other cases, maybe you want users to be able to use an abbreviation for a commonly searched term that would match any products otherwise. Adding synonyms in Sajari is an easy way to ensure that users see the results you want them to when they use specific terms.

For example, if you sell hoodies on your site, a basic search probably wouldn’t show these as results when the word “sweatshirt” is searched. However, by adding “hoodie” as a synonym for “sweatshirt,” these results would come through for the more popular search term, driving more traffic to product pages and ultimately leading to more sales.

Wrapping Up

Because a site search solution like Sajari offers pre-built UI components as well as the ability to tweak search logic with just a few button clicks, you can offer your customers a superior search experience without having to have a dedicated team build out this functionality. This means you can focus on running your business and serving your customers in the best possible way. Sajari’s search solutions are flexible and can scale in complexity with you and grow as your site does, ensuring that you’ll always be delivering the best possible service to your customers without over-investing in development time.

About the author

Keanan Koppenhaver is the CTO at Alpha Particle where he helps publishers modernize their technology platforms and build their developer teams. You can follow him on Twitter.

Try Sajari completely free for 14-days.
Start today