> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.qikify.com/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).

# List Shopify themes integration

This is a list of the most popular Shopify themes and how Smart Menu works with them. 
|| If your theme is not in the list, it does NOT mean Smart Menu is incompatible with it. Please contact us if you can add the menu to your theme.

${color}[#03a800](✔ = fully compatible)  |  ${color}[#ffae00](Δ = work on some cases)  |  ${color}[#df1616](✘ = incompatible)

| Theme | Compatibility | Menu type | Note |
| ---- |
| Debut | ${color}[#03a800](✔) | Horizontal menu |   |
| Dawn | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Spotlight | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Craft | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Sense | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Refresh | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Trade | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Studio | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Origin | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Ride | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Publisher | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Taste | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Crave | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Colorblock | ${color}[#03a800](✔) | Horizontal menu | If the "Auto" method does not work, please use CSS selector method with these selectors: desktop > `.list-menu.list-menu--inline`, mobile > `.menu-drawer__menu.list-menu` |
| Minimog | ${color}[#03a800](✔) | Horizontal menu | CSS selector: desktop > `.m-header__desktop .m-menu`, mobile > `.m-menu-drawer__navigation.m-menu-mobile` |
| Jumpstart | ${color}[#03a800](✔) | Horizontal menu |   |
| Venture | ${color}[#03a800](✔) | Horizontal menu |   |
| Boundless | ${color}[#ffae00](Δ) | Horizontal menu | Sidebar menu |
| Simple | ${color}[#03a800](✔) | Vertical menu |   |
| Narrative | ${color}[#df1616](✘) | Fullscreen vertical menu | Incompatible |
| Brooklyn | ${color}[#03a800](✔) | Horizontal menu | Theme will change horizontal menu to sidebar if menu is too long. Please contact us to make it always show the horizontal menu. |
| Supply | ${color}[#03a800](✔) | Horizontal menu |   |
| Minimal | ${color}[#03a800](✔) | Horizontal menu |   |
| Pop | ${color}[#df1616](✘) | Vertical menu | Incompatible |
| Warehouse | ${color}[#03a800](✔) | Horizontal menu + Condensed menu | Only work with Horizontal menu. In theme settings, please choose menu as Inline, not Condensed. |
| Prestige | ${color}[#03a800](✔) | Horizontal menu + Slide bar | Should change navigation style in theme settings to Center. Use CSS selector method to replace both desktop and mobile menus. |
| Empire | ${color}[#03a800](✔) | Horizontal menu | In theme settings, must remove Main menu in Header > Quick links |
| Impulse | ${color}[#03a800](✔) | Horizontal menu | Cannot work if theme's using logo center, menu split → change Logo position to "Logo center, menu below". In theme settings, should remove menu on toolbar. |
| District | ${color}[#03a800](✔) | Horizontal menu |   |
| Motion | ${color}[#03a800](✔) | Horizontal menu |   |
| Blockshop | ${color}[#03a800](✔) | Horizontal menu |   |
| Parallax | ${color}[#03a800](✔) | Horizontal menu |   |
| Testament | ${color}[#03a800](✔) | Horizontal menu |   |
| Venue | ${color}[#03a800](✔) | Horizontal menu | Should change navigation style in theme settings to Center |
| Pipeline | ${color}[#03a800](✔) | Horizontal menu |   |
| Envy | ${color}[#03a800](✔) | Horizontal menu | In theme settings, should remove main menu in Top bar |
| Icon | ${color}[#03a800](✔) | Horizontal menu | In theme settings, must set navigation style as "Full horizontal", not "Slideout vertical" |
| Atlantic | ${color}[#03a800](✔) | Horizontal menu |   |
| Fashionopolism | ${color}[#03a800](✔) | Horizontal menu |   |
| Symmetry | ${color}[#03a800](✔) | Horizontal menu | Only can work best when choose Menu alignment as "Underneath" in theme's settings. |
| Responsive | ${color}[#03a800](✔) | Horizontal menu | Remember to add submenu background color in app |
| ShowTime | ${color}[#03a800](✔) | Horizontal menu |   |
| Mr Parker | ${color}[#03a800](✔) | Horizontal menu | In theme settings, should set Logo position: inline and Alignment: left. If logo is set above navigation, should use CSS selector method |

| Theme | Compatibility | Menu type | Note |
| ---- |
| Retina | ${color}[#03a800](✔) | Horizontal menu |   |
| Vantage | ${color}[#03a800](✔) | Horizontal menu |   |
| Boost | ${color}[#03a800](✔) | Horizontal menu |   |
| Canopy | ${color}[#03a800](✔) | Horizontal menu | In theme settings, should not choose Mobile navigation style on desktop |
| Modular | ${color}[#03a800](✔) | Horizontal menu | In theme settings, should choose Navigation layout as Standard |
| Startup | ${color}[#ffae00](Δ) | Horizontal menu + Sidebar menu | Can only replace horizontal menu, not work with Drawer menu (sidebar) |
| Split | ${color}[#03a800](✔) | Horizontal menu + Sidebar menu | In theme settings, should choose Desktop menu style as Classic |
| Grid | ${color}[#03a800](✔) | Horizontal menu |   |
| Masonry | ${color}[#03a800](✔) | Vertical menu |   |
| Flow | ${color}[#03a800](✔) | Horizontal menu |   |
| Sunrise | ${color}[#ffae00](Δ) | Horizontal menu + Sidebar menu | Can only replace horizontal menu, can't show up on mobile |
| Avenue | ${color}[#03a800](✔) | Horizontal menu |   |
| Loft | ${color}[#03a800](✔) | Horizontal menu |   |
| Showcase | ${color}[#ffae00](Δ) | Sidebar menu | Can only show as mobile menu in sidebar |
| Launch | ${color}[#03a800](✔) | Horizontal menu |   |
| Mobilia | ${color}[#03a800](✔) | Horizontal menu | In theme settings, should remove Main menu in Top bar |
| Cascade | ${color}[#03a800](✔) | Horizontal menu |   |
| Pacific | ${color}[#03a800](✔) | Horizontal menu | In theme settings, should remove Main menu in Sidebar |
| Artisan | ${color}[#03a800](✔) | Horizontal menu |   |
| Providence | ${color}[#03a800](✔) | Horizontal menu |   |
| Trademark | ${color}[#03a800](✔) | Horizontal menu | In theme settings, should change logo position to left |
| Handy | ${color}[#03a800](✔) | Horizontal menu |   |
| Kingdom | ${color}[#03a800](✔) | Vertical menu |   |
| Galleria | ${color}[#ffae00](Δ) | Horizontal menu + Sidebar menu | Need to change navigation type in theme settings to Horizontal menu, not Minimal top. Should use CSS selector method. |
| Story | ${color}[#03a800](✔) | Horizontal menu |   |
| Palo Alto | ${color}[#03a800](✔) | Horizontal menu |   |
| Maker | ${color}[#03a800](✔) | Horizontal menu | If menu is too long, theme turns to sidebar menu |
| Label | ${color}[#03a800](✔) | Horizontal menu + Sidebar menu |   |
| Colors | ${color}[#ffae00](Δ) | Horizontal menu + Sidebar menu | Must use CSS selector method. In theme settings, must uncheck the "Show on mobile" of horizontal menu |
| Kagami | ${color}[#03a800](✔) | Horizontal menu | In theme settings, should change Navigation mode to Horizontal |
| Vogue | ${color}[#ffae00](Δ) | Vertical menu + Sidebar menu | If theme uses Compact header → only select mobile menu, leave "Select your main menu" blank |
| Ira | ${color}[#03a800](✔) | Horizontal menu |   |
| Local | ${color}[#ffae00](Δ) | Sidebar menu |   |
| Editions | ${color}[#03a800](✔) | Horizontal menu |   |
| Capital | ${color}[#03a800](✔) | Horizontal menu |   |
| Reach | ${color}[#03a800](✔) | Horizontal menu + Sidebar menu | In theme settings, should choose Navigation layout as Expanded |
| Editorial | ${color}[#03a800](✔) | Horizontal menu |   |
| California | ${color}[#ffae00](Δ) | Horizontal menu + Sidebar menu | Use CSS selector method: desktop > `.menu ul`, mobile > `.side-nav ul` |
| Alchemy | ${color}[#ffae00](Δ) | Sidebar menu | Only work as mobile menu in sidebar |
| Expression | ${color}[#03a800](✔) | Horizontal menu |   |
| Lorenza | ${color}[#ffae00](Δ) | Horizontal menu + Sidebar menu | If theme uses Compact menu → only select mobile menu, leave "Select your main menu" blank |
| Focal | ${color}[#03a800](✔) | Horizontal menu |   |
| Broadcast | ${color}[#03a800](✔) | Horizontal menu |   |
| Ella | ${color}[#03a800](✔) | Horizontal menu | Use CSS selector method with these selectors: Desktop > `#HeaderNavigation`, Mobile > `#navigation-mobile > div > div.site-nav-mobile.nav` |
| Shoptimized | ${color}[#03a800](✔) | Horizontal menu |   |
| Booster | ${color}[#03a800](✔) | Horizontal menu |   |
| Wokiee | ${color}[#03a800](✔) | Horizontal menu |   |
| Fastor | ${color}[#03a800](✔) | Horizontal menu |   |
| Superstore | ${color}[#03a800](✔) | Horizontal menu | In theme settings → Performance → need to uncheck "Use Turbolinks" option |