When editing the homepage of the app, you can add the desired promotional activities or featured catalogs by adding an "Image with Text List" element (or "component" as you'll see in the following article). You can also adjust the position of the element wherever necessary.
In this article, you will be introduced to:
1. Add an Image with Text List element
Proceed to the SHOPLINE Admin > [Mobile App Management] > [App Design] > [Current Template] > [Simple Template] and click Set up to enter the page and start configuring the Image with Text List element.
Click on ⊕ Add an element (there are two entries on the page, as shown below).
Select the "Text and Image List" component and drag it to the blue-background Preview Area in the middle where it says "Place the element here." Once the message "Confirm placement" appears, you can consider the addition successful.
2. Edit the Image with Text List element
Set the "Component title." The "Component title display" toggle on the right side is switched on by default. When it is switched on, you can fill in the Component title fields, which will be displayed at the top of the element, as indicated by the arrow below.
Set the "Display button." This toggle on the right side is switched on by default.
i. Fill in "Button text" fields
Upon filling in the fields, the content will display at the top right of the element.
ii. Fill in the "Jump Link" field
- Set the "Jump Link." The system defaults to "Custom URL," and currently, only links starting with "https://" or "http://" are supported.
- If you choose Categories, please click on ⊕ Select a product category. In the pop-up window, choose the appropriate category, and then click Confirm.
- If you choose Promotions, please click on ⊕ Select a promotion campaign. In the pop-up window, choose the appropriate category, and then click Confirm.
Set the "List image width" for the Image with Text List. The default display width is 160px, but you can adjust the image display width by dragging the slider. The maximum width for the image is 351px, while the minimum width is 160px.
Set whether to display the "list title" and "description text" of the image. The display toggle is switched on by default.
The list title and description text will appear at the bottom left of the image.
The "Release Schedule (optional)" fields are not required. Click on "Select date" or the "calendar" icon on the right side of the field to choose a date. Upon selecting the date, click OK to complete the process.
Click on an Image with Text List in the Element Area on the left and the corresponding fields for setup will appear in the Editing Area on the right. You can edit the image the way you desire here.
Click on add an image within the red box in the image below to upload a picture. The width of the picture is subject to the custom width specified for the width of the Image with Text List.
Enter the "Component title" and "Button text" to be displayed. Note these fields will not appear if both the aforementioned "Display list title" and "Display description text" toggles are switched off.
Set "Jump Link." See Step 2.
The app is set to display three images by default. Click on ⊕ Add Image with Text List (X/20) to add more images. You can add up to a maximum of 20.
*Note: The app will display "Image with Text List 1" and "Image with Text List 2" by default. Only part of "Image with Text List 3" will show on the screen. Customers can swipe right to view more images.
If you need to move or delete a component, you can perform the related actions in the left Element Area, middle Preview Area, or at the bottom of the Edit Area on the right (as indicated by numbers 1 to 3 below).
Once you have completed the setup, click Save to save the changes on the element. If you have completed all editing on the homepage of the app, click Update and use to publish your edits.