Shopify Integration

A good search helps customers find what they're looking for quickly, with minimum effort on your part. The Site Search 360 Shopify app adds this search to your store in four steps:

1. Add the app to your store
2. Configure how the search functions
3. Customize how the search looks
4. Test the search and enable it on your live site

Add Site Search 360 to Your Shopify Store

Installation starts with the "360 product search and filters" app in the Shopify App Store.

Search for "360" to find the app listing. Click "Add app", log in to your Shopify account, and click "Install app" to add it to your site.

You can install the app directly, or open the "View demo store" link on the landing page first to see the features available.

Once installed, find the app under "Apps" in the left-side panel menu of your store's admin page:

Click the app title to open your Site Search 360 Control Panel:

The Control Panel has four tabs: Search Settings, Design, Test & Go Live, and Help & FAQ. The following sections cover each one.

---

Configure How Your Search Functions

The "Search Settings" tab covers the features your search is equipped with.

The page that opens by default is the "Dashboard", showing how your search is performing.

Initially, this shows only basic data: the number of entries indexed from your site (products and non-commercial pages). As search usage grows, more data becomes available, including query volume, most frequent queries, and queries that returned no results.

Filter this data by timeframe using the two buttons in the top right corner:

"Quick Filter" shows analytics for the current day, the previous day, or the last 7, 30, or 90 days. "Date Range" lets you select any custom period.

Export your Analytics data, filtered or not, with a single button:

Learn more about Analytics data in our article on the topic.

"Dashboard" is also the first section where you'll see a chat icon in the bottom right corner:

You can email support at any time, or use this button to contact them without leaving the project page.

Below "Dashboard" is the "Data Sources" section:

This lists every source the crawler indexes to compile your search results.

Click "Shopify Data" to open the "Index" section, split into two categories - "Product List" and "Content List". Both are pulled from your site automatically when you create your project.

"Product List" shows every product page on your site, along with its unique identifier and name (you can search this list by either):

The "Show Details" button shows what content is searchable on each product page:

This includes a list of "Extracted Facts" for the product:

This data is pulled from each page automatically, so you don't need to configure product attributes yourself, though you can if you want to.

Click a Product Fact's value to edit it or add a new one.

You can also delete any Fact:

Create a new one using data available on the product's page by selecting a Fact and the attributes you need:

If your product pages have a lot of data, you can also filter the available Facts:

At the bottom of the "Product Details" page, three buttons let you apply your changes, discard them, or delete the product from your search results:

"Content List" shows all non-commercial pages from your Shopify store, plus any other Data Sources you configure:

This data can also be filtered:

sorted by when the page was added or updated:

and exported for later analysis:

Each page's description includes a status (available for searching or not), its content type and Data Source, and two buttons on the right:

• The "Show Details" button, same as in "Product List", opens a window detailing all content that can be extracted and searched on that page:
• The "Remove" button deletes the page from your search results until the next sync. To remove a page permanently, do so through your admin panel:

Search results aren't limited to store pages. Two more Data Sources are available: "FAQ" and "YouTube".

In the "FAQ" tab, add a preconfigured FAQ page with a few XPaths, or create a new one using the Site Search 360 FAQ Generator.

This process is covered in detail in our article on FAQ Indexing.

The "FAQ" tab is where you'll first see the "Show Help" icon:

Click this icon to open an instruction page from the documentation directly in your Control Panel:

or search all How-To's using the field at the top of the screen:

You can also add your YouTube channel to the search, including playlists and individual videos:

For most Site Search 360 projects, YouTube Indexing is a paid add-on. Shopify users have it enabled by default for as long as the "Free Start" welcome plan is active.

Next is the "Result Groups" section:

Result Groups let you categorize search results, grouping similar content in one place. Some, like "Products" or "Suggestions", are created automatically when you launch your project. You can add others manually as needed.

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

Creating Result Groups is covered in our article on the topic.

"Filters and Sorting" is another way to help users find what they need with less effort.

"Filters" relies on data extracted from your site's pages - specifically, Product Facts.

Add new filters based on any available Product Fact, and search, delete, or sort existing ones the same way as Extracted Facts in "Product List".

Here's what configuration for a "Color" filter might look like:

Filters are highly customizable. You can configure:

• The filter name and which Product Fact values it uses
• Whether all values must be found on a page for it to be shown in results
• The order filter values appear in when a search is performed
• The minimum percentage of products that must have a value for the filter to display

For a "Color" filter, like the example above, select "Treat as Color Filter" at the bottom of the page to use the Color Picker (or add HEX codes to filter values) and show colors next to each value in a circle.

Each filter has three buttons on the right: pin it to a specific spot in the filter hierarchy (or unpin it), edit it, or delete it:

To avoid manually ordering filters, configure automatic sorting under "Product Filters Settings" further down the page - alphanumerically or by popularity (most to least used).

This is also where you decide whether filter values show a count of matching pages. The options are:

• Never compute counts
• Compute only when under 1000 matching pages
• Compute for all filters except range filters
• Always compute 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 controls the order search results are presented in. Sorting is based on numeric Product Facts (like "Price"), from lowest to highest (Ascending) or highest to lowest (Descending).

Learn more about this feature in our Sorting Options article.

The "Result Manager" section handles search result layout customization.

The first tab you'll notice is "Result Mappings":

Use this to control search results behavior for 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:

Hide, edit, or delete any mapping using the buttons to the right of its name:

You're not limited to your store's pages: add pages from other domains to your result set, or create entirely new ones with the "Custom Results" feature:

Configure either a promotional banner displayed above search results, or a regular page indistinguishable from them. This example uses the latter:

See our article on the Result Manager for details on creating mappings and custom results.

Between these two tabs is "Boosting":

Boosting strategies automatically place certain pages higher than others in search results.

Boosting works differently for product and non-product pages, with different setup processes for each.

For products, boosting is configured as a ranking strategy based on available Product Facts. Click "Add New Ranking Strategy" and choose the fact values that, when found on a product page, tell the crawler to prioritize that page in the results.

Add multiple criteria to a single ranking strategy. Weigh them equally, or use the toggle at the top to prioritize one over another.

In the example below, boosting is applied based on both material and color, so "black leather" products rank above "leather" products, which rank above "black" products.

Any ranking strategy can be shown, hidden, edited, or removed using the buttons on the right:

With multiple ranking strategies, use the Plain Pattern to enable and disable specific strategies, or the Chessboard Pattern to alternate between strategies across searches.

Ranking strategies are explored in detail in our dedicated article.

Non-product pages have no Extracted Facts, so they can only be boosted by URL Pattern. In this example, collections and blog posts are both boosted above other non-product pages, with collections prioritized higher than blog posts:

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

The "Dictionary" section offers more ways to customize which results appear for a given query:

Create synonymous queries, where results for one query also appear for another (and vice versa), or a one-directional "type of" connection, where searching for a "super type" also shows results for its "sub types" (but not the reverse).

More on this section in our "Dictionary" article.

The "Search Settings" section of the Control Panel covers your search's general behavior.

As with ranking strategies, "General" Search Settings are separate for product and non-product pages.

For "Product Search", you can configure the following settings:

Most settings are self-explanatory, except for two:

• "Product Variants" are versions of the same product in different colors, sizes, and similar options. Group variants into one search result with alternative images, or give each variant its own dedicated result. See our article on Product Variants for details.
• "Minimum Ontology Score" controls how closely a query needs to match the internal product categorization for a page to appear in results (for example, "iPhone case" results for an "iPhone accessories" query, but not for "iPhone"). The default is 2; higher values require a more precise match. See our dedicated article for details.

"Content Search" settings are similar to "Product Search", with a few exceptions:

• "Search Fuzziness" works like "Minimum Ontology Score" but as a spectrum rather than a number, ranging from "extremely strict" (requires a perfect match between the query and page content) to "get more results" (matches on just a few entered characters).
• "Search Field Boosts" work like "Page Boosting", but apply individually based on whether the query match is found in a page's title or content, rather than in bulk by URL Pattern.
• "Search Snippet" is the description shown under each non-product search result. Use the text block where the query match is found, the first few paragraphs of the page's content, custom XPaths and Linked Data, or no snippet at all.

Both settings types have a "Clear Cache" button at the bottom, for when you need a clean slate:

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

The "IP Settings" tab controls who (and what) can access your search:

Block specific IPs from using the search, or exclude them from your search statistics (useful for keeping your own queries out of Analytics). This tab also lets you set query limits per IP, which prevents overage charges and protects against bot attacks.

These limits and permissions are also detailed in our article on "IP Settings and Query Limits".

That covers the Control Panel's first tab. Next is the Design tab.

---

Customize How Your Search Looks

The Search Designer lets you match your search to your store's theme.

This section has five tabs, each covering a specific part of your search.

Start with "Main search settings".

This tab starts with styling options for your search box: colors, loading animation, and language:

Next is a toggle for search suggestions and a field for the placeholder text displayed inside the search box:

The next section configures how (and where) search results are presented:

The "overlay" option places search results in a pop-up window; "embed" shows them wherever the search is initiated. If you use embed, provide a selector present on every page so the search works site-wide.

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

You can also connect your search to Google Analytics or Google Tag Manager for extensive search statistics, or enable/disable the search's cookies (cookies improve Analytics accuracy, so disabling them isn't recommended in most cases):

The "Autocomplete suggestions and as-you-type results" tab controls the look and feel of suggestions displayed before the search is initiated.

"Empty State" and "Query-based" configure suggestions shown before any characters are entered and as users type:

"Empty State" (or "Pre-filled Suggestions") controls the pages and queries suggested when a customer first clicks the search box. This can include separate blocks for manually configured queries, recent search history, and a link to a predetermined page:

The "Query-based" configuration controls autocomplete queries shown once the search box has text, based on the most popular pages from preconfigured Result Groups. Example using two Result Groups:

General suggestion settings here include the number of characters needed to trigger suggestions and the clickable text that takes users to the full results list:

The next tab, "Search result behavior", covers additional settings for results presentation, Filters, Result Groups, and Highlighting.

Under "Navigation" you can configure:

• Whether results are separated into Result Groups
• A tab showing all matching results regardless of group, and another for pages that don't fit any group (named "Other" by default, though you can rename it)
• The number of results per page, or infinite scrolling with no pagination
• Whether results open on a new page
• Whether a query with a single matching result redirects users to that result automatically

The "Filters" section has three toggles: enable/disable filters, show a count of matching products next to each value, and add a "Clear" button to reset a filter to its default state. You can also choose where filters appear on the search page.

"Highlighting" configures how exact and partial query matches are styled in a page's title and/or snippet, making matched words stand out:

At the bottom of this tab, toggles let you hide specific Result Groups from the search:

The "Search result layout" tab covers more search result appearance settings.

Choose whether each result shows one primary image or several, and which images to show for pages without a default image (or hide images altogether):

Up next - customization options for the search on desktop:

and mobile:

Display results one at a time or several per row, and choose whether each result shows an image, URL, and/or description under the title. Desktop and mobile settings don't have to match.

You can also add a button to each result that adds the product to the cart, or, if the toggle is off, takes the user to the product page:

Finally, we have the "Advanced Settings" tab.

Under "Additional CSS", enter custom code in the pop-up window on the right to go beyond the default Search Designer styling options:

"Callbacks" and "Templating" let you create a custom HTML structure for suggestions and search results.

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

The "Configuration" section at the bottom lets you further personalize search behavior by modifying or adding elements of your config object.

A preview window on the right side of the screen shows your search with all changes reflected immediately, so you can see the result before publishing.

When you're done, publish your changes or revert to the live version using 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.

With the search configured and styled, the next step is to preview it and add it to your store.

---

Test and Publish Your Search

The "Test & Go Live" tab covers testing and publishing:

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 preview the search before going live (or after any change), click "Preview & Enable/Disable" in the "Preview app" section. This opens a preview screen that replicates your site's layout and design:

Locate the search box and enter a sample query:

Once you're satisfied with the preview, go live with your search.

There are two ways to do this: via the "Test & Go Live" tab or your Shopify "Themes".

With "Test & Go Live":

• Click "Preview & Enable/Disable" under "Live Theme" to open the "Preview" section:
• Open the "App embeds" tab in the left-side panel menu and turn on the toggle next to "360 search and filters":
• Save your changes using the button in the upper right corner:

With "Themes":

• Open the "Themes" tab located in the left side panel menu of your admin page:
• Click "Customize" next to your current theme to open "Preview":
• Open "App embeds" and turn on the "360 search and filters" toggle:
• Save using the button in the top right:

Your search is now active on your store.

The last item in this tab is the "Sync app" button under "Search results sync".

Search results stay up to date with your site automatically: new pages become searchable, updated pages are reflected in their search results, and deleted pages are removed.

If the crawler ever misses a change, start a manual sync to correct it.

The "Help & FAQ" tab has short answers to commonly asked questions about the app:

For further help, or questions not answered in this guide or the FAQ, email the support team.