Set the overall look of M:AI AI search in the storefront by changing the layout, design, and CSS.

P.S. We describe the Premium plan unless otherwise specified.

Layout > Design & CSS

Display your logo

URL to your logo
Set the URL to your logo. Make sure the image is optimized and not too large to ensure fast loading times without delays. All modern image formats are supported, even WEBP.

Example

Your logo is typically displayed in the upper left corner of the storefront’s search. See our example of a blue logo called “Logo”:

What should trigger the search bar?

Shopify
In Shopify, the search bar and search button automatically activate M:AI Search.
However, there may be times when you want other buttons, images, or URLs to also trigger M:AI Search.

WooCommerce
In WooCommerce and other eCommerce platforms, this setting is highly beneficial!
Simply add all the CSS and ID classes you want to trigger the display of M:AI Search.

To apply the search feature to multiple elements, list their CSS selectors separated by commas.
For example, if you want the CSS class '.search-input-field' and the ID 'id-to-element' to both activate M:AI Search, include them like this:

Layout Settings

To customize the colors in your M:AI Search, simply choose your preferred colors in the Color settings below.
You can also change all Filter buttons from square to round by toggling the option to ON.

Advanced CSS

If you know CSS, you can create nearly any design you envision.
Please add your CSS code, with a limit of 20,000 characters.

Example

To create a dark theme more efficiently, please use the color settings provided in the Layout settings above

Color settings  
Primary color  
#274069

Border line color  
#6baed6

Text color  
#696565 or #a3a3a3

Media button text color  
#fafafa

Media button background color  
#6baed6

And this CSS-code:

/* Preview window */  
.search__title {  
color: rgba(var(--MN-border-line-color),1);  
}  
body {  
background: rgba(var(--MN-primary-color),1);  
}

/* Search window */  
/* Page */  
.MN_search_layout_wrapper {  
background: #f4f4f4; /*rgba(var(--MN-svg-default-color),1)*/  
}  
/* Main header (with logo) */  
.MN_search_layout_header {  
background: rgba(var(--MN-primary-color),1);  
padding: 30px;  
}  
/* Input fields: Main search - No white dash on top */  
.MN_search_layout .MN_input_field_search .MuiInputBase-root .MuiInputBase-input:not([value=""])~.MuiOutlinedInput-notchedOutline {  
border: 0px !important;  
top: 0px !important;  
}  
/* Input fields: Main search - Hide outher white corners */  
.css-x0qxq3 {  
border-radius: 8px !important;  
}  
/* Input fields: Main search - Background */  
.MN_search_layout .MN_input_field_search .MuiInputBase-root {  
background: #fafafa;  
}  
.MN_search_layout .MN_input_field_search .MuiInputBase-root:hover {  
outline: 2px dashed rgba(var(--MN-border-line-color),1);  
}

/* Close button X */  
/* Close button X: In main search input */  
.MN_search_layout .MN_input_field_search_clear.MuiButtonBase-root svg:hover {  
background: #cecece;  
border-radius: 50px !important;  
}  
/* Close button X: For page */  
.MN_search_layout .MN_search_header_close_button {  
background: rgba(var(--MN-border-line-color), 1) !important;  
}  
.MN_search_layout .MN_search_header_close_button:hover {  
background: #cecece !important;  
}  
/* Close button X: Selected filters */  
.MN_search_layout .MN_current_refinements_item svg.MuiChip-deleteIcon {  
outline: 1px solid rgba(var(--MN-border-line-color),1);  
border-radius: 50px !important;  
}  
.MN_search_layout .MN_current_refinements_item svg.MuiChip-deleteIcon:hover {  
background: rgba(var(--MN-border-line-color), 1);  
}

/* Top bar */  
.MN_search_layout_search_header {  
background: #fefefe;  
}  
.MN_search_layout_body.MuiGrid-root {  
margin-top: 0px;  
}  
/* Top bar: Products*/  
.MN_search_layout .MN_top_bar_container .MN_product.MuiPaper-root {  
background: #ffffff;  
}

/* Search result: Products */  
/* Products list */  
.MN_search_layout_reset .MN_search_results li,  
.MN_search_layout .MN_product.MuiPaper-root {  
background: #ffffff;  
}  
/* Products: Stock */  
/*.MN_product_stock_status_name,  
.MN_product_stock_status_quantity {  
color: #696565;  
}*/  
/* Products: Price */  
.MN_search_layout .MN_product_price_block.MuiCardContent-root,  
.MN_search_layout .MN_product_price {  
display: none;  
}  
/* Products: Highlighted keyword search */  
.MN_search_layout .MN_highlight_highlighted {  
color: rgba(var(--MN-border-line-color), 1) !important; /*#f4f4f4*/  
/*background: rgba(var(--MN-border-line-color), 1) !important;*/  
}  
/* Products: Buy buttons */  
.MN_search_layout .MN_product_link.MuiLink-root {  
background: rgba(var(--MN-primary-color), 1);  
}  
/* Products: Image slider */  
.MN_search_layout .MN_product_images_swiper_scrollbar {  
background: rgba(var(--MN-primary-color), 1) !important;  
}  
.MN_search_layout .MN_product_images_swiper_scrollbar_drag {  
background: rgba(var(--MN-border-line-color),1) !important;  
}

/* Filters*/  
/* Filters: Main button "Filters" */  
.MN_search_layout .MN_filters_toggle_primary {  
border: 2px dashed rgba(var(--MN-border-line-color),1);  
background: rgba(var(--MN-primary-color),1);  
/*color: rgba(var(--MN-media-button-text-color),1);*/  
}  
/* Filters: Main button "Filters" - Selected */  
.MN_search_layout .MN_filters_toggle_primary_selected {  
border: 2px dashed rgba(var(--MN-media-button-background-color),1);  
background: rgba(var(--MN-border-line-color),.1);  
color: rgba(var(--MN-text-color),1);  
}  
/* Filters: Buttons & Colors - On hover */  
.MN_search_layout .MN_media_button_inner:hover { /*.MN_media_button--circle */  
border: 2px dashed rgba(var(--MN-border-line-color),1);  
/*outline: 2px dashed rgba(var(--MN-border-line-color),1);*/  
/*background: rgba(var(--MN-primary-color),.1);  
color: rgba(var(--MN-text-color),1);*/  
}  
/* Filters: Buttons & Colors - Selected - Border */  
.MN_search_layout .MN_media_button--checked .MN_media_button_inner {  
/*border: 10px dashed red, blue;*/  
outline: 2px dashed rgba(var(--MN-border-line-color),1);  
box-shadow: 0 0 0 2px #fafafa;  
}  
/* Filters: Buttons & Colors - Selected - Background */  
.MN_search_layout .MN_media_button--checked .MN_media_button_button {  
background: rgba(var(--MN-border-line-color),.1);  
}  
/* Filters: Buttons & Colors - Text color */  
/*.MN_search_layout .MN_media_button_inner_label.MuiTypography-root {  
color: rgba(var(--MN-text-color),1);  
}*/  
/* Filters: Buttons & Colors - Selected - Text color */  
.MN_search_layout .MN_media_button--checked .MN_media_button_inner_label.MuiTypography-root {  
color: rgba(var(--MN-text-color),1);  
}  
/*.MN_search_layout .MN_media_button_button {  
background: rgba(var(--MN-border-line-color), 1);  
}*/  
/* Filters: Selected filters */  
.MN_search_layout .MN_current_refinements_item.MuiButtonBase-root {  
border: 1px dashed rgba(var(--MN-media-button-background-color),1);  
background: rgba(var(--MN-border-line-color),.1);  
color: rgba(var(--MN-text-color),1);

/*border: 1px dashed rgba(var(--MN-border-line-color),1);  
background: rgba(var(--MN-primary-color),.1);  
color: rgba(var(--MN-text-color),1);*/  
}  
/* Check boxes: Collections & Colors */  
/*.MN_search_layout .MN_category_list_button.MuiButtonBase-root svg,  
.MN_search_layout .MN_refinement_list_button.MuiButtonBase-root svg {  
color: rgba(var(--MN-media-button-background-color),1);  
}*/  
/* Filters: Badges - Buttons */  
.MN_search_layout .MN_filters_toggle_badge .MuiBadge-badge {  
background: rgba(var(--MN-border-line-color),1);  
}  
/* Filters: Badges - Colors - Number of products matching */  
.MN_search_layout .MN_media_button .MuiBadge-badge:not(svg) {  
/*width: 26px !important;  
height: 13px !important;*/  
font-size: 10px !important;  
background: #6baed6 !important;  
}  
/* Filters: Badges - Both Buttons & Colors - Selected */  
.MN_search_layout .MN_media_button--checked .MuiBadge-badge svg {  
/*width: 20px !important;  
height: 20px !important;*/  
font-size: 10px !important;  
background: none; /*rgba(var(--MN-primary-color),1)*/  
color: rgba(var(--MN-primary-color),1); /*rgba(var(--MN-border-line-color),1)*/  
}

Updated on: 22/04/2025