Upload mobile size banner


Finding photos that work well on mobile and desktop is one of the hardest setup challenges with modern responsive designs. A new feature of upload mobile size banner is now launched. Allow customizing the banner size displayed on mobile devices. In order to increase the attractiveness of your store and turn up the traffic of mobile users.

This article will guide you through the below steps:

A. Prepare banners for desktop & mobile

Suggested mobile banner size:

  • For normal vertical banner, which allow customer to see a little bit of page content, recommended ratio is 4:3 size: 1080px (w) x 1440px (h)
  • For full-screen vertical banner which able to present an impact of your store, recommended ratio is 16:9 size: 1080px (w) x 1920px (h)

B. Upload image

1. Add photo

Enter advance page, drag the image widget and upload desktop version image



2. Hover to upload mobile image

Edit existing image will be the same flow, mobile and desktop display the same image.

Hover on mobile image and upload a mobile size image



3. Image URL and ATL tag

Click the "expand" icon and input image URL and ATL text


4. Notice

Please note that if the CSS has been customized, should make sure the CSS setting when installing this feature.


C. Replace image

The uploaded image can be replaced with a new image by clicking "add photo" button.



D. Delete image

Uploaded image can be deleted by the trash icon on the left. If mobile version image is deleted, it will be replaced by desktop image.



E. Drag to reorder in the carousel 

If there are multiple images, will display as carousel. Simply drag the icon to reorder the images.

The image on top will display as the first image.



F. Storefront display

Upload different sizes of desktop and mobile banner display as below: 





Have more questions? Submit a request