Product Filter & Search

Installation

Installing the App

Our app can only be installed via the BigCommerce marketplace. This link will allow you to login to your store and install the app.

Template Select

Our filter automatically selects your template using template name, if you’ve customized your templates names you might have to select the template from our list.

By clicking Installation (under the Configuration heading) you will be given the option to select your store theme (template) Once you have selected and saved this the filter will now show.

Theme Type Description
Stencil Theme (Newest themes) Most themes use Stencil as the framework, if you do not know which one you're using then its most likely stencil. If you’re using a stencil theme, our script will automatically be injected into your store. Our filter will try and recognize the theme you, if it doesn’t, you can select the theme from the installation page.
Blueprint Theme (Older themes) Follow the instructions on the installation page once you have selected your Blueprint theme.

If you have any issues doing this or you cannot find your store template you can submit a template request which will be sent to one of our team to add for you.

Multi-Storefront

Our app is compatible with BigCommerce multistore. Once you install the app, our Script will be injected into the channel you installed on. To add the Script to your other channels, navigate to Manage Scripts. Find your channel and click Add Script. The Script will then be injected into your store.

To customize the filters and settings, you can choose the channel you want to edit from a dropdown at the top of each page.

Each channel will require a subscription. Each channel gets a ten-day free trial.

Configuring your filter

Adding Filters

On the Filters page, on the left-hand side, are the filters you can add: our Standard Filters, your Custom Field filters, Product Option/variant filters, Filter Builder filters and MetaField filters. All you need to do is click Add next to each filter you want to use, and it will show on the right-hand side of the screen under current filters.

Customizing Filters

Below are a list of options as to what you can do with each facet. The options depend on what type of filter you're using.

Properties Description
ID The ID shows before the filter title when the filter is collapsed. This can be used to refer to support.
Source This is the name of the data that we get from BigCommerce, see Type.
Type This is where the data is coming from. For example, Custom Fields or Product Options.
Internal Reference This allows your to add an internal reference for each filter.
Title The title of the filter which will be displayed on your store. For example, Color.
Appearance Choose either collapsed or expanded on page load.
Mobile Appearance Choose either collapsed or expanded on mobile devices.
Show Hidden Categories This allows you to show or hide categories that are hidden in BigCommerce.
Display As Choose how you want the filter to show (slider, list, blocks, min-max etc.)
Parent Clickable If the filter is a category tree you can store the parent from being clicked. It will expand the sub categories.
Multiple clicks Choose how you want the filter to act on multiple clicks on an individual filter.
Hide on categories Select which categories you want to hide the individual filter on.
Hide on brands Select which brands you want to hide the individual filter on.
Delete Filter This will delete the filter. The filter will be avaiable for adding in its relevent "Add New Filters" block.
Search Visibility This will hide the filter from the search pages and quick search.

Filter Settings

Below you will find a list of the settings

Feature Description
App Master Switch This is the master switch for your app. The filter/search will not display in your store if you turn this off.
Filter Location This allows you to show the filter as either vertical in a sidebar or horizontal across the top of your products.
Filter Header Tag This allows you to change the header tag between h1-h6.
Filter Position This allows you to display the filter above or below the current items in your sidebar.
Filter Checkbox Size If you have a narrow sidebar, please select small to give more space to the filter labels. If you have styling issues, please create a ticket, and we will fix it.
Product Order This controls the order of your products once the filter has been clicked.
Merge product options This will merge all of your product options with the same display name. Ideal for multiple product options with the same name.
Merge for Swatch If you want to use a swatch color filter and still merge your product options, please enable it.
Ratings Select the type of rating used in your store. (Public API Key,Private API Key)
Disable the filter on specific categories This allows you to turn off the filter on particular categories. Check the boxes which you do NOT want the filter to show.
Hide Bigcommerce Filter Hide the default BigCommerce filter on your category pages.
Hide Category Header If this option is enabled, it will hide the category description and sub-category grid once the filter is clicked, so it's clear to view the filtered results.
Filter Refine box This will add a refined bar to each of the filters, which is ideal for filters with many options.
Hide 0 Counts If this option is enabled, it will hide the 0 counts for customers when filtering.
Click and Scroll If this option is switched on, when the filter is clicked, the window will scroll to the top of your product list so the customer can see the start of the results.
Include out-of-stock products This will include out-of-stock products in your filter.
Price Range Please enable this option if you're displaying a price range on your product listings.
Display Price Hidden Label If you're displaying a hidden price label, please enable this option.
Hide filter counters Turn this option on to hide the counters next to each filter value. Enabling this option will also increase performance for stores with 50k+ products. It will not have any speed effect on smaller stores.
Pagination Type Choose which type of pagination you want to use.
Lazy Load Loads products as the customer scrolls.
Pagination Shows a set number of products with pagination below the products.
Products per page Set how many products you want to load using our lazy loader or pagination.
Active Color Choose the Color you want the active elements to be. This setting will change the checkbox color, product count (next to each filter), slider color, and search autofill buttons.
Second Image on hover Enable this feature to display the second product image on hover.
URL Structure Choose which type of URL you would like the filter to output once the filter has been clicked. Examples:
Old URL: /?filter[Color_3][]=100
New URL: /?Color_3=100
Readable URL (Recommended): /?Color=Grey
Filter styling The two choices are the old style, which has no borders, and the new style, which looks modern, with a border around the filters. We will also modify the filter to match the style you need.
Facet scroll The settings can control how you want to show the overflow of filter values. For example, if a color filter has over 15 colors, it can only display a small number of those values on the screen. The two options are scroll (default), which allows the user to scroll on the facet to reveal the overflow and Show/Hide more links which will display a Show More link; when clicked, it expands.
Out-of-stock product button text This will replace the text of "Add to cart" button for out-of-stock products.
Exclude subcategories This will disable the filter pulling in the product's from subcategories.
Log in to the view price Only show the prices to customers who are logged in.
Log in to view price text Add the HTML for customers not logged in.

Creating Filters

After making changes inside of BigCommerce

If you make any changes to your Custom Fields, Product options, Metafields, Category Structure, or Variants, you will need to sync your filter from the Product Sync page.

Category-based Filters

Category-based filters allow you to create filters based on your category structure which will show the filters as a tree (if any subcategories are selected).

Steps to Create a Category-based Filter:

  1. Navigate to your filters page to create a category-based filter.
  2. Expand Create a Category-Based Filter.
  3. Give your filter a title, for example, Clothing.
  4. Select the categories you want to add to the filter.
  5. Click Save.

This will then add the Clothing filter to the bottom of the Active Filters list.

Custom Fields

Custom fields offer you a versatile way to append additional information to your product pages, such as specific attributes like a book's ISBN or a DVD's release date. Depending on the theme you're using for your store, the positioning of these custom fields may vary on your product page.

Whenever custom fields are defined for a particular product, they will automatically be displayed in the product details section. However, if you wish to not display any custom fields, you can simply remove them from the respective product.

Creating and editing custom fields can also be carried out using a CSV import method or the API for more flexibility and convenience.

To add a custom field:

  1. Navigate to Products View, and click on the name of the product you want to edit.
  2. Head over to the Custom Fields tab.
  3. Input the necessary details for your custom field:
    • Custom field name (e.g., Material) – maximum 250 characters
    • Custom field value (e.g., Cotton) – maximum 250 characters
  4. Save the changes when you're done.

You can add or remove a custom field using the '+' (plus) or '–' (minus) signs respectively, located to the right of the row.

To import custom fields:

If you wish to implement custom fields across a large number of products simultaneously, you can achieve this by using our Import/Export feature.

You should input your custom field data under the Product’s Custom Fields column. If you're dealing with multiple custom fields, separate each one with a semicolon.

The format is: [Name of custom field]=[Name of value];[Name of custom field #2]=[Name of value #2]
For instance: Color=Blue;Material=Cotton

Reference:  https://support.bigcommerce.com/articles/Public/Custom-Fields

Pre-configured Filters

These filters work out the box from your BigCommerce data, these include:

Filter Description
Availability Filter This filter allows users to narrow down their search results based on the availability of products. It helps customers find items that are currently in stock and ready to be purchased.
Brand Filter The brand filter enables customers to filter products based on specific brands or manufacturers. It allows users to refine their search and focus on products offered by their preferred brands.
Category Filter The category filter allows users to browse products within specific categories. It helps streamline the shopping experience by organizing products into relevant groups, making it easier for customers to find what they're looking for.
Category Tree Filter The category tree filter provides a hierarchical structure of categories and subcategories, allowing users to navigate through different levels and drill down into more specific product categories. It helps users explore a wider range of options within a particular domain.
Condition Filter The condition filter lets customers filter products based on their condition, such as new, used, or refurbished. It helps users find items that meet their desired condition preferences and budget.
Depth Filter The depth filter allows customers to search for products based on their dimensions from front to back. It is particularly useful when customers have specific size requirements or limitations for certain items.
Featured Products Filter The featured products filter highlights specific items that are currently being promoted or recommended by your website. It provides users with a curated selection of products that are deemed noteworthy or popular.
Height Filter The height filter enables customers to narrow down their search based on the vertical dimensions of products. It is especially useful when customers have specific height restrictions or preferences.
On Sale Filter The on sale filter helps customers identify products that are currently being offered at discounted prices or special promotions. It allows users to find deals and save money on their purchases.
Price Filter The price filter allows users to set price ranges or specific budget limits for their product search. It helps customers find products within their desired price range and avoid items outside their budget.
Rating Filter The rating filter enables customers to filter products based on user ratings and reviews. It helps users identify highly rated items or products that have received positive feedback from previous customers.
Sale Percentage Filter The sale percentage filter allows customers to search for products based on the discount percentage offered. It helps users find items with higher discounts, allowing them to make more cost-effective purchasing decisions.
Search Filter The search filter is a general filter that allows users to search for specific keywords or terms within the category. It helps users narrow down their search results to find products that match their specific search queries.
Shipping Filter The shipping filter allows users to filter products based on shipping options, such as free shipping, expedited shipping, or local pickup. It helps customers choose products that align with their preferred shipping methods and delivery timelines.
Stock Filter The stock filter allows users to filter products based on their availability in stock. It helps customers find products that are currently in stock and avoid items that are out of stock or on backorder.
Sub Category Filter The sub category filter allows users to filter products within specific subcategories of a broader category. It helps users narrow down their search even further by focusing on more specific product types or features.
Top Level Sub Category Filter The top-level sub category filter allows users to filter products within the highest-level subcategories of a broader category. It helps users explore a broader range of products within a specific domain while still maintaining some level of categorization.
Weight Filter The weight filter enables customers to search for products based on their weight. It is particularly useful when customers have specific weight requirements or limitations for certain items.
Width Filter The width filter allows customers to search for products based on their width.

Product Options/Variants

Follow the steps below to add or edit variant options when working with a product in the control panel:

  1. In the "Variations" section, select "+ Add Variant Option" to create a new variant or "Configure Options" to modify an existing one.
  2. Provide a name for your option, choose its display format, and determine the available values.
    • Use "+ Add Another Value" for extra values, or "+ Add Variant Option" to include a new set of options.
    • To delete an existing value, press the remove button represented by the symbol ⊝.
    • The default value will be automatically selected for customers when they visit the product detail page.
    • Adjust the display order of options and values on the storefront by dragging the handle ⋮⋮, located on the left of the options.
  3. Once you have made all necessary changes, press "Save Variants".

After you've set up the variant options, a table titled "Variants" will display all variations of your product. This section functions similarly to a spreadsheet — you can add, modify, and replicate data (such as price, image, and SKU) for each variant. The "Edit columns" dropdown menu allows you to manage visibility of additional fields like "Sale Price" or "Weight".

For efficiency, you can copy a cell's content to the variant rows beneath it. Simply select the cell, then click and drag its bottom-right corner to replicate it into one or more rows directly below. This process is applicable for variant images too.

Reference:  https://support.bigcommerce.com/s/article/Product-Options-v3?language=en_US#variations

Filter Builder

1. Click the Add filter text box and type the title of the filter you wish to create.

Screenshot of: Click the Add filter text box and type the title of the filter you wish to create.

2. Click "ADD FILTER"

Screenshot of: Click "ADD FILTER"

3. The page will refresh, and in the bottom table, you will notice a new column with your filter title. Click in the cell and add the colors you want to assign to the product.

Screenshot of: The page will refresh, and in the bottom table, you will notice a new column with your filter title. Click in the cell and add the colors you want to assign to the product.

4. To use multiple values in the cell, separate with ||.

5. Once you've added data, navigate to your filters page and expand the filter builder section and you will see your new filter in there.

Metafields

Using BigCommerce metafields as a facet search provides advanced customization and flexibility to enhance the filtering capabilities of your ecommerce store. Metafields allow you to add additional custom data to your products, such as product specifications, attributes, or any other relevant information.

By leveraging metafields as facet search options, you can create additional facets/filters based on specific metafield values. For example, if you have metafields that define color, material, or style of your products, you can utilize them as facets to enable customers to filter products based on these attributes.

Tools

Explore our diverse range of tools designed to empower you to craft a tailored filter & search. Our extensive selection allows you to modify every aspect of your data to perfection.

Filter Cache

We have a few layers of cache on our app to increase performance. We store some of the layers in your Filter Cache page. These are generated once users start clicking the filters. You can clear the cache by clicking the Purge All button.

The cache is also purged when changes are made inside the app, or the filter has been synced.

Value Replacer

Many manufacturers label their colors differently; this can cause issues when trying to filter as the colors will not be grouped. Here's where our value replacer comes in. You can replace your Custom field or Product Option values directly in our app to merge the colors to create a seamless experience for the customer. Our value replacer only affects the filter data, not the data on your store.

Value Replacer

Our value replacer is ideal for products that have different color values. For example you can replace all of the following values to blue:

  • Light Blue
  • Dark Blue
  • Navy
  • Sky Blue
  • Turquoise

1. Click the search text field

Screenshot of: Click the search text field

2. Type in the value you want to replace.

3. Click "Search"

Screenshot of: Click "Search"

4. Click this text field

Screenshot of: Click this text field

5. Type the value you want to replace it with.

6. Click the plus button

Screenshot of: Click the  button

Filter Display Order

The filter display order allows you to change the order of the filters on different categories.

1. Click "Manage Filters" next to the category you would like to change.

Screenshot of: Click "Manage Filters" next to the category you would like to change.

2. Click and drag the filters into your required position.

Screenshot of: Click and drag the filters into your required position.

3. Click "SAVE SORT ORDER"

Screenshot of: Click "SAVE SORT ORDER"

Language

Our language page allows you to convert the text from English to any language you choose. Click on the text you want to change, remove the old text, and add your new language. When you’re finished changing the text, click save.

Convert Options

The process of converting options into custom fields enables you to integrate product options with the pre-existing custom fields.

1. Click "Select an option".

Screenshot of: Click "Select an option".

2. Select the option you want to convert.

Screenshot of: Select the option you want to convert.

3. Click on Select a custom field.

Screenshot of: Click on Select a custom field.

4. Select the custom field you would like to merge it with.

Screenshot of: Select the custom field you would like to merge it with.

5. Click "ADD TO CONVERT"

Screenshot of: Click "ADD TO CONVERT"

Custom Field Import

1. Enable custom field import but switching it to On.

Screenshot of: Enable custom field import but switching it to On.

2. Scroll down to Upload CSV filter and click browse. Select the BigCommerce export from which you want to upload the custom fields and click import.

Screenshot of: Scroll down to Upload CSV filter and click browse. Select the BigCommerce export from which you want to upload the custom fields and click import.

Your custom fields from your BigCommerce export will now be imported.

Product Sync

Our Product Sync pulls all of your data from BigCommerce into our app. Depending on the data size, it could take 1 minute to 1 hour to sync your data.

The Product sync runs on installation and then every 24 hours automatically after that. If you have updated your data inside BigCommerce, you must run the sync from the Product Sync page by clicking Sync All. If you've only updated custom fields then click Sync Custom Fields, as this will be quicker than running a full sync.

Search

Exclude Category Products

This feature allows you to omit certain categories from the search results, not the products themselves.

Simply click on the categories that you wish to exclude from the search.

Screenshot of: This feature empowers you to omit certain categories from the search results, not the products themselves. Simply click on the categories that you wish to exclude from the search.

2. Click "SAVE"

Screenshot of: Click "SAVE"

Exclude Products

Excluding products allows you to select products you do not want to include in the search results.

1. Select the products you would like to exclude from the search.

Screenshot of: Select the products you would like to exclude from the search.

Screenshot of:

Screenshot of:

4. Click "SAVE"

Screenshot of: Click "SAVE"

Manage Categories

Manage categories allows you to hide the category (not products) from the search results or add search keywords to the category.

1. If you want to exclude categories from the search, select the checkbox in the hide column.

Screenshot of: If you want to exclude categories from the search, select the checkbox in the hide column.

Screenshot of:

3. To add search keywords to the category, click in the search keywords column and fill it with keywords.

Screenshot of: To add search keywords to the category, click in the search keywords column and fill it with keywords.

Screenshot of:

Screenshot of:

Ignore Words

Add words to your search that you would like the search to ignore. These words could give conflicted results.

To add ignored words, navigate to the Ignore Words page.

1. To add your words, click the Ignore word text field.

Screenshot of: To add your words, click the Ignore word text field.

2. Type your word in this box. For this example, we're using "Eggs".

3. Click "ADD"

Screenshot of: Click "ADD"

Redirects

Redirects allow you to redirect the user if a specific search term is added. For example, if a user type apple you can redirect them to the apple brands page.

1. Click the terms box and add in the search terms that you wish to redirect.

Screenshot of: Click the terms box and add in the search terms that you wish to redirect.

2. Then in the redirect box, type in the URL that you want to redirect to. So in the example below, if somebody types iPhone into the search box it will redirect them. Use this to redirect customers to category or product pages.

Screenshot of: Then in the redirect box, type in the URL that you want to redirect to. So in the example below, if somebody types iPhone into the search box it will redirect them. Use this to redirect customers to category or product pages.

3. Click "SAVE"

Screenshot of: Click "SAVE"

Search Queries

On our search query page, we display every search query your customers have searched on your store. You can also select the dates to narrow down the results.

Synonyms

1. For this example, we will create synonyms for when a customer searches the query “iPhone”; it will show the query “Apple” results. Click the Search Term text field

Screenshot of: For this example, we will create synonyms for when a customer searches the query “iPhone”; it will show the query “Apple” results. Click the Search Term text field

2. Type "iPhone"

3. Click the Add a list of synonyms here (saperated by comma). text field

Screenshot of: Click the Add a list of synonyms here (saperated by comma). text field

4. Type "Apple"

5. Click "SAVE"

Screenshot of: Click "SAVE"

Search Keywords

1. Select the product you would like to add search keywords to.

Screenshot of: Select the product you would like to add search keywords to.

2. Click "Nike Run Swift 2"

Screenshot of: Click "Nike Run Swift 2"

3. Click the Search keywords (Comma Separated without space) text field

Screenshot of: Click the Search keywords (Comma Separated without space) text field

4. For this example, we will be using the keywords "Running, Trainers, Fast".

5. Click "SAVE"

Screenshot of: Click "SAVE"

Pricing

Our packages are based on the number of products your store has, and the system assigns you your package, which you can subscribe to above. Please see our Package prices below or get in touch to discuss bespoke packages to meet your store's needs. Our pricing can also be found here.

Package Product Range Price per Month
Package 1 0 - 599 £14.99
Package 2 600 - 999 £29.99
Package 3 1,000 - 1,999 £44.99
Package 4 2,000 - 4,999 £59.99
Package 5 5,000 - 19,999 £74.99
Bronze 20,000 - 49,999 £89.99
Silver 50,000 - 89,999 £104.99
Gold 90,000 - 149,999 £119.99
Platinum 150,000 - 229,999 £134.99
Diamond 230,000+ £149.99

Subscription

Your package is automatically assigned to your store depending on the number of products your store has. Once you subscribe, payment will be made. From here, the subscription payment will be taken every month on the same date.

Your subscription will change to the relevant package if your products increase or decrease. You only pay for the time you're on each package and will be automatically billed at the end of the month.

If your payment has failed, your app will no longer display. You will receive an email to pay your failed invoice.

Cancel Subscription

To cancel your subscription, you only need to uninstall the app. This will then trigger an email to be sent to you that you need to confirm the cancellation. If you do not receive the email, please contact support, and we will help you.

If there are any issues that you're experiencing that are making you cancel your subscription, please get in touch, and we can try and work out a solution for you.