What is the recommended image size on an EComposer page?
When you build a page in EComposer, it’s natural to wonder which image size works best. There isn’t one size that fits every element, but you can always check the size of the image that’s already in a template, and a few simple guidelines will help you choose the right dimensions for your own sections. This article shows you how.
1. Check the size of an Image element
If you start from a template in our library, every Image element already holds a sample image, and its size is a great reference for your own picture. Here’s how to find it.
Step 1: Click the image on the canvas to select it. The settings panel on the right switches to that element, and the Content tab shows the Choose Image option.
Step 2: Hover over the picture under Choose Image. A bar appears at the bottom of the picture showing the file name and its size, for example 1398 Ă— 2082 px.
Now you know the exact size of the sample image, so you can prepare your own picture with the same dimensions, or at least the same ratio.
2. Check the size of a background image
Sections, inner rows and columns can have a background image too, and you can check its size in a very similar way.
Step 1: Click the section (or the inner row or column) to select it. The easiest way is to click its name tag at the top-left corner of the element on the canvas.
Step 2: Open the Design tab, then click the round preview next to Background. The Background pop-up opens right away.
Step 3: In the pop-up, hover over the picture under Image. The file name and size show up at the bottom of the picture, for example 1800 Ă— 1349 px. If your screen is short, scroll down inside the pop-up to see the whole picture.
Don’t see a picture in the pop-up? That means this element has no background image yet. Click Select image to add one, and its size will show up the same way. You can also use an image with a different size than the sample one, but to keep the design looking good, please use an image with the same ratio.
3. Choose a size for a custom section
If you create a page from scratch, we can’t give an exact size for every element. You can customize everything, and every store has different needs. For example, you might want a section with two images while another store wants three. That’s why the best way to get good-looking images is to pay attention to their proportions. If you want a square image, for instance, simply use an image with a 1:1 ratio.
Here are some commonly used sizes to start with:
Banner image: The optimal size can vary depending on your theme, but a commonly suggested size is 1920 Ă— 580 px. It’s best to check your theme’s documentation or settings for its recommended banner size.
Product image: Use high-resolution images, at least 1024 Ă— 1024 px, so your products look clear and sharp on every device. Shopify automatically resizes product images to fit your theme.
Single image: For a promotional graphic or a standalone visual, think about the space where the image will be displayed. If you want a standard size across your store, 1200 Ă— 800 px is a good option, or you can adjust it to your needs.
Last but not least, remember to compress your images without losing too much quality. It helps your store load faster and perform better overall.
