B. Installation part 2:

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


Choose in which way you want to replace your current search:

Give us access to your WooCommerce account and we'll make 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 didn't even contain a search bar.

If your WooCommerce theme contains a search bar, then skip to step 3) below, otherwise follow these steps.

Start by adding a product search to your header. Click on your theme:



Find "Areas" > Header:



You may either select a pre-made header that already contains a search bar (to the right below "Design"). In our case, we have added multi-currency to our header. We also want to add a block called "Product Search."



WooCommerce have lots of settings how the product search bar should be presented. We chose this look:



When you're done, don't forget to click "Save". Now our theme looks like this:

3. Now we have a search bar. How to replace the old WooCommerce search with the new M:AI search?

We need to make some smaller 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 how 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 done 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: 03/02/2025