[Coming Soon] Navigation Grid with Icon Component

The "Navigation Grid with Icon" component displays the entrance menu for default Customer Services and customized services. You can adjust the content to show to customers on the app.*Note: The "Navigation Grid with Icon" component only displays the entrance menu the setting enabled by merchants. "My Orders" and "Customer Service" icons are not editable, and merchants can only adjust the display sorting 


1. Feature display

Edit Method 1

Select the "Navigation Grid with Icon" on the editing page. When moving the cursor over the component, you will find the following button


  • Click and drag theimage__1_.pngicon to move the position up and down. 
  • Click on the image__2_.png icon. The black icon means the component is displayed. When it's grey, the component will be hidden.
  • The black image__3_.png icon means you could delete the component and the grey icon means it is not deletable.


Edit Method 2

Click the image__4_.pngimage__5_.png icon in the preview area to move the component up and down.



2. Display settings

i. Display title

  • The display title toggle switch is off by default.
  • When the switch is turned on, the default title is "Common Services".display_setting.png

ii. Row

  • You can select the number of columns to display. For example, when you set up 8 navigation grids to display in 4 columns, the app will display them in two rows.
  • Move the slider to change the number of rowsRow.png


3. Edit content

i. Fixed icons

"My Orders" and "Customer Service" are fixed icons and cannot be deleted. You can only rearrange their orders. 


ii. Default icons

Click Add Icon.


Select Default icon list for icon content.


Select the icon content. You can select to show the entrances for store information, wish list, store pickup, etc. 


After selecting the content, you can either use the default icon image, or customize your own icon image to suit your brand image.



iii. Customized icon

  • Click Add Icon.add_icon.png
  • Select Customized icon list under "Icon Content Setup".icon_customized.png
  • Enter the icon title, the jump link, and the icon picture. icon_title.png


Click Save and Update on the top right to finish editing.





Have more questions? Submit a request