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:
- Prepare banners for desktop & mobile
- Upload image
- Replace image
- Delete image
- Drag to reorder in the carousel
- Storefront display
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
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: