The Swiftype Blog

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 an unprecedented 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].

Building an Asynchronous API to Improve Performance

One of the challenges we’ve had to deal with at Swiftype is that we have had customers pushing a lot of search and indexing traffic from very early on. When a customer is pushing hundreds of index updates per second, it’s important to respond quickly so we don’t start dropping requests.

In order to do that, we’ve built bulk create/update API endpoints to reduce the number of HTTP requests required to index a batch of documents and moved most processing out of the web request. We’ve also invested in front-end routing technology to limit the impact customers have on each other.

However, we were not satisfied. Sometimes when a large customer was indexing a huge number of documents, our front-end queues would still back up.  In the pursuit of even better response times for our customers, we’ve built an asynchronous indexing API. Our goals in creating the new API were high throughput, supporting bulk requests for all interactions, and excellent developer ergonomics. We wanted an API that was fast and easy to use.

Here’s how it works.

async_bulk_API_vertical_2.28.39_PM

First, customers submit a batch of documents to create or update. The request for this looks just like our pre-existing bulk create or update API, but goes to a new endpoint.

When our server receives the response, it performs a quick sanity check on the input, without hitting the database. If all the input parameters are present and validly formatted, we create two records in our database for each document that was submitted: a document creation journal, and a document receipt.

For performance, we insert these rows using activerecord-import. This is a great library that uses a single INSERT statement with multiple rows. This results in a massive speed improvement compared to standard ActiveRecord when saving a large number of records. We also generate the IDs ahead of time using BSON. By generating the IDs ahead of time, we don’t need to get them from the database after inserting, and using BSON lets us encode a timestamp in the ID at the cost of a larger ID column.

Once created, we enqueue a message for each document creation journal onto a queue that is read by a pool of loops workers. Loops is a dead-simple background processing library written by our Technical Operations Lead, Oleksiy Kovyrin. It makes it easy to write code that does one thing forever, in this case, reading messages off the queue and creating the associated document in the database.

The response to the API request includes a way to check the status of all the document receipts. To make the API easy to use, we’re including URLs to the created resources. Though we’re not following all its precepts, this approach is inspired by the idea of the hypermedia API. These URLs make it easy for both humans and computers to find the resource.

Since the API is asynchronous, users must poll the document receipts API to check for the status of the document creation. We’ve built an abstraction in our Ruby client library that allows developers to simulate a synchronous request, although we recommend that only for development.

By pushing all work except for JSON parsing and the most minimal input validation to the backend, we’re able to respond to these API requests very quickly. On the backend, the loops workers read messages off the queue and create documents. When a loops worker attempts to create a document, it updates the document receipt (either with the status of “complete” and a link to the created/updated document, or with the status “failed” and a list of error messages) and deletes the document creation journal.

This brings us to one final aspect of the asynchronous API: how we make sure it keeps working. If our loops workers started failing, the document creation journals would back up without being processed, and no documents would be created/updated. To guard against this, we have built a monitoring framework that alerts us when the oldest record in the table is older than a certain threshold.

This solution has been successful for us in beta tests with our largest API users, and we have now rolled it out to everyone.

We hope this helps you build out your next high-throughput API. If this is the kind of thing you’re interested in, we’re hiring engineers for our core product and infrastructure teams.

Swiftype Announces $13 million Series B Funding Round

Today we’re excited to announce that we’ve raised a $13 million Series B financing led by our investors at NEA. We’ve actually worked with NEA since our company was only a few weeks old — first as a part of the Seed round we raised during Y Combinator and again when they led our Series A in September of 2013 — and we’re delighted to further our partnership with them today. We’re also excited to officially welcome NEA Partner Chetan Puttagunta to the Swiftype board.

Swiftype-Office

Swiftype has come a long way since graduating from Y Combinator in March of 2012. Quin and I started the company alone in an apartment in Mountain View, CA, adding Luke Francl and Oleksiy Kovyrin as quickly as we could convince them, and then the team stayed that size for a while. But today we’re a team of over 25 incredibly talented individuals, and our business has grown similarly. Today we power billions of queries every month across hundreds of thousands of websites, mobile applications, and SaaS applications. Along the way we’ve had the privilege of working with many fantastic companies, including Qualcomm, CloudFlare, Shopify, and Twitch. It has taken a tremendous amount of dedication — and a lot of hard work — from our entire team to get to where we are today, and I couldn’t be more proud of the progress we’ve made so far.

Looking ahead, these new funds will fuel our continued growth as we look to bring on more search engineers, expand our sales and marketing efforts, and establish a stronger position of leadership within the search industry.

If you’re interested in joining a quickly growing, fast-paced organization, we encourage you to check out our jobs page. We’re always excited to meet new people who are interested in joining the Swiftype team, and we’d love to hear how you can contribute.

Swiftype for Zendesk

Zendesk_logo_RGB

As we’ve written before, search is a critical tool for self-service support centers. Users who enter the documentation or support section of a website generally have a clearly defined issue in mind, and a powerful search bar provides these users with a clear path to the content they are looking for.

To help more support centers bring great search to their users, Swiftype is excited to announce our integration with Zendesk Help Centers, making it easy for knowledge bases built with Zendesk to deliver the search experience that customers expect. With Swiftype powering search on your Zendesk Help Center, site owners have the power to customize results for individual queries, ensuring that users always find the most helpful content. Furthermore, Swiftype provides detailed analytics on what your users are searching for, providing key insight into user issues and identifying content gaps by populating a list of top queries that return no results.

With these tools and more, site owners can redefine their Help Center user experience by providing powerful and customizable search without the need to consult engineering. Get started by creating account today.

New feature: Live Index Preview tool

Today we are excited to announce a new dashboard feature for site owners with crawler based engines: the Live Index Preview tool. Some of you may have noticed this feature since we rolled it out a month ago, but we announce it today in conjunction with our new meta tags tutorial, which walks site owners through the steps required to implement Swiftype meta tags on your website template.

Now when you log into your Swiftype account and visit the Content tab, you have the ability to compare the live state of your site’s content with what Swiftype presently has indexed for your search engine. To do this, click on the Details button for a page document from your main Content tab view, or look up a specific URL from the search box.

On the Details page, switch from the indexed page overview to the live view by clicking on the bolt icon. Once you switch to live view, you can see what Swiftype currently has indexed in the left column, side by side with your live site offerings in the right column.

Compare your search engine index directly with your live site content with the Live Index Preview tool.

Why is this tool useful? This tool allows site owners to make changes to their site (modifying content or adding custom meta tags) and immediately see how their index will change during the next recrawl. Furthermore, from the Options drop down it’s possible to trigger instant recrawls of specific pages.

The Live Index Preview enables a much greater degree of flexibility when making changes to your website, allowing you to immediately see the impact of those changes in your search engine index without having to wait for a Swiftype recrawl to take place. To view our new meta tags tutorial, click on the link below.

Improve your site search today with these quick tips

On the modern web, search bars are everywhere. Google, the modern address bar doubling as a search bar, and the prevalence of search tools throughout the web have trained users to expect a search option when they have a clear idea of what they are looking for. This clear idea—intent—makes visitors who use search one of the most valuable online audiences.

The power of Google’s web search and of major internet players’ such as Amazon’s site search often lead to an assumption that all search solutions offer the same experience that your visitors expect. However, if you’ve used many search functions, you know this is not true. While a comprehensive, simple solution to robust site search is the best way to ensure your site doesn’t disappoint your visitors, we’ve put together a list of steps that site owners can take to improve their search experience right away.

  1. Use your search analytics. A search bar is an extremely unfiltered form of customer feedback—a free text box that asks the searcher to type in exactly what they want. This unfiltered feedback should be valued for what it is: a goldmine of analytics on your visitors. Be sure to listen to this feedback, checking for popular searches, searches that return no results, autocomplete selections where applicable, and any other information about what your visitors are looking for. You should then pipe these learnings into your marketing and product strategy. For example, an ecommerce company who sells shoes might notice that their visitors are searching for a brand they do not carry, suggesting that they should consider adding the brand.
  2. Ensure your search is ready for mobile. The share of searches of occurring on mobile websites and in mobile apps is steadily increasing. As users begin to expect their experience to be seamless across their devices, a well-designed and powerful mobile search feature is becoming as important as a desktop search solution. Good mobile search generally includes a prominent, easily accessible search bar, as navigational elements such as breadcrumbs are often difficult to display clearly for mobile visitors. Also, be sure to optimize your results page, autocomplete dropdown, and product thumbnails for the smaller screen space available to mobile users.
  3. Feature your search box prominently and intuitively. Visitors who start with search are your most valuable visitors—as much as 70% more likely to convert than those who avoid search. A search indicates a visitor came to the site for a reason, and a strong search experience moves that visitor to their desired destination quickly and painlessly. Featuring search also encourages your visitors to tell you what they are looking for, critical to an effective marketing and product strategy. To encourage searches from your visitors, make sure your search bar is prominent and intuitively located so that your visitors naturally use the feature. For inspiration, we’ve highlighted a few of our favorite search-driven site designs.
  4. Offer autocomplete results. For each additional page a visitor sees on a website, there is an associated visitor drop-off. Offering autocomplete results in a dropdown reduces the time a searcher needs to spend waiting for a results page to load. This streamlined experience will delight your visitors and reduce friction in their experience.
  5. Don’t ignore misspellings. We’ve all made typos when searching for something, either inadvertently or because we don’t know how to spell a tough word. The success of companies such as Google and Amazon in typo tolerance leads the average internet user to expect search tools to protect them from their mistakes. However, most do not come nearly close enough to Google or Amazon in typo protection, causing situations like this:
    Misspellings can cause frustrating no result pages.
    As the screenshot shows, a missed space between words—the most common typo—in a query that should have results can return none. As modern searchers expect typo protection, not accounting for misspellings can lead visitors to believe their intended query has no results, driving them away from your site. Be sure to pay attention to the most common misspellings, and take steps to ensure your visitors do not mistakenly see a no results page.

Many of these issues are best addressed by using a third-party tool that has developed easy tools for managing issues like results reordering, spellcheck, synonyms, and autocomplete. However, each of these issues represent common problems with native search tools, and each can be rapidly improved simply by paying attention to them. We’ll be featuring more tips for improving your search in the future, so be sure to check the blog often. Finally, if you are looking for a solution to each of these issues that you can get up and running quickly, sign up for a Swiftype account and create your first engine.

Swiftype for Desk.com

desk_logo
Swiftype search is an invaluable tool for self-service support centers. That’s why we’re excited today to announce our integration with Desk.com, making it easy for support centers built on Desk.com to bring powerful search to their users. With Swiftype powering your Desk.com support center search engine, site owners get

  • Detailed analytics. See what users are searching for most to identify common user issues, and see what queries are returning no results to identify gaps in your knowledge base. From there, site owners can create content to address these questions, or use Swiftype’s custom result ranking tool to add in search results for any query they want.
  • Custom result ranking. Drag and drop to rearrange search results for individual queries through Swiftype’s user friendly dashboard, add in results that don’t appear by default, or eliminate individual results entirely. With this power, site owners can tightly customize search results for high volume queries, quickly guiding users to the right support content.
  • Complete front end customization. Once Swiftype is installed, site owners can customize the look and feel of their search bar, autocomplete menu, and search results page to match the aesthetic of their help centers. For even more control, it’s possible to work with Swiftype meta tags to specify exactly what information our web crawler indexes as well as add custom fields and data.

And much more. For more information about Swiftype for Desk.com, check out our listing on the Desk.com app hub, or, for more information about Swiftype for self-service support centers and knowledge bases, check out our case studies.

The importance of robust Shopify site search

Swiftype for Shopify

When a shopper visits your store, many have a clear idea of what they want to purchase. Because of their extensive experience with websites like Google and Amazon, these shoppers are naturally drawn to the search bar when they have a specific product in mind. Data bears this out – visitors who begin their visit with search are 70% more likely to convert than those who do not, making them some of the most high value visitors on your site. A strong search engine for your store is key to ensuring that your most valuable customers have a clear and simple path from search to checkout.

Problems

Shopify, along with most other ecommerce platforms, comes up short in providing the type of search experience your customers expect. The reason behind this shortcoming lies in the fact that implementing a powerful ecommerce search engine is a very technically complex problem. While Shopify ensures that you have a search option on all their stores, they have (correctly) allocated their engineering resources towards building a reliable, fast, and user-friendly ecommerce hosting product. This challenge is complex enough without adding the complexity of robust ecommerce search with the features users expect, such as autocomplete, spellcheck, typo protection, and an advanced algorithm that handles phrases and single word searches seamlessly, not to mention optimizing them for each and every one of their users.

The Risks of Weak Shopify Search

Shopify stores with underwhelming search engines miss out on numerous valuable opportunities, not only in maximizing their conversion and customer value, but in customer intelligence. There’s a reason Amazon features search so prominently in its user experience, beyond the conversion benefits: the invaluable user data they collect about their customers’ purchasing habits and click-through rates. Search queries are a direct signal of user intent – a free text box asking simply “What are you looking for?” Store owners should be paying extremely close attention to visitor trends such as their top searches, the most popular products in search results, and the searches that most commonly yield no results, and incorporating this data into both their product offerings and marketing strategy.

Fix it Yourself or Hire a Professional?

If you employ a large development team and have the resources and capabilities to build, maintain, and scale a robust ecommerce search engine, building your own search solution might be the right approach (after all, Amazon does this). However, if you are like the vast majority of Shopify store owners, you chose Shopify as a way to keep your development costs down and aren’t interested in hiring a team of developers who only work on maintaining an excellent search experience. In this case, using a third party provider is likely your best solution, as you’ll have a team of search professionals working full time to ensure you have the best search available. At Swiftype, search is the core of our business, and we have developed a Shopify search product that provides a beautiful and intuitive search experience, a powerful search algorithm addressing the problems of out-of-the-box search, and a user-friendly dashboard that allows non-technical stakeholders nearly infinite customization and control over their store’s search experience (and we’re releasing more dashboard features regularly). We even power search for Shopify. For more information on Swiftype for ecommerce stores, visit our solutions page today, or to install search immediately, follow the link below.

Browsing vs. buying: UX design considerations for mobile shoppers

In 2015, it is not surprising to online retailers that mobile users comprise a major portion of online shopping. Phones are becoming bigger, faster, and more user friendly; kids who have grown up using smartphones and tablets are entering the consumer market in a major way; and ecommerce websites are quickly adapting by building responsive, mobile optimized websites and apps. All of this has contributed to the significant rise in mobile traffic and sales over the past several years, with nearly half of all online traffic and almost a quarter of sales in the 2014 holiday season taking place on smartphones or tablets, according to a recent study by IBM. The takeaway is clear: today’s consumers expect seamless mobile shopping experiences, and online retailers need to adapt quickly to keep pace with industry leaders.

Mobile traffic is growing, but desktop still dominates in sales.

However, a closer look at this data suggests that the division between mobile and desktop shopping is not so black and white. After splitting mobile traffic and sales data between tablets and smartphones, it seems clear that many users have different preferences for what device they browse with vs. what device they actually complete a purchase on. For instance, IBM’s data reveals that although smartphone traffic more than doubled that of tablets, sales on tablets were over four percent higher. This contrast, coupled with the relative swell in desktop sales vs. desktop traffic, suggests that smartphones are primarily used for research and browsing, while tablets and desktops are favored for completing transactions.

What can site owners learn from this behavioral trend, and how can they optimize their mobile shopping experience(s) to satisfy these browsers? The answer to this question revolves around two main topics of discussion:

  1. What elements of the user experience are most important for researching and browsing?
  2. Should site owners focus on building apps or creating mobile optimized web browsing experiences?

Let’s explore these two questions independently before returning to a discussion of where mobile shopping UX design might go in the future.

User Experience: how to build for browsers

Compared to desktops, mobile phones do not offer nearly as much space on the page to place navigational elements, such as product categories. These elements could be placed in a dropdown menu activated by a single “menu” link, but these can be difficult to design and clunky for smartphone users. A better alternative is to feature a prominent search bar that persists across all subdomains, allowing shoppers to search, browse, and re-search without having to go back at any point in the process. Amazon is a leader in this respect, with a large search bar that provides autocomplete suggestions for users as they type. Statistics clearly demonstrate the importance of search for mobile browsers. A recent survey by Harris and IAB of over 2,000 smartphone users revealed that search is the primary portal through which users find new content on their mobile devices.

Furthermore, product thumbnails should be enlarged to compensate for the reduced screen size—basic responsive design is not enough if your search results are still displayed in a 4×4 product grid on a small phone screen. Additionally, users should be able to zoom in on high resolution product images so that they can look closely before adding them to their cart. These UX changes are relatively simple but important principles that should inform both mobile optimized and application UX design.

Prioritization: creating apps or optimizing for smartphones

In an ideal world, site owners would not need to make a decision on this issue, instead allocating engineering resources to simultaneously build an app and mobile optimized browsing experience independently. However, most websites lack the resources to move so quickly on this front, and are forced to adopt a strategy for developing one before the other. Internet Retailer’s 2015 Mobile 500 report presents a key statistic in this debate, revealing that 80% of online shopping takes place within an app, and that users within an app are 30% more likely to convert. This means that more traffic and sales flow through apps, making a seemingly clear case for focusing on app development.

Still, mobile browsing experiences should not be overlooked. As we touched upon earlier, many online shoppers begin by browsing on their phone even though they often won’t ultimately complete a purchase through this channel, making this mobile browsing experience a critical first impression. Furthermore, Internet Retailer admits that the 80% of traffic in apps statistic is, “surely skewed by large numbers of loyal users of apps from big players such as Amazon.com and eBay.” Taking these caveats into consideration, mobile browsing remains an important UX priority.

Looking forward

Though desktop remains the dominant platform for shopping research and sales, its share of online sales and traffic has been on a steady decline for years. Today, a failure to address mobile design translates to lost opportunities, especially when mobile browsing is considered as the “first impression” that modern shoppers have of an online retailer. For details on how Swiftype helps websites deliver superior mobile browsing and in-app search experiences, check out our mobile solutions page today.

Subscribe to our blog