Html / Css: How to activate M:AI search bar in your theme?
Instructions on how to replace your current search bar with M:AI search bar
Go to your M:AI admin > Layout > Design & CSS.
To make M:AI Search work in your WooCommerce store (or a Headless Commerce store), you'll need to add a JavaScript to your site.
The instructions on how to do this are found in "Learn how to Setup UX". Click on "Setup UX".
Tip: You'll see the correct URL to the JavaScript for your M:AI store on that page, not the URL to the test store we call "your-company":
Follow these steps
- Go to your Ecommerce store > Admin > Theme HTML editor.
- Place the JavaScript search tag in your <head> HTML element. It needs to be accessible on all pages that should be searchable. Make sure the URL to the JavaScript is using the correct URL to your store on M:AI, i.e., "https://meshnordic.maifind.ai" and not "https://your-company.maifind.ai".
- To initiate and trigger M:AI Search in your store you need to place the CSS class name called "js-open-search-engine" on the elements that should trigger M:AI, i.e., your current search bar and search button
The easiest way to do that is by using the field "CSS classes that trigger M:AI search to open".
Enter the CSS-classes you want to use to initiate M:AI Search to be displayed.
For example: ".search-bar, .search-button"
And if it's an CSS-class with an ID you just enter "#id-to-the-element"
If you don't know what a CSS-class is, or which CSS-class to add in your field. Please contact us, and we'll help you.
HTML example
A small example of how the HTML code could look like:
<!doctype html>
<html lang="en">
<head>
<title>Example search</title>
<script async src="https://your-company.maifind.ai/search/code.js"></script>
</head>
<body>
<header>
<input class="js-open-search-engine">
<button class="js-open-search-engine">search</button>
</header>
</body>
</html>
You're done!
Otherwise:
Both parts of the installation are done, and your ecommerce website search is now an intelligent AI search that vastly improves your online store!
****
Updated on: 10/04/2025