In Maison, there are no strict rules for image sizes. You can upload images in different dimensions depending on your content and design.
However, for the best display quality and more consistent layouts, this article recommends image sizes based on the Maison demo layout and the aspect ratios used by the theme.
On this page
-
Image sizes for different sections & blocks
To achieve optimal results in Maison, we recommend using the following image sizes for the sections and blocks used in the Maison demo.Location of the image Demo usage Recommended image size Header group Mega menu – Promotion image 
The Maison demo uses a 3:4 portrait ratio for Mega menu promotion images. Recommended size: 1200 × 1600 pixels or larger. Use the same ratio for all promotion images in the same Mega menu. Overlay group Age verification image 
Maison displays this image in a 21:9 wide ratio on large screens. Recommended size: 2100 × 900 pixels. The image area is hidden on smaller mobile screens, so a separate mobile image is not required. Email signup modal image 
The Maison demo uses a wide image area with a 21:9 ratio. Recommended size: 2100 × 900 pixels. The image is displayed on larger screens and hidden on smaller mobile screens. Template group Slideshow 
The Maison demo uses a full-width Slideshow with approximately 750px desktop height and 500px mobile height. Recommended size: Desktop: 2400 × 1100 pixels. Mobile: 1000 × 1250 pixels. Maison supports a separate mobile image, which is recommended when the desktop composition does not crop well on mobile. Collection list 
The demo Collection list uses a 3:4 portrait ratio. Recommended size: 1500 × 2000 pixels. Keep all collection featured images in the same ratio for a consistent grid. Image with text 
The demo uses a large desktop image and a separate mobile image. This block can adapt to the source image ratio. Recommended starting point: Desktop: 1800 × 1350 pixels (4:3). Mobile: 1200 × 1500 pixels (4:5). Featured collections 
The Maison demo uses wide collection imagery, with a 5:4 landscape ratio working well for this layout. Recommended size: 2000 × 1600 pixels. Use the same dimensions for the normal and hover images. Before & after 
Both comparison images should use exactly the same dimensions so the slider aligns correctly. Recommended size: Desktop: 2000 × 1125 pixels (16:9). If you use separate mobile images, we recommend 1000 × 1250 pixels. Shop the look 
The Maison demo uses a large lifestyle image for product hotspots. Recommended size: Desktop: 1800 × 1200 pixels. If a separate mobile image is used, we recommend 1200 × 1500 pixels. Make sure the important products remain visible after cropping. Image banner – Single image 
For a full-width image banner similar to the Maison demo, recommended size: Desktop: 2400 × 1100 pixels. Mobile: 1000 × 1250 pixels. A separate mobile image is recommended when text or important subjects are positioned near the image edges. Image banner – Two images 
Maison can display up to two image blocks side by side on desktop and stack them on smaller screens. Recommended size for each image: Desktop: 1600 × 1000 pixels. Mobile: 1200 × 900 pixels. Keep both images the same size for a balanced layout. Shoppable media – Video cover image 
The Maison demo uses a 2:3 portrait ratio for Shoppable media. Recommended size: 1200 × 1800 pixels. Use the same ratio for every video cover image in the list. Blog article featured image 
The Maison demo displays article covers at a 4:3 ratio. Recommended size: 1600 × 1200 pixels. Keep all Blog featured images consistent to prevent uneven card heights. -
Image sizes for products
From Products in your SHOPLINE admin, you can upload product images. These images are used throughout Maison in product-related areas such as:- Product pages
- Featured collection
- Collection product lists
- Search results
- Recommended products
- Recently viewed products
- Shop the look product cards
- Quick view / Quick Add Modal
For general product images, we recommend:
2000 × 2000 pixels
A square 1:1 ratio is the safest choice when you want a consistent product grid across the storefront.
However, Maison's Product media can also use the ratio of the first product image, so portrait or landscape product photography can be used when it matches your store's visual direction.
Recommended guidelines:
Product image type Recommended size Standard product image 2000 × 2000 pixels Portrait product image 1600 × 2000 pixels Landscape lifestyle image 2000 × 1500 pixels Square detail image 1600 × 1600 pixels
Additional recommendations
For the best image quality and storefront performance:
- Use WebP when possible for photographic images.
- Compress images before uploading while keeping enough resolution for high-density displays.
- Avoid uploading extremely large images when the image is displayed only in a small card.
- Use consistent dimensions for images that appear together in the same section.
- Keep important subjects away from the outer edges when using Cover image fit.
- Use separate desktop and mobile images when the section provides both options and the composition needs to change between devices.
- Add meaningful alternative text for images where the theme provides an Image alt setting.
For example, if you create a Slideshow with three slides, all desktop images should use the same dimensions, and all mobile images should also use the same dimensions.
The same principle applies to:
- Mega menu promotions
- Collection cards
- Before & after images
- Featured collections
- Shoppable media
- Image banners
Consistent image sizes help Maison maintain a clean and balanced layout across different screen sizes.
* The images and examples referenced in this guide are intended for theme documentation and demonstration purposes only.
Need Further Assistance
If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Use Dynamic Sources and Metafields in Maison
How to Set Up Shoppable Media Section in Maison