B. Installation Part 2

How do I update my theme to replace my current search with M:AI search?

Choose how you want to replace your current search:

Give us access to your WooCommerce account, and we'll handle this part of the installation for you.

Or, do this part of the installation yourself by following the step-by-step instructions below.

Step-by-step instructions in WooCommerce Admin

1. Go to WooCommerce Admin > Appearance > Editor:

2. Our WooCommerce theme looks like this

3. Let's replace the existing WooCommerce search with the new M:AI Search

We need to make some minor HTML code changes in the theme.

Go to WooCommerce Admin > Appearance > Editor > Click on your theme

Continue to Patterns > Template Parts > Header

If your search bar is located in the header, then click on "Header"

Change the HTML code

4. Now you should see the Code Editor

If you don't see the Code Editor, use the ...-icon in the top right corner and select "Code Editor":

5. This is what the Code Editor looks like

At the top of the header's HTML code, add this JavaScript: <script async src="https://your-company.maifind.com/search/code.js"></script>.

Change https://your-company.maifind.com in the URL to your company URL at M:AI.



Find the search bar, in our case, at the bottom of the header's HTML code:

Add className":"js-open-search-engine to the wp:search element.

6. Don't forget to save

After saving, if you click "Exit code editor" the result will look something like this. Don't worry, the JavaScript and the div won't be visible.

Preview your store to make sure the changes work.

You're done!

Both parts of the installation are complete and your ecommerce website search is now an intelligent AI search that vastly improves your online store!


Any issues along the way? Feel free to contact us, and we’ll try to help.

Updated on: 17/03/2025