• Home
  • Docs
    • User Manual
    • Magento 2 Manual
  • APIs
  • Back to Wizzy
  • Support
  • Home
  • Docs
    • User Manual
    • Magento 2 Manual
  • APIs
  • Back to Wizzy
  • Support
home/Knowledge Base/Shopify Manual

Installation

41 views 0 May 17, 2022 May 27, 2022 alok

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

Was this helpful?

Yes  No
Leave A Comment Cancel reply

Shopify Manual
  • Installation
Categories
  • Magento 2 Manual
    • Advanced Setup
    • Autocomplete Menu
    • Catalog Index Configuration
    • Search UI Customisation
    • Setup
  • Shopify Manual
    • Setup
  • User Manual
    • Account
    • Analytics
    • Billing
    • Currencies
    • Developers
    • Stores
    • Synonyms
  • team@wizzy.ai
  • +91-9106141411
  • © 2021 Wizzy Softech Pvt. Ltd. All Rights Reserved