Add Sections in Mobile Menu app


            Mobile Menu app supports 11 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 to turn on this option
            • 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 to turn on this option
            • 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 to turn on this option
            • 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 to turn on this option
            • 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 to turn on this option
            • 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.
            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.




            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.
            Updated: 18 Apr 2019 10:20 PM
            Helpful?  
            Help us to make this article better
            0 0