Html / Css: How to activate M:AI search bar in your theme?
Follow the UX installation below or the step-by-step UX guides to each platform: Shopify, WooCommerce. If you can't find your platform, check all integrations or contact us.
The UX installation instructions is found in your M:AI admin > Ecommerce > M:AI headless API > 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. Ie. "https://meshnordic.maifind.ai" and not "https://your-company.maifind.ai".
Place the CSS class name called "js-open-search-engine" on the elements that should trigger M:AI. Ie. your current search bar + search button
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!
Instructions how to replace your current search bar with M:AI search bar
The UX installation instructions is found in your M:AI admin > Ecommerce > M:AI headless API > 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. Ie. "https://meshnordic.maifind.ai" and not "https://your-company.maifind.ai".
Place the CSS class name called "js-open-search-engine" on the elements that should trigger M:AI. Ie. your current search bar + search button
HTML example
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!
Updated on: 03/02/2025