Navigation Grid with Icon Element｜Shopper App

In the Admin, go to [Mobile App Management] > [App Design] > [Current Template] > [Simple Template] and click Set up to edit the "Navigation Grid with Icon" element.

 

Step 2

Click Navigation Grid with Icon on the left, or click the "Navigation Grid with Icon" element in the preview area to edit icons. In case the element was once deleted, click ⊕ Add an element to add the element back to the app.

• Click and drag the  icon to move the element's position up and down. Click the and  icons to hide/ remove the element.
• Click the and icons in the Preview area to move the element up and down. Click the icon to remove the element.

*Note: If you haven't set any icons, the "Navigation Grid with Icon" element will display the icons of "My Orders" and "Customer Service" by default. You can add at most one Navigation Grid with Icon element.

 

Step 3

Edit the settings on the right.

i. Display Title toggle

• The display title toggle is switched off by default.
• When the toggle is switched on, you can see the default title "Common Services." You can customize the text of the title.
  

 

ii. Column

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

 

iii. Icon Size

You can choose from sizes small, medium, to large.

 

iv. Release Schedule

This is a non-obligatory field. Click the "calendar" icon to the right of the field to set the start and end time for your Navigation Grid.

 

Step 4 

Click Add Icon to add more icons. You can add up to 10 icons.

 

Step 5

You can set the content of the newly added icons. There are two options available, which are "Default icon list" and "Customized icon list."

 

i. Set icon content by Default icon list

A. Select icon content

Click to open the drop-down menu under "Select icon content" and select the icon to be added. You can select items such as Store Referrer, Store Pickup, Wish list, etc.

*Note:

Grayed-out icons cannot be selected. If an icon content is marked as "(added)," this icon content has already been added to the app and cannot be added again. If an icon content is marked as "(Not set)," this icon content hasn't been enabled yet. Please make sure to enable these icon content features accordingly to add them to your app. Methods to enable each icon content are as follows:

• Wish List: Go to the SHOPLINE Admin > [Apps] > [Apps Store] to install the feature.
• Store Information: If you have maintained the store information in ONE Omni-Channel, or have one or more Store Information records in the SHOPLINE Admin > [Mobile App Management] > [App Settings] > [Store Information Settings], then Store Information feature can be enabled.
• Store Referral: Go to the SHOPLINE Admin > [Mobile App Management] > [App Settings] > [Store Information Settings] to enable the feature.
• Store Pickup: If you have the Retail POS plan and have installed the "Buy Online, Pick up In-store" app, the Store Pickup feature will be enabled.

 

B. Select icon picture

After setting the content, the system will default to "Default icon picture." 

You can also choose "Customized Icon Picture" and add a new image for modification. Click + add an image to add a picture that suits your brand's visual style.

 

ii. Set icon content by Customized icon list

A. Enter the icon title.

B. Choose the jump link. There are three types of Jump Link options available, "Categories, Promotions, and Custom URL."

• Categories
  For merchants who check "Categories," please click ⊕ Select a product category and choose the proper categories in the pop-up window. Upon confirmation, click Confirm. For more details about how to set a Product list element, please refer to this article.
  
  
  
• Promotions
  For merchants who check "Promotions," please click ⊕ Select a promotion campaign and choose your desired campaigns in the pop-up window. Upon confirmation, click Confirm. For more details about how to set a Promotions element, please refer to this article.
  
  
  
• Custom URL
  For merchants who click "Custom URL," please enter the link in the field. Note that the entered link must start with either "https://" or "http://".
  

C. Click + add an image to add an icon picture.

 

*Note: The "My Orders" and "Customer Service" icons support setting up Customzied icon list.

 

Step 6

When you finish adding the "Navigation Grid with Icon" element, you can click Save to save the changes. And once you finish editing the entire homepage, click Update and use to publish the changes to your app.