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 performing all the steps from the Advance Setup point, the 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 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.
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.
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.
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 Advance.
- In the Themes sub-section, select the particular theme you want to be integrated with Wizzy, and select the Save button.
- Furthermore, click on Modify Template 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 -->