All about Item Layout


            By default, item layout of all menu items are set as "Text only" when first created.
            Click "Edit" button on the menu item you want to modify.



            • Title: enter a title for the menu item. This title will be displayed in the menu.

            • Disable link: enable this option if you don't want to attach any link to this menu item.

            • 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 format mailto:youremail@example.com

            • Open link in new tab: enable this option to open your menu link in a new tab.

            • Display as heading menu item: make the menu item bolder and have an underline below.

            • Item content alignment: align text within column width.

            • Column width: set the fraction of menu's space this submenu item will take up to
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width.

            • Add badge: add a badge/label on the top-right corner of this menu item. Read more about this feature in Badge.
              (This option is available in Premium plan only)

            • Hide on desktop: enable to hide this item on desktop menu and only show in mobile menu (also hide all submenus of this item)

            • Hide on mobile: enable to hide this item on mobile menu and only show in desktop menu (also hide all submenus of this item)

            You can change font and color of menu item in Style & Advanced settings. This style will apply globally to all menu items.
            If you want to customize the style of an individual item, please read this instruction.

            If you want to customize this menu item only and not to affect other items, you can use Custom HTML instead of Text only.




            Text & Icon

            You can add an icon to the left of menu title by choosing Item layout as Text & Icon.
            Click "Edit" button on the menu item you want to modify > Select "Text & Icon" in Item layout.



            • Title: enter a title for the menu item. This title will be displayed in the menu.

            • Icon: type an icon name to search and select to display it on the left of the title.
              Our app uses the free library from Fontawesome, you can click here to find your icons.

            • Disable link: enable this option if you don't want to attach any link to this menu item.

            • 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 format mailto:youremail@example.com

            • Open link in new tab: enable this option to open your menu link in a new tab.

            • Display as heading menu item: make the menu item bolder and have an underline below.

            • Item content alignment: align text within column width.

            • Column width: set the fraction of menu's space this submenu item will take up to
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width.

            • Add badge: add a badge/label on the top-right corner of this menu item. Read more about this feature in Badge.
              (This option is available in Premium plan only)

            • Hide on desktop: enable to hide this item on desktop menu and only show in mobile menu (also hide all submenus of this item)

            • Hide on mobile: enable to hide this item on mobile menu and only show in desktop menu (also hide all submenus of this item)

            We don't support custom icons. If you want to use your own icon, please convert it to image and use Item Layout as Image instead.

            You can change font and color of menu item in Style & Advanced settings. This style will apply globally to all menu items.
            If you want to customize the style of an individual item, please read this instruction.




            Product

            You can add a Product as a menu item in your menu.
            Click "Edit" button on the menu item you want to modify > select "Product" in Item layout.



            • Product: type a product name to search. 
              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.

            • Open link in new tab: enable this option to open the product link in a new tab.

            • Item content alignment: align product title and price within column width.

            • Column width: set the fraction of menu's space this product will take up to
              (Note: if set product image on top, the image's width will be equal to column width)
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width.

            • Add badge: add a badge/label on the top-right corner of this product. Read more about this feature in Badge.
              (This option is available in Premium plan only)

            • Hide on desktop: enable to hide this product on desktop menu and only show in mobile menu

            • Hide on mobile: enable to hide this product on mobile menu and only show in desktop menu

            Product can't have submenu items inside it.

            You can change font and color of product title and price in Style & Advanced settings. This style will apply globally to all menu items.
            If you want to customize the style of an individual item, please read this instruction.




            Collection

            Click "Edit" button on the menu item you want to modify.



            • Collection: Type the collection full name to search for it.
              There's no Title field in Collection. It'll auto take collection name as title. If you want to change the title, please change Item layout to "Text only".

            • Collection image position: image is taken from the Featured Image in Shopify collection admin. Select position of image compared to the collection name.
              (If you want to use a different image, please use Item layout as Image).

            • Open link in new tab: enable this option to open your menu link in a new tab.

            • Display as heading menu item: make the menu item bolder and have an underline below.

            • Item content alignment: align text within column width.

            • Column width: set the fraction of menu's space this submenu item will take up to
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width.

            • Add badge: add a badge/label on the top-right corner of this menu item. Read more about this feature in Badge. (This option is available in Premium plan only)

            • Hide on desktop: enable to hide this item on desktop menu and only show in mobile menu (also hide all submenus of this item)

            • Hide on mobile: enable to hide this item on mobile menu and only show in desktop menu (also hide all submenus of this item)

            You can change font and color of menu item in Style & Advanced settings. This style will apply globally to all menu items.
            If you want to customize the style of an individual item, please read this instruction.




            Image

            You can add an image as a menu item by choosing Item layout as "Image".
            Click "Edit" button on the menu item you want to modify > select "Image" in Item layout.



            • Title: enter a title for the menu item. This title will be displayed with image in your menu. 
              Title position depends on Image position.

            • 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 "Background image" field.

            • Image position: select the image position compared to the title. If you don't want to show the title, choose "No text, image only" option.

            • Image width: set the size of the image in pixel. But image width can't exceed column 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 format mailto:youremail@example.com
              The link will attach to image and title.

            • Open link in new tab: enable this option to open your menu link in a new tab.

            • Display as heading menu item: make the title bolder and have an underline below.

            • Item content alignment: align title within column width.

            • Column width: set the fraction of menu's space this image will take up to
              (Note: if image position is set as "Above", "Below" or "No text", image's width will be equal to column width)
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width

            • Hide on desktop: enable to hide this image on desktop menu and only show in mobile menu (also hide all submenus of this item)

            • Hide on mobile: enable to hide this image on mobile menu and only show in desktop menu (also hide all submenus of this item)

            You can change font and color of title in Style & Advanced settings. This style will apply globally to all menu items.
            If you want to customize the style of an individual item, please read this instruction.




            Block items

            Block is a container of items, you can add multiple blocks in a row, giving you more controls to arrange items in mega menu.
            You can add a block then add items inside this block. 



            On mobile, the submenu items will ignore the Block and take the closest heading item as parent.
            For example: 



            If you enable "Edit on preview", you'll see a dot border around a block, and a black editor to edit this block:


            • Column width: set the fraction of menu's space this form will take up to
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width.

            You can change Column width of Block to have multiple blocks in a row.
            You can also change Column width of items in block to have multiple items in a block.


            • Hide on desktop: enable to hide this item on desktop menu and only show in mobile menu (also hide all submenus of this item)

            • Hide on mobile: enable to hide this item on mobile menu and only show in desktop menu (also hide all submenus of this item)




            Custom HTML

            You can add a custom HTML as a menu item by choosing Item layout as "Custom HTML".
            Click "Edit" button on the menu item you want to modify > select "Custom HTML" in Item layout.



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

            • Column width: set the fraction of menu's space this form will take up to
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width.

            • Hide on desktop: enable to hide this item on desktop menu and only show in mobile menu (also hide all submenus of this item)

            • Hide on mobile: enable to hide this item on mobile menu and only show in desktop menu (also hide all submenus of this item)




            Contact Form

            You can add a contact form as a menu item by choosing Item layout as "Contact Form".
            *(This option is available in Premium plan only)
            Click "Edit" button on the menu item you want to modify > select "Contact Form" in Item layout.



            • Title: enter a title for the contact form. This title will be displayed with form in your menu. 
              By default, this title is set as <h5> tag and how it display depends on your theme's style for <h5>.

            • Add translation for fields in form (optional)

            • Column width: set the fraction of menu's space this form will take up to
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width.

            • Hide on desktop: enable to hide this form on desktop menu and only show in mobile menu

            • Hide on mobile: enable to hide this form on mobile menu and only show in desktop 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.

            You can change font and color of title in Style & Advanced settings. This style will apply globally to all menu items.




            Google Maps

            You can add a google map as a menu item by choosing Item layout as "Google Maps".
            *(This option is available in Premium plan only)

            Click "Edit" button on the menu item you want to modify > select "Google Maps" in Item layout.



            • Google maps iframe: enter your maps iframe to show. 
              Please refer to this site to generate google maps iframe. Enter your settings for maps and copy the iframe below.


            • Column width: set the fraction of menu's space this form will take up to
              • Automatic: auto equally distributed on the total of 12 columns
              • Full-width: width will be equal to the width of menu box, other columns will be dropped to the second line.
              • For further instruction of width adjustment, please refer to this article: Column width

            • Hide on desktop: enable to hide this map on desktop menu and only show in mobile menu

            • Hide on mobile: enable to hide this map on mobile menu and only show in desktop menu

            Helpful?  
            Help us to make this article better
            0 0