Image with Text List Element

ECSC.pngShopper_App_EN.png

When editing the app's home page, you can add the "Image with text" element to the app's home page to add the events or featured categories you want to promote and adjust the position of the elements.

 

1. Add an Image with Text List element

Step 1 

Proceed to SHOPLINE Admin > [Mobile App Management] > [App Design] and click the Settings button to enter the "Current Template" and set up the Image with Text List element. 

Screen_Shot_2022-11-07_at_10.14.56_AM.png

 

Step 2

Click the Add an element button.

Add_element_EN.png

 

Step 3

Select the element, then drag it to the middle of the preview section to set the position. Once the Image with Text List element is displayed in the preview, you have successfully added the video element. 

Screen_Shot_2022-12-22_at_1.13.00_PM.png

 

2. Editing the Image with Text List element

Step 1

Set the component title; it is set to display by default. When the toggle is switched on, enter the element title, and the title will be displayed at the top of the element.

Screen_Shot_2022-12-22_at_1.17.36_PM.png

 

Step 2

Set the display button; it is set to display by default. Enter the button text and jump link. Only links starting with https:// or http:// are supported. The button text will be displayed in the upper right of the element.

Screen_Shot_2022-12-22_at_1.19.57_PM.png

 

Step 3

Set the image width of the image list. The default display width is 160px. You can drag the slider to modify the image display width. The maximum width of the image is 351px, and the minimum width is 160px.

Screen_Shot_2022-11-07_at_11.55.51_AM.png

 

Step 4

Set whether to display the title and description text of the list. They are set to display by default.

The title and description text will appear below the image.

Screen_Shot_2022-12-22_at_1.22.24_PM.png

 

Step 5

Click the arrow icon to expand the Image with Text List to set up. 

Screen_Shot_2022-12-22_at_1.23.42_PM.png

 

Step 6

Click add an image to upload an image. The image width is the customized list image width.

 

Step 7

Enter the component title and button text to be displayed; this field will not appear if both the "Component Title" and "Display button" toggles above are switched off.

Screen_Shot_2022-11-07_at_12.04.08_PM.png

 

Step 8

Enter a jump link. Only links starting with https:// or http:// are supported.

Screen_Shot_2022-11-07_at_12.05.43_PM.png

 

Step 9

Three images are displayed by default. Click Add Image and Text List to add more images with text lists. A maximum of 20 images are supported. 

Screen_Shot_2022-12-22_at_1.25.05_PM.png

*App display effect: The app will display the images of Image List 1 and Image List 2 by default, a bit of the image of Image List 3. Customers can swipe right to view more images.

 

Step 10 

You can move the element position or delete the element in the element list area on the left, the preview area in the middle, or the bottom of the Image with Text list on the right.

Screen_Shot_2022-12-22_at_1.26.25_PM.png

 

Step 11

Once you have confirmed the settings are complete, click Save to save the element changes. If you have completed all editing on the app home page, click Update to publish your edits. 

Screen_Shot_2022-12-22_at_1.28.14_PM.png

 

 

 

 

Have more questions? Submit a request

Comments