Installation

Please follow the below steps to quickly configure Wizzy Search & Filters app on your Shopify store.

1. Install the app.

Please install the app from Shopify Appstore.

2. Configure the credentials.

You can setup our app by following either 2.1 or 2.2.

2.1. Initialize Setup

As soon as you install and grant permissions to the app, you will be redirected to the Initialization page of the app. Click on Initialize Setup button to start the setup process. 

2.2. Manual Setup

If you already have a Wizzy account and store credentials please click on Click here in the second line. Copy and Paste the keys from the Wizzy admin on this page and submit the form. You will see a success message if the credentials are correct.

3. Configure Attributes

In Wizzy, we call every custom data an attribute. In the Shopify ecosystem, we can save custom or product-related data in three particular places i.e. Option, Metafields, and Tags.

3.1. Configure Named Tags

This is very useful when you’re saving specific details for products under tags with a specific pattern. (e.g. Material_Cotton, Material_Leather). If yes, then configure as many tags as you want under this section where each field represents as follows.

Name: To identify specific attributes across configuration.

Identifier: In the above case Material.

Separator: In the above case _

Type: Select the appropriate one from the list.

Is Searchable: If you want to make the values of this tag searchable.

Is Filterable: If you want to make values of this tag filterable.

3.2. Configure Tags

In this section, you can create attributes by grouping tags from the product. You can configure as many tag attributes as you want under this section where each field represents as follows.

Name: To identify specific attributes across configuration.

Values: Click on Select Values to select the list of tags you want to group.

Is Searchable: If you want to make the values of this tag searchable.

Is Filterable: If you want to make the values of this tag filterable.

3.3. Configure Metafields

Metafields are similar to tags. If you want to save extra details of the products, you can configure the details in this section with as many metafields as you want. To do so you have to add a Namespace and a Key which can be fetched from Metafield’s Definition. Here Namespace and Key are used to identify the definition.

E.g. – my_cloth.fabric, my_cloth.style, etc. are metafields, where my_cloth is the Namespace which defines the detailing of the product and fabric/style here is the Key which further defines the specificity of the cloth/style.  

3.4. Configure Options

If you’re using different variations of your products in Shopify, (i.e. color variants, different sizes, etc) you can configure options in this section to save that data. Here you need to input the Name of the option by which it is being identified and the Option Name can be set according to you, as it is going to appear on the frontend which fulfills the Customer’s need. 

Each option value can be filterable and searchable just like metafields and tags.

4. Configure Catalog Index

Under this page, you will be able to map the store’s data to specific entities. (e.g. Gender, Color, Size, Brands, etc…) Each section can be configured or mapped from the following data endpoints,

• Collections
• Product Type (Only for Genders)
• Product Vendor Field (Only for Brands)
• Attributes

For both colors and sizes, only attributes can be selected. If your product’s colors and sizes are saved in Option values, then you will have to create an attribute for the same from the Attributes page and then select those attributes from the list.

If you want to make your collections appear in autocomplete or filters and make them searchable, you can configure the same from the “Collections to display” section. Here you can either select them from the dropdown or add them manually. In the “Misc Configuration” section, if you don’t have a product category for each and every product, you can select yes in the first sub-section of Misc Configuration to consider Product Type as a Category.

All these sections are optional and can be ignored/skipped completely. Also, make sure to click on the Save button for individual sections.

5. Configure Search Results Page

On this page, multiple search page-related settings are divided into various sections. Each section has its own help text written. An explanation of some of the important fields is as follows.

5.1. General

In this section, you can input the number of products you want to be displayed on the search results page if the pagination type is not infinite. You can also display out-of-stock products and an “Add to Cart” button for individual products. 

5.2. Facets

Under facets, you can select as many filter options as you want to display on the search results page.

5.3. Sorts

Similarly, add as many sort options as you want to display on the search results page.

5.4. Pagination

Here you can opt for infinite pagination or number pagination according to your requirement. If the pagination is infinite, you can have a “Move to Top Widget”.

5.5. Swatches/Options 

If you have color or size variants for your products and want these particular fields displayed on the search result page for individual products, you can select relevant tags or options where you’ve saved your data.

Make sure to click on Save for individual sections.

6. Autocomplete Configuration

Under this section, you can configure how the autocomplete will look on the frontend. All the fields under this page have their own help text. Some of the important fields and sections are explained below. 

Wizzy provides the following textual suggestions in Autocomplete, you can choose which ones you want to be displayed. 

• Top Products
• Collections
• Others (Mixed Suggestions)
• Brands
• Pages
• Blogs

Each of these section titles can be configured from this page.

You can also decide if you want to display product suggestions directly in the popup.

6.1. Attributes to add in autocomplete

Under this section add all the attributes we’ve configured in the first step which you want to display under the others suggestions. The attributes will be mixed with collections and brands to make appropriate suggestions for users to choose from.

6.2. Sections

Under this section, mention all the autocomplete sections one by one which you want the user to see on the frontend. By default, Wizzy displays all the sections.

7. Advanced Setup

On this page, we will configure which theme Wizzy Search & Filters app would work.

• First Click on Add new and then select the theme for which you want to try this app.
• Click on Save

You will see the Sync Themes option as soon as you save the above config. Click on it, It will add the necessary theme files for Wizzy integration.

8. Sync Data

Until this point, we’re done with all the configurations set and now the only step remaining is sync.

To sync the catalog with Wizzy go to Dashboard and then click on the Sync Catalog button. 

A popup will be displayed where you can select the type of data that needs to be synced (Add all products in Sync, Add pages in sync, and Add Best Selling Products Order), and further give a confirmation for whether you want to sync or not. If you are performing the sync for the first time, select all the options and click on the Sync Now button to add all the data into Sync.

To verify, go to the Sync Processes sub-section. Wait for approximately an hour (Depending on Catalog Size) before all the products are synced. To verify, come to Dashboard, and in the first widget (Store Statistics) you will see sync status xxx/xxx.

9. Enable Search & Filters

Now we’re ready to add App Embeds in the selected themes. To add App embeds in selected themes please follow these steps, (The steps are common for all types of themes):

1. Click on the Online Store in Your Shopify Dashboard.
2. Click on Themes.
3. Click on Customise on the theme you’re currently integrating with Wizzy.
4. Click on App Embeds.
5. Enable both Wizzy Body Assets and Wizzy Head Assets in the theme.

Note: These are only two App Embeds you need to enable which will add all necessary Styles and Scripts on the page. In case you want to Disable / Remove Wizzy Search from Store just disable these two App Embeds and it will be removed automatically. 

Once done, Go to the Configuration tab again of the Wizzy Search & Filters App and change Enable Autocomplete? and Enable Instant Search? to Yes and click on Save.

Once done, you can preview the Store Website in the theme where we’ve implemented Wizzy Search & Filters test autocomplete and search functionality by typing category name, product name, etc…

10. Theme Customization

Until this point, the basic functionality of search and autocomplete should start working, but if it’s not working or want more customization please go through the below sub-sections.

After syncing themes from Step 7 following files will be created in the theme: 

• wizzy.search.filters.scripts.liquid
• wizzy.search.filters.styles.liquid
• wizzyCustome.css
• wizzyCustome.js

To make sure the above files are created, go to edit code in theme, and make sure the first two files present under Snippets and the rest two under Assets. 

Further, you need to add wizzy.search.filters.scripts.liquid & wizzy.search.filters.styles.liquid in the theme.liquid file at the end just before the body tag. This will help us to add theme modifications for Wizzy Search and Filters.

For example,

{% render 'wizzy.search.filters.scripts' %}
{% render 'wizzy.search.filters.styles' %}

Once done, preview the theme and view the source to make sure wizzyCustom.css and wizzyCustom.js are present.

10.1. Purpose of wizzyCustom.css and wizzyCustom.js

By default, Wizzy comes with default UI/UX for Search, Filters, and Autocomplete UI. But to override the default UI and functionality wizzyCustome.css and wizzyCustom.js is used.

10.2. Modifying CSS

If you want to modify the CSS, you can do so from wizzyCustom.css. Here, you can change the theme color, UI/style, etc.

10.3. Modifying/Overriding HTML

If you want to Modify/Override HTML Template, follow these steps.

• Go to Wizzy Search Bar and Filters app and click on Advanced. 
• Click on Modify Templates for theme you want to override the templates and copy/paste the code in the Custome Template sub-section. You need to copy the code that’s present between these two lines from the inspect element. 

<!-- BEGIN app snippet: wizzy_theme_templates -->
<!-- END app snippet: wizzy_theme_templates -->

11. Troubleshooting

After performing all the steps still step 9, if Wizzy Search is still not working, please find below the errors you might be encountering and the solution for the same.

11.1. What to do when search input DOM is not found

If the search input DOM is not found search/autocomplete functionality won’t work, Wizzy by default supports some standard themes and there could be a case when Wizzy is unable to find the Search element from your theme. In such cases, you will need to mention Search DOM explicitly to make autocomplete/search work. 

To find Search DOM, Just inspect the search element and check its class / ID. You will need to add this in the following config before wizzy initializes the search. The code in wizzyCustom.js may look something like this. 

window.onWizzyLoaded.push(function () {
 window.wizzyConfig.events.registerEvent(
    window.wizzyConfig.events.allowedEvents.BEFORE_INIT,
    function (payload) {
      payload.common.lazyDOMConfig.searchInputIdentifiers.push({
        dom: ".search",  // #inputID or .InputClass
        type: "search",  // Type of Input Search or Text
      });
      return payload;
    }
  );
});

11.2. What to do when content DOM is not found 

If content DOM is not found, go to the console in inspect element and look for the particular command. The code in wizzyCustom.js may look something like this. 

window.onWizzyLoaded.push(function () {
  window.wizzyConfig.events.registerEvent(
      window.wizzyConfig.events.allowedEvents.BEFORE_INIT,
      function (payload) {
        payload.common.lazyDOMConfig.contentDOMIdentifiers.push("#main")
        return payload;
      }
    );
  );
});

11.3. What to do when we want to click on some DOM on search

If you want to click on some DOM on search, go to the console in the inspect element and look for the particular command. The code in wizzyCustom.js may look something like this.

window.onWizzyLoaded.push(function () {
  window.wizzyConfig.events.registerEvent(
      window.wizzyConfig.events.allowedEvents.BEFORE_INIT,
      function (payload) {
        payload.common.lazyDOMConfig.identifiersToClickOnSearch.push("#icon-search")
        return payload;
      }
    );
  );
});

11.4. What to do when we want to hide some DOM on search

If you want to hide DOM once the search is executed, go to the console to inspect the element and look for the particular command. The code in wizzyCustom.js may look something like this.

window.onWizzyLoaded.push(function () {
  window.wizzyConfig.events.registerEvent(
      window.wizzyConfig.events.allowedEvents.BEFORE_INIT,
      function (payload) {
        payload.common.lazyDOMConfig.identifiersToHideOnSearch.push("#header-slider")
        return payload;
      }
  );
});

12. Enable Wizzy on Collection Page

Wizzy Filters can also be implemented on the Collection pages. In order to do so, you have to follow the below-given steps: 

• Go to Wizzy Search Bar and Filters app, and in Configuration, turn the status to ‘Yes’ for Enable Sync, Enable Collection Sync, and Replace Collection Pages. 
• If you enable Wizzy on the Collection Page, a Wizzy Best Selling Collection is created which gets displayed in Autocomplete or Collection Page. This collection has a defined title and URL.
• In order to add the Wizzy Collection Page to your current theme, follow the below-given steps. 

1. 1. Go to the theme and click on customize. 
   2. Click on the homepage tab on the top and select Collections. Here all your Collections will be displayed, select Default Collection or the specific collection template you want to enable Wizzy Filters 
   3. In the template section, hide your current collection grid, further click on Add Section and search for Wizzy Collection Page. 

If you’re facing any issues in the above or need more clarification you can always reach out to us at team@wizzy.ai