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 given Installation link.
2. Configure the credentials.
As soon as you install and grant permissions to the app, You will be redirected to the Initialize page of the app. Click on Initialize Setup button to start the setup process. If already have Wizzy account and store credentials please click on Click here in the second line.
Copy Paste the keys from 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 every custom data we call it as a attribute. In Shopify ecosystem we can save custom or product related data in three places. Options, Metafields and Tags.
3.1. Configure Named Tags
This is useful when you’re saving specific details under tags for products with 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 below.
Name: To identify specific attribute across configuration
Identifier: In above case Material
Separator: In above case _
Type: Select appropriate from list
Is Searchable: If you want to make values of this tag searchable
Is Filterable: If you want to make values of this tag filterable.
3.2 Configure Tags
This section is useful to create attribute based on group of tags from Product. You can configure as many tags attributes as you want under this section where each field represents below.
Name: To identify specific attribute across configuration
Values: Click on Select Values to select the list of tags.
Is Searchable: If you want to make values of this tag searchable
Is Filterable: If you want to make values of this tag filterable.
3.2. Configure Metafields
Similar like tags, if you’re using metafields on products to save extra details. Please configure the details in this section with as many meta fields as you want.
3.3. Configure Options
Configure this section or define attributes in this section when you’re using Options to save data and create different variations in Shopify.
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 in specific entities. (e.g. Gender, Color, Size, Brands etc…) Each section can be configured or mapped from following data end points,
- Collections
- Product Type (Only for Genders)
- Product Vendor Field (Only for Brands)
- Attributes
For colors and sizes only attributes are available. If you’re saving Colors and Sizes in Option values then create their attributes from Attributes page and then select those attributes from this list.
All these sections are optional and can be ignored / skipped completely. Also make sure to click on Save for individual sections.
5. Configure Search Results Page
On this page multiple search page related settings are divided in multiple sections. Each section has their own help text written. Explanation of some of the important fields are as follow,
- Search Input DOM Selector: For this field copy class or an ID of the search input field from the frontend.
- Search Results DOM Selector: For this field copy class or an ID of the DIV which covers the body part of the page. In this specific DIV the search results will get replaced when user hits enter or submit search form.
Make sure to add class or ID with proper identifier (e.g. .classNameHer or #idhere)
5.1. Facets
Under facets you can select as many filter options as you want to display on the search results page.
5.2. Sorts
Similarly add as many sort options as you want to display on the search results page.
Make sure to click on Save for individual sections.
6. Autocomplete Configuration
Under this section you can configure how autocomplete will look like on the frontend. All the fields under this page has their own help text. Some of the important fields and sections are explained below.
Autocomplete textual suggestions are divided in four sections,
- Collections
- Brands
- Others (Mixed suggestions)
- Pages
Each of these section titles can be configured from this page.
You can also decide if you want to display product suggestions directly into 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 section one by one which you want user to see on the frontend. By default Wizzy displays all the sections.
7. Advanced Setup
On this page, we will configure in 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 Sync Themes option as soon as you save above config. Click on it, It will modify theme necessarily for Wizzy integration.
8. Sync Data & Go Live
Until this point we’ve all the configurations set and now only step remaining is sync.
To sync the catalog with Wizzy go to Dashboard and then click on Sync Catalog button. This will ask for confirmation, confirm it.
This will add all the products in sync. To verify go to Sync Processes tab and you will see two items in the list. (Add all products in Sync, Add pages in sync)
Wait for approx 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.
Now we’re ready to add App Embeds in the selected themes. To add App embeds in selected themes please follow the steps, (The steps are common for all type of themes)
- Click on Online Store in Your Shopify Dashboard
- Click on Themes
- Click on Customise on the theme you’re currently integrating Wizzy.
- Click on Theme Settings
- Click on App Embeds
- 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 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 open the Store Website and can check autocomplete and search functionality by typing category name, product name etc…
If you’re facing any issues in above or need more clarification you can always reach out to us at team@wizzy.ai