Simple Template Settings | Shopper App


Simple Template is a fully customizable homepage layout that offers a wide range of elements to choose from. You can personalize and modify it to suit your specific design requirements. 

If you want your app to showcase a more personalized design and distinguish itself from the online store, "Simple Template" is recommended. If you think the content of your online store is suitable for your app's homepage and don't feel like making an extra effort to design the app, then "Mall template" is recommended instead. 


Simple Template is primarily divided into four sections:



1. Element area

When you first enter the Simple Template page, Top Navigation, Member Element, Navigation Grid with Icon Element, and Bottom Navigation are already pre-set as default. Top and Bottom Navigation cannot be deleted, while the other two can be deleted or repositioned. Clicking on the element allows you to set up the element in the editing area on the right, or you can adjust the element order, hide, or delete them from there. 


A. As you hover your mouse pointer over the element that needs adjustment, the configuration icons will appear as follows. 

  • Click and hold Screenshot_2023-05-26_at_12.46.50_PM.png and you may drag the element up and down to adjust its position
  • Click Screenshot_2023-05-26_at_12.48.24_PM.png and the element will be hidden in the preview area in the Admin; click Screenshot_2023-05-26_at_12.48.34_PM.png and the element will reappear in the preview area 
  • Click Screenshot_2023-05-26_at_12.51.02_PM.png to delete the element

B. Add an element

Click Add an element to enrich your app layout. Currently, Simple Template supports 13 elements to satisfy your design needs. 


Click and hold the element, say "Member Element," and then drag it straight to the preview area. Drag it to the blue area and hold on a bit. Once the reminder "Place the element here." is changed to "Confirm placement," the element can be positioned there successfully. 




2. Preview area

In the process of setting up Simple Template, you can directly experience the design effect from the preview area. The effects seen here are the same as the actual display on the app.

Upon clicking a certain element in the preview area, you'll see three buttons as shown in the image below. Click  Screenshot_2023-05-26_at_1.02.09_PM.png to move the element upwards and  Screenshot_2023-05-26_at_1.02.15_PM.png downwards, and click  Screenshot_2023-05-26_at_12.51.02_PM.png to remove the element.



3. Editing area

After selecting an element in the element or preview area, the corresponding editing settings for that particular element will appear on the right side. Fill in the information based on the options provided.



4. Button area

Clicking on the drop-down menu on the left of the button area allows you to switch between pages. On the right side are the "Save" and "Update and use" buttons: if you don't want to sync your design to your app after you're finished, you may click Save, and if you want to, then click Update and use

If you haven't published anything before this, upon setting up, you need to go to [Mobile App Management > App Publish Settings] to publish your content. The changes will take effect on the app after successful publishing. After the initial publishing, the content will be effective shortly after you click on Update and use

*Note: If the element you're configuring is the latest-updated element, it will only be effective after you update your app to the most recent version. 





Read more






Have more questions? Submit a request