Using the right image dimensions for Empire's features can be tricky, as cropping may occur to fit a particular wrapper or container. Use these dimension recommendations to prepare images for use with Empire's features.
To get the best results, avoid portrait-oriented images, include images that can be cropped, and use our recommended image dimensions.
Avoid portrait-oriented images
Generally, Empire's features work best with images that are landscape in orientation (larger width, lower height). Image containers in the theme often have a maximum height in the styling. This design reduces vertical scrolling time for customers, especially for mobile devices.
On larger screens, however, the width will continue to expand to fill the allowed space. Cropping on the top and bottom of the image will occur.
Include images that can be cropped
Depending on the device or browser size, minor cropping may occur. If the container is concealing aspects of the image closer to the margins, avoid images with added text or subjects near the outer edges. Aim to include images that you are comfortable with cropping near the margins.
Use our recommended image dimensions
| Feature | Dimensions | Format | Notes |
| Logo | 200 x 80px | PNG | |
| Small promo | 50 x 50px | PNG | |
| Slideshow |
Small 1800 x 880px Medium 1800 x 1000px Large 1800 x 1120px Fullscreen 1800 x 1800px |
JPG | Reduce cropping by selecting Original aspect ratio as the Slideshow height |
| Highlights banner | 50 x 50px | PNG, JPG | |
| Collection list section | 2000 x 2000px | PNG, JPG | |
| Featured collection section | 500 x 750px | JPG | |
| Grid section | 1800 x 1000px | JPG | |
| Image with text overlay section | 1800 x 1000px | JPG | |
| Logo list section | 320 x 320px | PNG | |
| Mosaic section | Images adapt depending on Section height, amount of Promo blocks used, and browser window size. | JPG, PNG | Reduce cropping by selecting Maintain aspect ratio |
| Newsletter section | 320 x 320px | PNG | |
| Map section | 1800 x 1000px | JPG | |
| Search section | 1000 x 300px | PNG, JPG | |
| Menu list | 360 x 360px | PNG, JPG | |
| Video section |
1600 x 900px (16:9) 2100 x 900px (21:9) |
JPG | Cover image dimensions depend on Aspect ratio selected |
Dimensions recommended here can be doubled to optimize for Retina screens. For example, add an image for the Logo that is 400 x 160px, then adjust the maximum width slider to reduce the space it occupies.