Sidebar Navigation｜Shopper App

You can set featured links in the sidebar, such as promotions, product categories, blog posts, or even other external links, providing customers with convenient access to these pages.

 

This article will cover the following:

• Overall Settings
• Section Settings
  • Top Section
  • Middle Section
  • Bottom Section
• Notes

 

1. Overall Settings

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

*Note: This setting will apply to both Simple Template and Mall Template. We recommend selecting the template currently in use.

 

In the left-side element panel, click Sidebar Navigation to configure the following settings.

 

i. Display sidebar navigation

Enable this option to show the sidebar navigation in the app. Customers can click thebutton in the top left corner to open it.

*Note: The sidebar navigation is fixed to the left side of the top navigation, and the button color matches the font color you set in [Theme Settings] > [Color] > [Top Navigation].

 

ii. Apply Bottom Navigation color settings

Enable this option to apply the background and text colors of the bottom navigation to the sidebar navigation; If disabled, the sidebar will default to a white background with black text.

*Note: If your Shopper App platform version is below 1.13, the sidebar text color will match the font color you set in [Theme Settings] > [Color] > [Top Navigation]; If you set it to a light color, the system will automatically adjust the font to black on the app side to ensure proper display.

 

iii. Title text alignment

Set the alignment of the title text for the middle and bottom sections. You can choose to align it left or center.

 

iv. Release Schedule (optional)

If you have set a release time, the sidebar navigation will be scheduled to display in the app.

 

2. Section Settings

i. Top Section

The top section displays the logo, sign up / log in button, and system / custom tabs, now supporting up to 4 tabs.

*Notes:

• The sign up / log in button color matches the color you set in [Theme Settings] > [Color] > [Button].
• If the customer is already logged in, the sign up / log in button will be hidden.

 

A. System default tab

The 12 supported tabs are "Coupons", "Latest Events", "My Orders", "History", "All Products", "Coupon Center", "Wishlist", "Cart", "Message", "Customer Service", "Store Information", and "Promotions". The first 4 tabs are enabled by default, you can perform the following actions:

• Click theand buttons on the right to show or hide it.
• Click thebutton on the right to set the text and icon image.
• Click thebutton on the left to adjust the order.

 

*Notes:

• If you select the "Latest Events" tab, you will need to set up Promotions & Reward. The system will automatically display the latest campaign created in the store within the promotion period; you can also manually select a specific campaign.
  
  
• If you select the "Coupons" tab, you will need to enable the Display Coupon in Member's Account feature.
• If you select the "Coupon Center" tab, you will need to add coupons in the Coupon Center.
• If you select the "Store Information" tab, you will need to add store details in the Store Information Settings.

 

B. Custom tab

Click + Custom to add a custom tab.

 

You can customize the text, icon image, and jump link.

 

ii. Middle Section

The middle section is displayed below the top section, with support for two styles: "Text" and "Image & Text".

*Note: The "Categories" group only supports the "Text" style.

 

A. System default group

The "Categories" group is displayed by default, the system will automatically access the product categories you have set in the online store. You can perform the following actions:

• Click theand buttons on the right to show or hide it.
• Click thebutton on the right to enter the group name.
• Click thebutton on the left to adjust the order.

 

B. Custom group

Click + Custom group to add a custom group. The 14 supported link destinations are "All Products", "Categories", "Selected Category", "Coupon Center", "My Orders", "Message", "Customer Service", "Promotions", "Store Information", "Wishlist", "Cart", "Recently Viewed", "Custom URL", and "Promotions".

*Note: Up to 5 groups can be set.

 

You can customize the group name and jump link.

 

Click + Add content to set the content name and jump link.

*Note: Up to 8 pieces of content can be set.

 

iii. Bottom Section

The bottom section is displayed below the middle section, it presents information related to membership and app settings. This section cannot be hidden or deleted.

 

A. Membership

Supports four types of content: "Membership Card", "Member Profile", "Member Benefits", and"Referral Reward". You can perform the following actions:

• Click theand buttons on the right to show or hide it.
• Click thebutton on the right to enter the group name, and show or hide the content.
• Click thebutton on the left to adjust the order.

*Notes:

• If you have not set any member benefits, the "Member Benefits" option will not be displayed.
• If you select the "Referral Reward" option, you will need to add App Member Referral Campaign.

 

B. About

Supports three types of content: "Terms and Conditions", "Privacy Policy", and "Current Version". You can perform the following actions:

• Click theand buttons on the right to show or hide it.
• Click thebutton on the right to enter the group name, and show or hide the content.
• Click thebutton on the left to adjust the order.

 

C. Setting

Supports three types of content: "My Address", "Language", and "Push settings". You can perform the following actions:

• Click theand buttons on the right to show or hide it.
• Click thebutton on the right to enter the group name, and show or hide the content.
• Click thebutton on the left to adjust the order.

 

3. Notes

• After completing the setups, click Save in the top right corner. Once you confirm the content is correct, click Update and use to publish.