• 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/Setup

Theme Customization

51 views 0 February 27, 2023 naiteek

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 -->

Was this helpful?

Yes  No
Related Articles
  • Enable Wizzy on Collection Page
  • Enable Search & Filters
  • Sync Data
  • Installation
Leave A Comment Cancel reply

Setup
  • Theme Customization
  • Enable Wizzy on Collection Page
  • Enable Search & Filters
  • Sync Data
  • Installation
Categories
  • Magento 2 Manual
    • Advanced Setup
    • Autocomplete Menu
    • Catalog Index Configuration
    • Search UI Customisation
    • Setup
  • Shopify Manual
    • Advance Setup
    • Attribute Configuration
    • Autocomplete Configuration
    • Catalog Index Configuration
    • Search Result Page Configuration
    • Setup
    • Troubleshooting
  • User Manual
    • Account
    • Analytics
    • Billing
    • Currencies
    • Developers
    • Stores
    • Synonyms
  • team@wizzy.ai
  • +91-9106141411
  • © 2023 Wizzy Softech Pvt. Ltd. All Rights Reserved