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 Configuration page of the app.
On this page you will be asked to enter Store ID, Store Secret and API key. You will be able to get it from your Wizzy account. Please follow linked articles to create store and get these credentials.
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 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 and layout Wizzy Search & Filters app would work.
- First Click on Add new and then select the theme for which you want to try this app.
- Once theme is selected layouts will popup, select the main theme layout in which you want to try Wizzy.
- Click on Save
You will see Sync Themes option as soon as you save above config. But don’t sync it for now.
8. Sync Data & Go Live
Until this point we’ve all the configurations set and now only step remaining is sync.
First Go to Configuration Tab
Select Yes under Enable Sync? and click on save.
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.
Once all the products are synced, Go to Advanced tab. Click on Sync Themes button. This will add all necessary assets on selected theme and layout. Once done, Go to Configuration tab 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…
9. Uninstallation
Before uninstalling the app directly. Please remove the Wizzy assets and code from the theme. To do that, Go to advanced tab and select No under Is Activated? for all the selected themes. Click on save and then click on Sync Themes button.
This will make sure no Wizzy related code or script is present after uninstallation in your store.
If you’re facing any issues in above or need more clarification you can always reach out to us at team@wizzy.ai