Shopify Integration

Adding Site Search 360 to your Shopify store

Our journey with the "360 product search and filters" plugin starts in the Shopify App Store.

You’ll see our app’s entry in the store by searching for “360“. Click “Add app”, log in to your Shopify account and press the “Install app“ button to add it to your site.

You can either install the app right away or check out our demo store via the "View demo store" link on the landing page to get a clearer picture of all the cool features you can expect to implement to your search.

Once the app is installed, you’ll find it under “Apps” in the left side panel menu of your store’s admin page:

A simple click on the title will take you directly to your Site Search 360 Control Panel:

Your Control Panel will be divided into four separate tabs - Search Settings, Design, Test & Go Live and Help & FAQ, each perfectly tailored to take your search to a whole new level of awesome. We’ll go through them one by one.

Configuring how your search will function

The first tab under the name of “Search Settings” is all about the features that your search will be equipped with.

The page that will pop up when you open the app is your “Dashboard”. This is where you’ll find information about how your search is performing.

Initially, you’ll only see the most basic of data here - namely, the number of entries indexed from your site (products and non-commercial pages alike). As your search usage grows, other types of data will also be rendered available, like how many times your customers typed in any queries and which queries were used most frequently, whether there were queries that didn’t return any results at all and much, much more.

All this data can be searched through in a specific timeframe with the use of two filter buttons located in the top right corner of the screen:

“Quick Filter” will display search analytics for this particular day, the day before or the last 7, 30 and 90 days. “Date Range”, in its turn, will allow you to access data from any period at all.

Filtered or not, your Analytics can be exported with a click on a single button:

You can learn all there is to know about your Analytics data in our article on the topic.

“Dashboard” is the first section where you’ll see a nifty little chat icon in the bottom right corner:

While you can email our support team at any time, this button will let you contact them without leaving the project page and instantly get help with any and all aspects of setting up your search.

Right under “Dashboard”, there’s another section called “Data Sources”:

This is every source our crawler indexes in order to compile your search results.

Clicking on “Shopify Data” will take you to the “Index” section separated into two major categories - “Product List” and “Content List”. Both types of data are pulled from your site automatically when you create your project.

“Product List” will display every product page you have on your site along with its unique identifier and name (both of which can be used to search for any product on this list):

The “Show Details” button will provide you with even more information about what is rendered searchable on each of the product pages:

The first thing you’ll notice is a list of “Extracted Facts” for your product:

This data is also pulled from each page automatically, meaning that you don’t have to configure your products’ attributes yourself, though you totally can if you want to.

For instance, with a singular click on the value of the Product Fact, you can either edit the existing value or add an entirely new one.

You can also delete any Fact:

or create a new one with whatever data is available on the product’s page by simply selecting one of the Facts and however many of its attributes you need:

If your product pages are rich in data, you can also filter all available Facts:

At the bottom of the “Product Details” page you’ll find three buttons that will allow to either implement whatever changes you’ve made, discard them or straight-up delete the product from your search results:

“Content List”, in its turn, represents all non-commercial pages from your Shopify store as well as any other Data Sources you configure:

All this data can also be filtered:

sorted by the time the page was added to the search or updated:

and exported for future analysis:

Each page has a description which includes a status signifying whether it’s available for searching or not, its content type and Data Source as well as two little buttons on the very right:

• The “Show Details” button, same as its namesake in “Product List”, opens a pop-up window, detailing all content that can be extracted and thus searched for on any page in particular:

• The “Remove” button deletes the page from your search results (but only until the next sync, so if you want to remove a page once and for all, do so through your admin panel):

As we’ve previously established, your search results aren’t limited to store pages. There are two more major Data Sources for you to consider - “FAQ” and “YouTube”.

In the “FAQ” tab you’ll be able to either add a preconfigured FAQ page with a few XPaths or create a new one using Site Search 360’s FAQ Generator.

The process is described in detail in our article on FAQ Indexing. Feel free to also check out our FAQ demo to get a better idea of what a dedicated FAQ page could bring to the table.

The “FAQ” tab is where you’ll first see the “Show Help” icon:

Should you ever need to find an explanation of how any feature works, you can click on this icon to open an instruction page from our documentation right in your Control Panel:

or search through all of our How-To’s in a dedicated field at the top of the screen:

Last but definitely not least, you can add your YouTube channel to the search - playlists and separate videos alike:

Note: For the vast majority of Site Search 360 projects YouTube Indexing is a paid add-on. Shopify users, however, have it enabled by default for as long as our “Free Start” welcome plan is active.

The next item on our list is the “Result Groups” section:

Result Groups allow you to categorize your search in any number of ways - the point is to compile similar content in one easily accessible place. Some Result Groups, like “Products” or “Suggestions”, are created automatically when you first launch your project. Others you can add manually, depending on your specific needs.

Here’s an example of what a Result Group for blog posts can look like:

The process of creating Result Groups is thoroughly explored in our article on the topic.

Another foolproof way of guiding your users to what they’re looking for with as little effort as possible is “Filters and Sorting”.

“Filters” is yet another section of your Control Panel that relies on data extracted from your site’s pages - Product Facts to be precise.

You can add new filters based on any of the available Product Facts as well as search through, delete and sort existing ones just like with Extracted Facts in the “Product List”.

Here’s what configuration for a “Color” filter might look like:

Site Search 360 filters are very versatile. You can customize not only the names of the filters and the sets of values from your Product Facts that will be used to configure them but also whether all values need to be found on your search results pages in order for said search results to be shown, which order filter values should be presented in when a search is performed and what percentage of products need to have these filters apply to them for the filters to be displayed in the first place. Bonus point: if you’re configuring a “Color” filter like in the example above, you can tick off “Treat as Color Filter” at the bottom of the page and use our Color Picker (or add specific HEX codes to your filter values) to show colors next to each value in a neat little circle.

On the right of each filter you’ll find three buttons that will let you pin this filter to a specific spot in your filter hierarchy displayed during the search (or unpin it from said spot), edit the filter and delete it:

If you don’t want to manually set an order in which your filters will be presented, you can configure an automatic sorting order under “Product Filters Settings” further down the page. You’ll be prompted to choose between sorting your filters alphanumerically or by popularity (most to least often used).

This is also where you can decide whether your filters should have a number next to each value, corresponding with how many pages have said value on them. You can not compute counts at all, compute them only if the number of pages where the value is found is under 1000, compute them for all filters except range ones, or always compute your counts.

Find out more about filters in our dedicated article or check out our Filters demo page to see them in action.

The “Sorting” tab is about the order in which your search results are presented. Said order can only be based on numeric Product Facts (like “Price”), and you can choose to display your pages either from lowest to highest (Ascending sorting order) or highest to lowest (Descending sorting order).

Learn more about this feature in our Sorting Options article.

The “Result Manager” section of the Control Panel is a dream when it comes to search result layout customization.

The first tab you’ll notice is “Result Mappings”:

This is where you’ll go if you ever need to control your search results behavior in regards to specific queries. You can:

• Customize a unique set of results for any query (with filters, singular filter values and sorting options applied to them automatically should you so decide)

• Replace search results for one query with products and pages that would normally appear for another

• Redirect any query to a specific URL instead of the search results page

Here’s an example of a mapping we’ve created to show specific entries from our catalog whenever someone searches for gowns:

Any of your mappings can be hidden from the search, edited or deleted with a click on the buttons on the right of each mapping’s name:

And just when it seems like things couldn’t get any better, they totally do, because you’re by no means limited to your store’s pages when customizing your search - you can also add pages from other domains to your result set or even create entirely new ones with the help of our “Custom Results” feature:

Here you can either configure a promotional banner that will be displayed above your search results or a regular page that will be indistinguishable from them. In this example we went with the latter:

Head out to our article on the Result Manager to learn how to create mappings and custom results yourself.

In between these two lovely tabs there’s another one under the name of “Boosting”:

Boosting strategies will allow you to automatically place certain pages higher than others in your search results.

Boosting is applied differently to product and non-product pages, and the setup process for the two also looks drastically different.

For products boosting is configured as a ranking strategy based on, you guessed it, available Product Facts. All you need to do is click the “Add New Ranking Strategy” button and choose the fact values which, should they be found on any product page, will show our crawler that this page needs to be prioritized in the search result set.

You’re free to add multiple criteria to a singular ranking strategy. You can have them be weighed the same when the search result hierarchy is created or move the toggle at the top to prioritize one over the other.

In the example below we’ve applied boosting based on both the products’ material and their color so that “black leather” products are put before plain old “leather” ones and miles ahead of “black”.

Any ranking ranking strategy can be shown or hidden at any time as well as edited and removed altogether - as always with just a few buttons on the right:

If you have multiple ranking strategies, you can either stick to the Plain Pattern, enabling and disabling specific strategies as you go, or bring in the Chessboard Pattern which will alternate between your ranking strategies in each search performed on the site.

Ranking strategies are explored in detail in our dedicated article.

Non-product pages, for the lack of any Extracted Facts, can only be boosted by URL Pattern - a simple way, yet still an effective one. We have decided to boost our collections and blog posts yet put more value in the former so that both are ranked higher than other non-products pages but collections are still prioritized more:

Further information on this is available in our “Page Boosting” article.

Looking for more ways to customize which search results are shown for any given query? Look no further than the “Dictionary” section:

Here you can create synonymous queries so that search results for one query appear for another and vice versa or a unidirectional “type of” connection that will display all results for the “sub types” of the query whenever someone searches for the “super type” but not the other way around.

More on this section in our “Dictionary” article.

Let’s take a step back from cool customization features and talk about your search’s general behavior as configured in the “Search Settings” section of the Control Panel.

“General” Search Settings are separate for product and non-product pages as was the case with ranking strategies.

For “Product Search” you can tinker with the following settings:

Most are pretty self-explanatory save for two sections:

• “Product Variants” are versions of the same product sold in different colors, sizes and what have you. You can choose to group these variants in one search result with alternative images displaying other versions of the product or separate them so that each variant has its own dedicated search result (this ecommerce feature is further explained in our article on Product Variants).

• “Minimum Ontology Score” reflects how closely your customer’s query needs to match our internal product categorization for any page to be shown in the search results (say, "iPhone case" results for the "iPhone accessories" query but not "iPhone"). This score is set to 2 by default, but the higher it is, the more precise this match has to be (learn more about your products’ ontology score in our dedicated article).

“Content Search” settings are very similar to “Product Search” ones with just a few exceptions:

• “Search Fuzziness” is like your “Minimum Ontology Score” except that it’s not represented by numbers - it is a spectrum rather, ranging from “extremely strict” (necessitates a perfect match between the search query and the content of the page) to “get more results” (requires a very lenient match between the two that could constitute just a few of the entered symbols entered into the search box).

• “Search Field Boosts” work similarly to “Page Boosting” - the only difference is, your pages are boosted not in bulk, unified by a single URL Pattern, but individually, depending on whether the query match is found in the page’s title or its content.

• “Search Snippet” is the description shown underneath each non-product search result. You can either have this snippet be the block of text where a query match is found or the first few paragraphs of the page’s content as extracted by the crawler or get creative with XPaths and Linked Data. You can also not display any snippets at all.

Both types of search settings in this tab will have a “Clear Cache” button at the very bottom - feel free to use it if you ever need a clean slate:

All settings related to “Content Search” are further explored in our “Search Settings” article.

Lastly, we have the “IP Settings” tab which is all about whom (and what) your search is accessible to:

Not only can you prevent certain IPs from using the search - you can also exclude them from your search statistics (quite handy when you want to avoid seeing your own queries in the Analytics). This tab is also where you can enforce query limits per IP (which will prevent you from being charged for using the search more often than your plan permits and even protect you from bot attacks).

These limits and permissions are also detailed in our article on “Search Settings”.

And with that you’ve seen all there is to see about your Control Panel’s first tab. Now it’s time to get creative.

Customizing how your search will look like

So you have painstakingly picked out the theme for your store, and you want the search to be just as pleasing to the eye as the rest of the site’s elements. Thankfully, our Search Designer is fully equipped to help you out with that.

You’ll find five tabs in this section, each related to a specific part of your search.

Starting off with “Main search settings”.

The first thing you’ll notice in this tab are the styling options for your search box — its colors, loading animation and language:

Next up, you’ll see the toggle to turn your search suggestions on and off as well as a field where you can enter the text that will be displayed inside of the search box:

In the following section you’ll be able to configure how (and where) your search results are presented:

The “overlay” option will place your search results in a pop-up window while “embed” will show them wherever the search is initiated. If you go with the latter, remember to provide a selector that can be found on every page of your site to make the search accessible across its entirety.

Here you can also enable searching via voice commands (shown in action in our Voice Search demo):

As well as connect your search to either Google Analytics or Google Tag Manager (both of which will provide you with extensive search statistics) or enable/disable the search’s cookies (note that cookies help make your Analytics that much more precise, so disabling them isn’t the best course of action in most cases):

“Autocomplete suggestions and as-you-type results” tab is responsible for the look and feel of suggested pages displayed before the search is initiated.

“Empty State” and “Query-based” config fields show search suggestions before any symbols are entered into the search box as well as when your users type in the first few:

“Empty State” or “Pre-filled Suggestions” are all about the pages and queries that get suggested whenever your customers first click on the search box. They could, for instance, constitute separate blocks for manually configured autosuggested queries, user’s recent search history and even a link to a predetermined page:

A separate "Query-based" configuration for autocomplete queries that show up when the search box is no longer empty can render the following results based on most popular pages from two of the preconfigured Result Groups:

There are also some general suggestions settings here for you to consider, like the number of characters your users need to enter to have any pages suggested to them, the clickable text that will take the searcher to a full list of results that match the entered query and more:

The next tab under the name of “Search result behavior” is where you’ll find additional settings for your results’ general presentation, Filters and Result Groups as well as a cheeky bit about Highlighting.

Under “Navigation” you can configure whether your search results are separated into groups and if there should be a tab with all results that match the entered query regardless of which Result Group they ultimately belong to and another for pages that don’t fit the defining criteria for any group (it’s called “Other” by default but you can assign a different name to it). This is also where you can select the number of results presented on a single page (or opt for infinite scrolling with no page separation for the search results), make search results open on a new page and have queries that would return a singular result redirect your users to said result automatically.

In the “Filters” section you’ll see three toggles that enable and disable filters in the search, display a number of products that match the filter value next to said value and create a “Clear” button that will allow your users to return the filter to its default state after selecting any of its values. Here you can also choose where your filters should be presented on the search page.

“Highlighting”, in its turn, can be configured for exact and partial matches to the query in the title and/or the snippet of any given page, making certain words bolder and brighter than the rest:

At the very bottom of this tab you’ll find some more toggles which hide specific Result Groups from the search when disabled:

The next tab, “Search result layout”, is yet another place where you can customize what your search results look like.

First off, you get to decide whether your pages will have one primary image displayed in their respective search results or several as well as which images, if any, should be shown if certain pages aren’t illustrated by default (but keep in mind that you can also simply hide them all from the search):

Up next - customization options for the search on desktop:

and mobile:

You can choose to display your results one by one or several per row as well as whether each search result will have an image, a URL and/or a description underneath the title. Note that your setups for the two types of devices don’t have to match.

Lastly, you can add a button to each of the search results that will either add the product to your customer’s cart or simply take them to the product’s page if the respective toggle is moved to OFF:

Finally, we have the “Advanced Settings” tab.

Under “Additional CSS” you can give your search a look that will take it beyond what our Search Designer default design options offer by entering your custom code in a pop-up window on the right side of the screen:

Moving on to truly sophisticated stuff with “Callbacks” and “Templating”. These bad boys will allow you to create a custom HTML structure for your suggestions and search results.

You can read up on both of these features in our “Templating” article.

The bottommost “Configuration” section of this tab will allow you to further personalize the behavior of your search by modifying elements of your config object or creating new ones. Your options are only limited by your own creativity!

Having explored all these functions, you might be wondering whether you’ll be going in blind implementing any design changes. Fear not! You’ll be in full control of the situation thanks to the preview window on the right side of the screen where your search will be displayed with all changes reflected in it immediately after they’re made.

Once you’re finished with your design configuration, you can either publish it on your site or revert back to the version of the search that’s already live with a click on the two buttons in the top right corner:

Make sure to check out our “Search Designer” article for a full guide on all of these features.

So. Your search is now functioning just like you want it to. Its design is absolutely stunning. All you need to do now is preview the search in its full glory and add it to your store.

Testing and publishing the search

And we’re finally at the “Test & Go Live” tab:

This is where you go for three major things:

• Check out what the search will look like when implemented to your site

• Enable the search on your site

• Update your project to include recently added/changed pages in your search or remove obsolete ones

To see your search in action before going live with it (or whenever you change your project in any way and need to make sure the search will look and/or function the way you intended), click on the “Preview & Enable/Disable” button in the “Preview app” section to be taken to a preview screen that will perfectly imitate the layout and design of your site:

Just locate your search box, enter a sample query and voila!

Satisfied with your preview? Then it’s time to finally go live with your search.

There’s two ways you can go about this - via the “Test & Go Live” tab or your Shopify “Themes”.

With “Test & Go Live”:

• Press the “Preview & Enable/Disable” button under “Live Theme” to be taken to the “Preview” section you’ve visited before:

• Go to the “App embeds” tab in the left side panel menu and move the toggle next to "360 search and filters" to ON:

• Save your changes by pressing the respective button in the upper right-hand corner of the screen:

With “Themes”:

• Open the “Themes” tab located in the left side panel menu of your admin page:

• Press the “Customize” button next to the name of your current theme to be taken to our beloved “Preview”:

• Navigate to “App embeds” and click on the "360 search and filters" toggle:

• Save with the respective button at the top right:

And with that your search is officially fully active on your store page.

The last thing you need to take into account in this tab is the “Sync app” button under “Search results sync”.

Your search results should always be up-to-date with whatever’s going on your site. Add a new page? It’s available for searching before you even stop to consider that it needs to be. Update a page? The search result that corresponds with it is already changed to reflect this. Delete a page? That result is long gone.

But pobody’s nerfect, so it might happen that our crawler misses something. In that case, you can start a manual sync to correct this rare but unfortunate mistake.

The last item on our agenda is the “Help & FAQ” tab. This one is explained by its very name - here you can find short answers to commonly asked questions about our app:

Need further help with your setup? Have any questions that we haven’t answered in this guide or our FAQ? Drop an email to our support team!