Welcome to Search & Filter app

Search and Filter is a great tool for your Shopify store. It brings a good and fast search experience for customers. With this app, you can completely create smart product filters and display suggestions you want for your customers’ searches. Making it easier for them to find what they need!

Within this document, we will describe the installation, creation and setting up the Search and Filter app process.

We did our greatest to create this manual info to be presented in a very straightforward, simple manner. But if you have any questions that are beyond the scope of this documentation, please feel free to contact us via our email address: contact@etssoft.net

Install Search & Filter App

Step 1: Navigate to Search and Filter app in the Shopify App Store by clicking on this link: https://apps.shopify.com/advanced-search-filter

Step 2: Click on “Add app” button >> Log in to your Shopify store and authorize the app in your Shopify admin.

Step 3: And you’re ready! Your newly installed app will appear in the Apps section of your Shopify Admin.

Dashboard

Search and Filters help you create product filters and help customers search faster and easier. The Dashboard page gives you an overview of the filter and search status of your website. At the same time, it analyzes and gives you information about top filter options and top search queries. From there, you can better understand the needs of your customers and make appropriate adjustments for your website.

In addition, you can also track your sync time and sync your store data at any time from the Dashboard page. Just click on the “Sync now” button, and all the store data will be synced with the app.


IMPORTANT NOTE:

You need to enable the embedded code to display the Search and Filters app on the storefront.

An embed code is a small piece of computer code usually in HTML language for users to copy and paste into a website. Typically, it provides the source link and height and width of the item.

Here are the instructions to enable the embedded code:

  • Go to “Online Store” in your Shopify Admin Panel > On your “Current theme” select “Customize”.

In the bottom left corner of the screen select “Theme settings”

Click on “App embeds”, enable “Filter search app” and “Save”.

Filter management

Search and Filter allows you to create unlimited product filters to help customers filter products quickly, limit the product range displayed in search results precisely.

(1) Filters

Navigate to the “Filter” page then you can create advanced filters that apply to collections depending on the attribute of the products and your use purpose.

Click on the “Add Filter” button at the top right corner of the page to add a new filter.

  • Enter the filter name
  • Select the collections you want to apply in this filter
  • Show products when out of stock” button: enable this button if you want the application still to filter and display products that are out of stock. On the contrary, the products that are out of stock will not be displayed on the search result when the customer filters if you disable this button.
  • Enable this filter and “Save

Next, you need to add filter options to the product filter you’ve created, so it’s easy for customers to filter products within the range they want to search for.

  • Click on the “Add Option” button to open the “Add option” popup

  • Select “Option type”

Let’s have a look at some examples!

  • You can customize “Option label” if you want.
  • Enter “Option description” if needed.
  • Enter or select other criteria according to the option type you selected. Each option type will have fields with different criteria for more precise product filtering.
  • Enable this option and “Save

(2) Appearance

Navigate to the “Appearance” page to set up the product filter display position in the storefront. You’ll see options to set up “Appearance” for the filters on the left and the “Preview” section on the right side of the screen.

2.1 General

The module supports display products filters in 3 positions: Sidebar, Floating button, and Horizontal bar.

Displayed as a side bar:

Displayed as a floating button:

Displayed in horizontal:

2.2 Sort by

You can choose the criteria to sort the products displayed in the Filter. Drag and drop to arrange the order of criteria and prioritize product display as you like.

2.3 Filter style

You are free to style all filter elements such as title font size, value font size, title color, value color, etc.

2.4 Product layout

There are 2 ways to display product layout for you to choose from: use product layout from the app, or use product layout from shop’s theme. (Click here to see the list of themes we supported)

If you choose “use product layout from shop’s theme“, this app will automatically use the layout of the theme the website is using and you don’t need to set up anything.

Conversely, if you choose “use product layout from app” you can customize and set up the elements for displaying the product layout as you like (the number of products per row, product title/price appearance, sale label/stock label position, etc).

(3) Colors Swatch

Navigate to “Color Swatch” page to customize colors and images for the options displayed in the storefront.

Mark option as a color option by enabling “color option” or “color image” of the filter option you want to customize.

Next, define color swatch & image for filter options. Look at the picture below for example:

Save” and go to the storefront to see the changes.

(4) Variant Group

You can use this function to group filter options together to make filtering and searching easier and faster.

Click on the “Add new” button at the top right corner of the page to add a new variant group.

  • On the “Add variant group” popup, select the option you need.

  • Enter the label name.
  • Select filter options you want to group and “Save“.

 

Search tool management

Besides creating advanced filters, the Search and Filter app also brings you a smart and useful search bar. By using advanced and modern technologies, this app will make customers search faster and easier than ever.

(1) Instant Search

Customers do not need to enter all the keywords they want to search for. With Ajax technology integrated with the app, the customer’s search experience will be significantly improved. Matching results and suggestions will be displayed as the customer is typing.

On the “Instant Search” page you can set up the number of search results displayed on the storefront for each search type (search suggestions, search products, search collections, search pages, search posts).

For example, you prioritize the title in the first position, then the description. So, when customers search for the keyword “Laptop”, the products containing the keyword “laptop” in the title will be displayed first on the search results, then the products containing this keyword in the description.

The app provides 4 types of search result layout with an eye-catching design for you to choose from:

You are also allowed to customize the search result box width, align the search result box, and select the search algorithm used in your store.

(2) Page Result

The Search and Filters app provides a separate results page. You can completely configure the display of the results page on the storefront.

  • Enable the search result type you want to show on the result page.
  • Enter display label.
  • Enter the quantity of each type of result that you want to show on the results page.
  • Choose how to display on the results page when there are so many products.
  • Sort the order of priority to display search results by dragging and dropping.
  • Enable filter for result page and “Save

Search result page when there are so many results:

Search result page when there is no result:

(3) Priority Product

Moreover, the app allows you to display priority products on the search result with just a few simple settings!

  • Click “Add new” to open “Add new priority products for search word” popup.

  • Enter in the “Search word” field.
  • Select priority products and “Save”.

When customers search for words like the ones you fill in the “Search word” field, the app will prioritize displaying the products you have selected in the search results.

(4) Search Suggestion

On the Suggestion words section, enter all the words that you want to display on the instant search. Start adding suggested words:

  • Click on the “Add new” button
  • Fill in the keywords
  • Select priority level and “Save

If customers search for words with characters in the suggested word you added, those suggested words will be shown up in the instant search. From there, customers can choose the suggested word without having to keep typing.

The Search and Filter application also has a feature that allows you to Import/Export “Suggested word” data to a .csv file for your convenience when migrating store data or making backups.

Besides, this module also allows you to customize the search results page content to display when there are no results. There is an available tag that you can use for more convenience.

(5) Synonyms

With common keywords that customers often search for, or words with many similar expressions, you can completely set up similar words, synonyms to increase searchability and display results for customers.

Click on the “Add new” button to open “Add new synonyms” popup:

  • Enter keywords in the “Search word” field.
  • Fill in the synonyms with the keyword in the “Synonyms” field.
  • In the “Comparison” field, there are 2 options for you: choose “Include“, this app will search both keywords and synonyms. If you select “Equals“, this app will ignore the keyword and only search by synonyms.
  • Click the “Save” button.

All the synonyms you have added will be displayed in a list on the Synonyms configuration page. You also can import/export “Synonyms” data to a .csv file for your convenience.

(6) Ignore words

Enter keywords that you want this app to ignore when customers search. All the ignore words you have added will be displayed in a list on the Ignore words configuration page. You also can Import/Export “Ignore words” data just like above.

(7) Redirect

You can add keywords and links to the page you want so that when customers enter the correct keyword you set up and press “enter“, they will be redirected to the link you have installed.

Click on the “Add new” button to start adding a new direct.

  • On the “Add new redirect” popup, fill in the keywords on the “Search word” field.
  • Enter the link you want customers to be redirected to when they search for the keyword you set up above.
  • Save

Like “Synonyms” and “Ignore words“, all the data you set up in this section will be listed on the Redirect configuration page and can be imported/exported to the .csv file.

Advanced settings

You can completely set up alternative text for product layouts, fields, and search to display the language you want on your storefront for customers easy to follow.

Others

(1) Live support

If you have any problem using the app, you can navigate to “Live support” to contact the web developer. We are happy to support you solve the problems related to this app whenever you need it.

(2) Document

Click on “Document” to open this app documentation when needed.

 

Uninstall App

To uninstall our app, please go to your Shopify Store admin – “Apps” section – find “Search and Filter” and click the “Delete” button on the right.

How to delete all the Search and Filter code

Installation of our Search and Filter app automatically injects certain code snippets into your Shopify theme in order to make the installation process fully automatic and make our app work fast and smoothly.

Unfortunately, when you uninstall Search and Filter, we lose programmatic access to your store, thus we cannot remove the code snippets that we injected automatically.

Although these code snippets that we add do not harm your store even after the uninstallation process, you might want to remove them anyway, the following guide will walk you through this process.

Step 1: Go to “Online store” in your Shopify Admin Panel > On your “Current theme” select “Actions” -> “Edit Code”.

Step 2: Enter “ets_fs” on the search box to find all the app’s files.

Step 3: In the “Snippets” folder: delete all files containing the prefix “ets_fs“.

Step 4: In the “Assets” folder: delete all files containing the prefix “ets_fs“.

List of themes that our app can use the theme’s product layout

Our app provides 2 ways to display product layout for you to choose from: use product layout from the app, or use product layout from shop’s theme.

If you want to use a product layout from your shop’s theme, here is the list of free themes that we supported:

  • Debut
  • Dawn
  • Narrative
  • Simple
  • Minimal
  • Brooklyn
  • Supply
  • Boundless
  • Express
  • Crave
  • Craft
  • Sense
  • Taste

Paid themes we supported:

  • Warehose
  • Mobilia
  • Impulse
  • Capital
  • Santiago
  • Avenue
  • Vinova
  • Streamline
  • Fashe
  • August
  • Foxic

If your current theme is not in the list above, you can use the product layout from our app. Rest assured that the layout of the app has been beautifully designed and displays well on different devices. Or, you can contact us for support if you still want to use your store theme’s layout!