Image Element | Advanced Page

ECSC.png

When adding/editing an advanced page, you can add images to your pagination by adding the "image element" and dragging and dropping them to the specified layout position. You can also set images as the slidable banner, or set them to full-width images to increase attention and visual impact.

 

1. Add a new element

Click on the Build menu on the left. Drag and drop the element you want to add to the designated region.

_____2017-02-21___3.42.12.png

 

When dragging the element to the editing workspace, the region where the element can be dropped will be highlighted in green.

TC_1_step3.gif

 

 

2. Add images and upload mobile images

A. Add Images

You can add a photo or multiple photos/banners slideshow.

Upload the photos you want to display in the left pop-up window and change the display order by dragging.

Screen_Shot_2022-07-29_at_3.42.27_PM.png

 

B. Upload mobile image

After uploading the image, you can also click Upload on the mobile version to upload other images, which will overwrite the original image. If you want to replace the uploaded image, click Upload on the corresponding device again.

Screen_Shot_2022-07-29_at_3.45.14_PM.png

 

If you are not satisfied with the uploaded image, click the delete button on the image. The image will be applied to another device version. For example, if the image is deleted from the mobile version, the mobile version will automatically apply the image of the desktop version.

Screen_Shot_2022-07-29_at_3.47.16_PM.png

 

The following are the images of the online store in web version and mobile versions.

Desktop Version

image_widget_desktop.gif

Mobile Version 

 image_widget_mobile.gif

 

 

3. Further setup

A. Set it as Slidable Banner

The element will automatically be displayed in a slidable banner if you upload multiple images. Drag the cross icon at the upper left of the image block to change the order of the images. The top image will be displayed first.

Screen_Shot_2022-07-29_at_4.19.44_PM.png

 

B. Add URL link and image alt text 

You can set different landing page links for each image. Users will be directed to the linked page you set when they click on the image. You can also add the Alt attribute to each image, which benefits your store’s SEO and make the image appear on the "Image" search result page. For more information, please refer to the Image Alt tag.

 

Screen_Shot_2022-07-29_at_4.35.36_PM.png

 

C. Set as a full-width image 

You can switch between full-width and normal-width for slideshows by clicking on the image, and checking the box "Show full-width image" under Settings > Image Settings.

Screen_Shot_2022-07-29_at_4.42.42_PM.png

   

4. Image size recommendation

  • Web version images: Click here to read the suggested image size.
  • Mobile version images: If you want to present a full-screen image for a strong visual impact, the recommended image ratio is 16:9, and the size is 1080px (width) x 1920px (length). If you want to guide customers to continue browsing, the recommended image ratio is 4:3 , with the size of 1080px (width) x 1440px (length).

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments