Html / Css: How to activate M:AI search bar in your theme?
Follow the UX installation below or the step-by-step UX guides for each platform: Shopify, WooCommerce. If you can't find your platform, check all integrations or contact us.
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":
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.
A small example of how the HTML code could look like:
Any issues along the way? Feel free to contact us, and we’ll try to help. It will take you some time to find the exact locations in your ecommerce website where the HTML and JavaScript code should be placed.
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!
Continue reading on how to setup your Design & CSS →
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!
Any issues along the way? Feel free to contact us, and we’ll try to help. It will take you some time to find the exact locations in your ecommerce website where the HTML and JavaScript code should be placed.
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!
Continue reading on how to setup your Design & CSS →
Updated on: 10/04/2025