• Topic 主题 トピック Topic Topic
  • Sign in

Shopper App: App Design

 

Shopper App provides a selection of generic app-building templates, combined with a flexible operation interface, making the app-building process simple and efficient. After updating the theme, it can be synchronized to the app end in real time.

 

In This Article

 


 

Top Navigation

After installation, access the design panel from Channels > Shopper App > App Design > Design.

The top navigation bar will be applied to every page in the app. You can choose whether to upload your store logo image or insert the store name.

1-Shopper App_ App Design.png

 


 

Notice Board

Notice Board is situated beneath the top navigation bar. It is undeletable, and only one notice is allowed per store. You have the flexibility to design the background and text color of the board, as well as schedule the notice.

2-Shopper App_ App Design.png

 

You can also hide the notice whenever you need to.

3-Shopper App_ App Design.png

 


 

Body Part

The body part is made of 3 types of components: 

  • Slideshow: Click on Slideshow to set the auto-switch interval, the dimension, and schedule the release time according to your own preferences; also, Image settings and Video components to edit the file details.
    4-Shopper App_ App Design.png

  • Collection: Open Collection to adjust collection image type, number of columns, title, display, alignment, color, and release schedule. You can also access each collection to edit their respective details.
    5-Shopper App_ App Design.png

Note: The image and category name would be retrieved from SHOPLINE admin if no adjustment is made to each category.

 

  • Product list: Tap on Product list to access detailed settings of the component. You can choose which product to display, set display amount, price, and release schedule.
    6-Shopper App_ App Design.png

 


 

Bottom Navigation

The bottom navigation will also be displayed on all pages while browsing the app. 

You can make some changes to the components by clicking on the dropdown icon beside Bottom navigation

Components / Actions Rename Reorder Hide
Shop
Collections
Search
Bag
Wishlist
My account


7-Shopper App_ App Design.png

 


 

Launch 

Go to the upper right corner and hit Apply, you are all set!

 

Have more questions? Submit a request

Comments