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:
- The element area on the left (1)
- The preview area in the middle (2)
- The element editing area on the right (3)
- The button area on the top (4)
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
and you may drag the element up and down to adjust its position
- Click
and the element will be hidden in the preview area in the Admin; click
and the element will reappear in the preview area
- Click
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 to move the element upwards and
downwards, and click
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
- Bottom Navigation | Shopper App
- Text Element | Shopper App
- Product Slider Element | Shopper App
- Category Element | Shopper App
- Product List Element | Shopper App
- Overall Color Settings | Shopper App
- Top Navigation | Shopper App
- Announcement Bar Element | Shopper App
- Member Element｜Shopper App
- Navigation Grid with Icon Element｜Shopper App
- Slidable Banner｜Shopper App
- Image with Text List Element｜Shopper App
- Video Element｜Shopper App
- Promotions Element｜Shopper App
- Discount Code Element｜Shopper App
- Social Media Element｜Shopper App
Comments