Best practices for images

Many Shopify themes feature large images or slideshows that scale to the height of your browser (Boundless and Brooklyn) or adapt to your screen size (Venture).

If you use one of these themes or have a large slideshow or background image, it's important to understand what types of images will look best.

Because large images can't fit on all devices, Shopify sometimes displays only part of the image depending on the device you're using. If your image slideshow contains a lot of large images, you might find that parts of the images aren't visible.

Recommendations

To make sure that your images work well with your theme, here are some things to keep in mind:

  • The "focal point" of the image, or the part that you want customers to look at, should be in the center. That way, if your theme doesn't show the edges of the image, the important part will still be visible.

  • Images that you use for slideshows or backgrounds shouldn't have text in them. If the text is a part of the image itself, it might get moved around, cropped, or adjusted based on your theme. Use theme options (like Venture's Heading text and Subheading text in the slideshow options) to add text and links to your slideshows.

  • Images that you use for slideshows or backgrounds shouldn't be visually cluttered or "busy", because that will make text harder to read when it appears on top of the image.

Wide images on tall screens

Wide images might be cropped on the left and right when the device used to view them has a tall screen (like a mobile phone or tablet):

Wide image on tall screen

Tall images on wide screens

Tall images might be cropped on the top and bottom when the device used to view them has a wide screen (like a laptop or desktop):

Tall image on wide screen

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free