> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.meshnordic.ai/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# Html / Css: How to activate M:AI search bar LIVE in your theme?
|| Follow the UX installation below or the step-by-step UX guides for each platform: [Shopify](https://support.meshnordic.ai/en/article/shopify-integration-overview-ijbama/), [WooCommerce](https://support.meshnordic.ai/en/article/woocommerce-integration-overview-rbi1to/). If you can't find your platform, check [all integrations](https://support.meshnordic.ai/en/category/integrations-a5r5k7/) or [contact us](https://support.meshnordic.ai/en/article/contact-support-community-questions-and-feedback-nvx3ly/).
# Go LIVE - 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
1. Go to your Ecommerce store > Admin > Theme HTML editor.
2. Place the **JavaScript search tag** in your 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".
3. 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](https://support.meshnordic.ai/en/article/contact-support-community-questions-and-feedback-nvx3ly/), and we'll help you.
---
## HTML example
*A small example of how the HTML code could look like:*
```
Example search
```
---
### You're done!
|| Any issues along the way? Feel free to [contact us](https://support.meshnordic.ai/en/article/contact-support-community-questions-and-feedback-nvx3ly/), 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 →](https://support.meshnordic.ai/en/article/design-css-143esq8/)
****