The Swiftype Blog / Month: May 2015

Styling Search Without Code: The Swiftype Result Designer

Since our founding in 2012, Swiftype has worked hard to let site owners install powerful, user-friendly search on their website without writing code. To take this vision even further, we are excited to announce a new feature this week: The Swiftype Result Designer.

blog-post-desk-dash-mobile

The Swiftype Result Designer allows site owners to style their search results and autocomplete directly from the Swiftype dashboard, making it easy to integrate Swiftype search with the existing look and feel of your website. For a brief overview of how the Swiftype Result Designer works, watch the screencast below.

With the new Result Designer, Swiftype users can

  • Choose between multiple search result display methods
  • Add thumbnails to search results and autocomplete suggestions
  • Decide which page attributes to display in search results
  • Customize search result text and snippet highlighting colors
  • Change their search result and autocomplete design as frequently as they would like, without ever touching their code base

blog-post-color

For new Swiftype users, the Result Designer can be accessed under the INTEGRATE tab, on the INSTALL SEARCH page. For Swiftype users who created their engines before this new installation process was launched in mid-April and would like to transition to this new javascript embed, follow the instructions on the INSTALL page in your Swiftype dashboard or visit our tutorial here.

This is the first in a series of exciting updates that the Swiftype team is making to the installation process. Stay tuned for more updates over the next few months, including new tools to custom style your own facets, filters, and sorting tools—all without writing a single line of code.

Try out the Result Designer today by creating a free account.

Swiftype Shopify Search App Update

We’ve made some exciting new changes to our Shopify Swiftype app that give store owners anunprecedented level of control over how their search results and autocomplete drop-down menu appear to users.

Before these changes, the Swiftype Shopify app offered limited control over how search results appeared within your selected theme. However, after releasing our second edition of the Shopify app last week, the default result display mode is highly flexible and Shopify store owners can even fine tune the look and feel of their search experience through the Swiftype dashboard. Let’s explore these new changes in detail.

Installation

Installing the Swiftype app on your Shopify store works much the same as it always has. Simply visit the Swiftype app listing, click “Get,” and enter your Shopify store URL.

app listing

From here, Swiftype will automatically index your products and create a search engine for you. Depending on the size of your product set, this process can take a few minutes. Once complete, you will be directed to the Swiftype dashboard, where you can customize the look and feel of search (details below), gather detailed analytics on customer search behavior, and fine tune your search results to promote specific products. Let’s explore these features in turn, starting with the autocomplete and search result styling process.

Styling the search results and autocomplete

To customize the style of your search results and autocomplete drop-down, go to the “INSTALL SEARCH” page under the “INTEGRATE” tab. On this page, click “START INSTALLATION” to get started. For Shopify app users, you will only need to make changes on the “APPEARANCE” section of the installation process. In this section, you can control

  • how search results look
  • how many search results appear on the results page
  • the color of the search results text
  • the style and color of the autocomplete drop-down menu

Specific instructions for all of these pieces can be found within the “APPEARANCE” section of the install page.

result-designer-blog-width

Once you have configured the search results, autocomplete, and the color of the results text, hit “SAVE & PREVIEW” on the “COLORS” page. To preview your changes before activating them on your site, simply type in a query and hit enter or click “SEARCH.” The styling you selected will preview directly in the dashboard, which you can go back and edit if you’re not happy with the appearance.

preview-blog-width

Once you are satisfied with the appearance of search results and autocomplete, click “SAVE.” This will navigate you to to the “activate” section where you can review your configuration before clicking “ACTIVATE SWIFTYPE” to push these changes to your live site.

Swiftype Dashboard: Analytics and customization

Once installed on your Shopify store, Swiftype collects detailed analytics about your website search traffic, the most popular searches on your site, what users are searching for but not finding, and more. Learn more >

Leverage detailed analytics to customize search on your Shopify store.

Leverage detailed analytics to customize search for your website.

With this detailed information in hand, you can customize search results to drive more sales on your Shopify store. Swiftype users have three tools to customize search results:

  1. RESULT RANKINGS allows you to drag and drop to reorder search results for individual queries. You can also add in product results that don’t appear by default or eliminate products that you don’t want displayed for that query. Swiftype recommends you customize results for the top ten or twenty queries to fine tune results for popular searches. It is also a good idea to customize results for top queries which return no results, so users hit less dead ends on your site. Learn more >
  2. WEIGHTS allow you to fine tune your relevance model and control how various attributes in your Shopify index impact search results. This tool can be used to promote products with high ratings, high popularity, or any other trait you choose. Learn more >
  3. SYNONYMS allow you to synchronize search results for different words of the same meaning. This is especially useful for stores with high volumes of international traffic, since shoppers from different countries often use different words for the same product. Learn more >

For help installing Swiftype on your Shopify store, email [email protected].

Subscribe to our blog