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.
When dragging the element to the editing workspace, the region where the element can be dropped will be highlighted in green.
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.
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.
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.
The following are the images of the online store in web version and mobile versions.
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.
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.
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.
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).