Navigation Grid with Icon Element｜Shopper App

Go to SHOPLINE Admin > [Shopper App Management] > [App Design] > [Homepage Design] > [Current Template]. Click Set up to enter the app page editor.

 

You can also go to [Shopper App Management] > [App Design] > [Member Center] and click Set up to enter the app page editor.

 

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: You can add multiple Navigation Grid with Icon elements.

 

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.

 

2. Set up the icon content

Step 1

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

 

Step 2

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 the "Select icon content" dropdown to choose the icon to add. Available options include: Coupon Center, Store Pickup, Store Referrer, Store Information, My Address, Customer Service, Messages, My Orders, Wishlist, and Recently Viewed.

*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 > [Shopper App Management] > [App Settings] > [Store Information Settings], then Store Information feature can be enabled.
• Store Referral: Go to the SHOPLINE Admin > [Shopper 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

• 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. Add an image

Click + add an image to add an icon picture.

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

 

Step 3

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.