Add Sections in Mobile Menu app

Add Sections in Mobile Menu app


Mobile Menu app supports 12 types of section:




Menu

Use this section to add your Links list.

Section settings:


  • Section title (optional): Enter a title for the section. This title will be displayed in the menu.
  • Disable title: If you don't want to show title, recommend turning on this option.
    • Enable collapse: Make this section collapsible.
      • Collapse submenus by default: When accessing the menu, those submenus will be collapsed automatically.
  • Enable animation: Add a slide-down animation when opening submenu


Menu item
To add links to this section, go back and click ⊕ Add Menu item under Menu section.



  • Show icon: add an icon to the left of menu title. Type an icon name to search for the suitable icon.
  • Title: enter a title for the menu item. This title will be displayed in the menu.
  • Text alignment: align text within menu width.
  • Link: click the Link field, and then select a link type or enter a website address for an external website (similar to Shopify navigation).
    To create an email link, use the custom link: mailto:youremail@example.com
  • Open link in new tab: enable this option to open your menu link in a new tab.
  • Add badge: add a badge/label on the right side of this menu item:

To add submenu, hover on a menu item and click on the plus button:


Note: Need to click on the indicator (⌵) to open submenu. Click on title will direct to the attached link.



Collection List

Use this section to add your Collection image.

Section settings:


  • Section title (optional): Enter a title for the section. This title will be displayed in the menu.
  • Disable title: If you don't want to show title, recommend turning on this option.
    • Enable collapse: Make this section collapsible.
      • Collapse submenus by default: When accessing the menu, those submenus will be collapsed automatically.
  • Number of items on a row: set the number of columns which this section will divide into


Collection item
To add collections to this section, go back and click ⊕ Add Collection under Collection list section.



  • Collection: Search and select a collection to show up.
    There's no Title field in Collection. It'll auto take collection name as title. If you want to change the title, please add the Image with text section instead.
  • Collection layout: image is taken from the Featured Image in Shopify collection admin. Select position of image compared to the collection name.
  • Text alignment: align text within image width.
  • Add badge: add a badge/label on the top-right corner of the item
Image is taken from Collection Image in your Shopify collection admin. To change image, please go to your Shopify collection admin, or use Image with text section instead.



Product List

Use this section to add your products to menu.

Section settings:


  • Section title (optional): Enter a title for the section. This title will be displayed in the menu.
  • Disable title: If you don't want to show title, recommend turning on this option.
    • Enable collapse: Make this section collapsible.
      • Collapse submenus by default: When accessing the menu, those submenus will be collapsed automatically.
  • Number of items on a row: set the number of columns which this section will divide into


Product item
To add products to this section, go back and click ⊕ Add Product under Product list section.



  • Product: Type the product name to search and select. 
    Select a product will auto show its product image, product name and price, with the product link attached.
  • Product layout: Set the product image on top or on left of the product name.
  • Text alignment: Align text within product image width.
  • Add badge: Add a badge/label on the top-right corner of the item




Image with text

Use this section to add your Images.

Section settings:


  • Section title (optional): Enter a title for the section. This title will be displayed in the menu.
  • Disable title: If you don't want to show title, recommend turning on this option.
    • Enable collapse: Make this section collapsible.
      • Collapse submenus by default: When accessing the menu, those submenus will be collapsed automatically.
  • Number of items on a row: set the number of columns which this section will divide into


Image with text item
To add image to this section, go back and click ⊕ Add Image with text under Image with text section.



  • Image: There are 2 ways to insert your image:
    • Upload directly: (only available in Premium plan)
      Click on "Browse" button → Select image in your computer → Wait a few seconds for it to upload.
      Once the image is uploaded, you will see it under the upload field.
    • Paste image's URL: insert the link of your image
      You can upload an image to get its URL in your Shopify admin / Settings / Files / Upload file
      Once the image is uploaded, you will get a URL alongside its entry → Copy that URL and paste into "Image" field.
  • Title: Enter a title for the menu item. This title will be displayed with image in your menu. Title position depends on Image layout.
  • Description: Show under title
  • Image layout: Select the image position compared to the title.
  • Text alignment: Align text within product image width.
  • Link: Click the Link field, and then select a link type or enter a website address for an external website (similar to Shopify navigation). The link will attach to image and title.
  • Open in new tab: Enable this option to open your image link in a new tab.



Image with text overlay (banner)

Use this section to add your Images with text overlay or Banner.

Section settings:


  • Section title (optional): Enter a title for the section. This title will be displayed in the menu.
  • Disable title: If you don't want to show title, recommend turning on this option.
    • Enable collapse: Make this section collapsible.
      • Collapse submenus by default: When accessing the menu, those submenus will be collapsed automatically.
  • Number of items on a row: set the number of columns which this section will divide into


Image with text overlay item
To add image to this section, go back and click ⊕ Add Image with text overlay under Image with text overlay section.



  • Image: There are 2 ways to insert your image:
    • Upload directly: (only available in Premium plan)
      Click on "Browse" button → Select image in your computer → Wait a few seconds for it to upload. 
      Once the image is uploaded, you will see it under the upload field.
    • Paste image's URL: insert the link of your image
      You can upload an image to get its URL in your Shopify admin / Settings / Files / Upload file
      Once the image is uploaded, you will get a URL alongside its entry → Copy that URL and paste into "Image" field.
  • Title: The Title will show on Image. The position can be changed in Content position.
  • Description: Show under title
  • Content position: Select the Title position compared to the image.
  • Content spacing: Adjust the space (padding) from Title to the edge of Image.
  • Text color: Change the color of Title and Description
  • Overlay: Adjust the opacity of the overlay (0.1 = 10%)
  • Overlay color: Change the color of the overlay
  • Link: Click the Link field, and then select a link type or enter a website address for an external website (similar to Shopify navigation).
  • Open in new tab: Enable this option to open your image link in a new tab.
Image with text overlay always places the Title on the Image. If you want to move the Title to outside Image, please use Image with text section instead.



Logo

Use this to add your logo to mobile menu.



  • Logo image: There are 2 ways to insert your logo:
    • Upload directly: (only available in Premium plan)
      Click on "Browse" button → Select image in your computer → Wait a few seconds for it to upload. 
      Once the image is uploaded, you will see it under the upload field.
    • Paste image's URL: insert the link of your image
      You can upload an image to get its URL in your Shopify admin / Settings / Files / Upload file
      Once the image is uploaded, you will get a URL alongside its entry → Copy that URL and paste into "Logo image" field.
  • Set width of your logo: Adjust the width of your logo image in pixel (eg. 30px). The ratio will be remained.
  • You can only add 1 logo section in your menu.
By default, logo is attached with your homepage link.


Search Box

Add a Search box to your mobile menu.



Users can type a keyword on the search box and it will direct to the Search results page of your theme.



Account



Add Login & Register item to your menu.
When customer logged in: 
  1. "Login" changes to "Logout"
  2. "Register" (or Signup) changes to "My account"
NOTE: To make those changes work, please follow instructions below:
  1. Go to Shopify admin > Online stores > Themes > Edit code
  2. In Layout, open theme.liquid
  3. Find the </head> tag and add this script below to before the </head>:
  1. <script>
  2.     QikifyMobileMenu = {
  3.       isCustomerLoggedIn: {% if customer %}true{% else %}false{% endif %},
  4.     };
  5.   </script>
  1. Save & Done.

If you leave the "Custom URL" field blank, by default it will be:
  1. URL of Login: .myshopify.com/account/login
  2. URL of Register (Signup): .myshopify.com/account/register
  3. URL of Logout: .myshopify.com/account/logout
  4. URL of "My account": .myshopify.com/account
If your theme has a different link to one of those item, please add it to "Custom URL" field.


Custom HTML

Use this if you need a custom HTML block.



Enter your HTML code in "Custom HTML code" field.
If you don't have much experience in HTML, you can use some tools to generate HTML, for example: Word to HTML online converter.



Contact Form

Add a contact form in your menu.



This Contact form sends all submissions to the Customer email address of your store. You can change the customer email address in your Shopify admin → Settings → General.

Fields of this form is taken from the default Contact form of Shopify. To customize this form, please read this article.



Google Maps

Add a google maps on your mobile menu.



Please refer to this site to generate google maps iframe. Enter your address for maps and copy the iframe below, then paste to the Google maps iframe field.





Social Links

Add some social icons to your mobile menu.



Remember to add the full link with "http://..."
If you want to add a custom social icon, please contact us for help.

    • Related Articles

    • Add Mobile Menu app to your store

      After creating your menu in Mobile Menu app (not Smart Menu), you can go to Display settings tab to: Replace theme menu: select a current menu on your store to be replaced with Mobile Menu OR Add an extra menu separately with floating button, not ...

    • Style Settings for Mobile Menu app

      Head to Display settings tab, you'll find options to style your mobile menu in Custom Style: Custom Style Menu box text alignment Align all content on menu, including section title, links list, social icons... For title in each product or image, ...

    • How to show Smart Menu on your store

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

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

      There are various reasons why Smart Menu is not showing up or showing incorrectly on a store. Please read these cases and check the following solutions. Loading time Our server is placed in the US, therefore, there might be a delay in loading time ...

    • Frequently Asked Questions for Smart Menu

      What is the difference among Free, Basic and Premium plans ? Please see the comparison table of three plans here. Can I downgrade to Free/Basic plan after upgrading? Yes you can. To cancel paid plans, please go to "Profile" page > click on "Cancel ...