Question 1

[Checkout] Integrations

Accepted Answer

Please follow these steps to integrate our app with Review apps

Yotpo

Q: Column Width - Adjust width of menu items

The submenu item's width is divided into 12 in total. The Column Width option helps to adjust the number of columns which an item occupies in total of 12 columns. <img src="https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_1v40w7h.png" alt="" /> You can find the Column width option in the item editor on the left panel <img src="https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_frdqh.png" alt="" /> Or hover on that item in the preview panel, and click on ↔ button <img src="https://storage.crisp.chat/users/helpdesk/website/33f605886cba4e00/image_16c5qtn.png" alt="" /> <ul> <li>This item will have the width = exactly the column width you set.</li> <li>When the total of items' columns in a row exceeds 12, the next item will be dropped to second row.</li> <li>If all items set Column width as Automatic, they will be equally distributed on the total of 12 columns. (For example: if a menu has 3 submenu items, this menu will divide place 3 items in 3 columns equally as 4/12).</li> <li>If an item has a fixed column width (eg. 3/12), but other menu items are set as "Automatic", they will auto adjust their width to fit the remaining space on a total of 12 columns. (For example: if a menu has 2 submenu items and you set the width of first item to 8/12, then the latter will auto adjust width to 4/12).</li> </ul> || For image, you can set a fixed Image width, but this image width can't exceed column width. ||| Column Width does not work if you enable Masonry feature. Read more about Masonry [here](htt

Step 1

Go to the Yotpo portal > Choose profile account > Account Settings.

Step 2

When you click on the Account Settings, it will open a new tab. Please go to that tab > Copy the App key.

Then Right Click > Choose ** Inspect **> Open the *Network*.

Search pending_secret > Choose Fetch/XHR tag.

Step 3

On the left side, please choose Get the secret key button to get the code. The code will be sent to your email. Then paste the code to the label below > Choose Submit.

Step 4

After submitting the code, the pending_secret file will display. Please click on that file > Copy the utoken code.

Step 5

Go to Checkout Customizer app > Choose Integrations > Enable the Yotpo app > Paste the Utoken code to t

Question 2

My old menu is still showing up, how can I hide it?

Accepted Answer

To achieve the best user experience, Shopify always loads your website first, and then apps, that's why your old navigation still appears. If you want to hide your old navigation, please follow these steps:

Copy CSS selector of your old menu:

Disable Smart Menu on your store
Go to your storefront to find the theme's menu that you want to hide
Right-click on any element in the menu to inspect
The developer tool will appear. Here you need to find the correct HTML element of your theme's menu. When you hover over HTML elements in the development tool, the corresponding element will be highlighted with the blue color on the storefront.
Right-click on that element in the development tool > Copy > Copy selector

Add the CSS code to your theme:

Access your theme's code
Here you need to find the CSS file in assets folder. For example, with Dawn theme, it is base.css file ![](https://storage.crisp.chat/users/helpdesk/websi

Question 3

How to show Smart Menu on your storefront

Accepted Answer

After creating your menu in Smart Menu, you can choose a current menu on your store to be replaced by Smart Menu. There are 3 ways to do it: Auto - Replace Main menu, Manual - Replace menu from Shopify, or Manual - Replace menu by CSS selector.

1. Auto - Replace Main menu

By default, the option "Auto - Replace Main menu" is selected. With this option, the app will automatically find the main menu in your theme to replace. || In some cases, the app can't find the main menu to replace. Please try other manual options: Manual - Replace menu from Shopify and Manual - Replace menu by CSS selector

2. Manual - Replace menu from Shopify

With this option, you need to manually select the menu you added in the theme. So, our app can find and replace it.

Select your main menu: select your desktop menu that you want to replace with Smart Menu Smart Menu can't replace a menu item in a menu, it can only replace the whole menu, so you should select your Main menu
Select mobile menu: select your mobile menu that you want to replace with Smart Menu If you want to only show Smart Menu on desktop and keep your original menu on mobile, leave the this field blank. If you do not enable the app on the live

Question 4

Why is my Smart Menu not showing up or showing incorrectly?

Accepted Answer

There are various reasons why Smart Menu is not showing up or showing incorrectly in a store. Please read these cases and check the following solutions.

Haven't selected the correct menu to replace

Smart Menu works by replacing the whole theme's menu. Hence, if you use "Manual - Replace menu from Shopify" method, please make sure to select your main menu to be replaced in Step 2: Add & Design Please make sure that you enable the app on the live theme. If you don't, the app can't get data from your Shopify and it will show "List is empty".

Theme splits main menu into 2 parts

Some themes have options to split the menu to 2 different part. That makes Smart Menu can't replace the whole menu. Example: Impulse theme There are 2 solutions:

Go to your theme settings and find an option to change the header layout, make the menu not split, then Smart Menu can replace it. (eg. Logo center, menu below)
Hide your logo in theme and add your logo as a menu item in Smart Menu.

There's no menu item in your theme's menu

In case you use "Manual - Replace menu from Shopify" method, make sure the menu you selected have some

Question 5

List Shopify themes integration

Accepted Answer

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

Question 6

Column Width - Adjust width of menu items

Accepted Answer

The submenu item's width is divided into 12 in total. The Column Width option helps to adjust the number of columns which an item occupies in total of 12 columns. You can find the Column width option in the item editor on the left panel Or hover on that item in the preview panel, and click on ↔ button

This item will have the width = exactly the column width you set.
When the total of items' columns in a row exceeds 12, the next item will be dropped to second row.
If all items set Column width as Automatic, they will be equally distributed on the total of 12 columns. (For example: if a menu has 3 submenu items, this menu will divide place 3 items in 3 columns equally as 4/12).
If an item has a fixed column width (eg. 3/12), but other menu items are set as "Automatic", they will auto adjust their width to fit the remaining space on a total of 12 columns. (For example: if a menu has 2 submenu items and you set the width of first item to 8/12, then the latter will auto adjust width to 4/12).

|| For image, you can set a fixed Image width, but this image width can't exceed column width.

||| Column Width does not work if you enable Masonry feature. Read more about Masonry [here](htt

Frequently Read Articles

Browse All Categories