Web ready photography

Image guide

Images on the web are designed to be responsive: they will change size, position, and sometimes be cropped to best fit a user's device.

Before considering technical details like image size, you should focus on the content, composition, and orientation of your photos.

Also check out Shopify's excellent guide to smartphone product photos

To simplify matters, we've picked out four of the best tips for taking and editing web-ready photography:

1

Position your main subject towards the middle of the frame

When taking product photographs, it is important to leave room around the main subject to allow for cropping. Keeping photos simple will also ensure the subject remains the main focus.

You can enhance your image by following the "Rule of Thirds," which involves using your phone's grid setting to place the subject along one of the horizontal or vertical lines. This technique prevents unwanted cropping and makes for more interesting photos.

For more information on the "Rule of Thirds," see Adobe's article on the rule of thirds.

2

Use Landscape for full-width images and Square for mobile images.

Using landscape (horizontal) photos for full-width and hero images can prevent unwanted cropping or needing to scroll down to see the entire image.

For mobile devices, consider using square images to fill more of the screen and ensure they stack uniformly when repositioned.

3

Do not add text directly to images — use heading blocks instead

Text included in images may appear stretched and be cropped when resized. Using the theme's Heading blocks, however, will ensure all text is properly positioned and resized for any device.

4

Use theme image settings to set the focal point of your images.

Use the image focal point option and add mobile-specific images to avoid cropping the key area of your image.

---

Learn more

Image sizes

File formats

Theme image settings