Web-ready photography

Web-ready photography

Start your free trial
Start your free trial

General

Online store speed
Online store speed
Accessibility
Accessibility
Theme updates
Theme updates

Theme styles

Style presets
Style presets
Colors
Colors
Fonts
Fonts
Animation
Animation
Social media
Social media

Header

Announcement bar
Announcement bar
Mobile menu
Mobile menu
Search bar
Search bar

Sections

Products

Product listings
Product listings
Product badges
Product badges
Quick view
Quick view
Quick add
Quick add

Product page

Product template
Product template
Variant chips
Variant chips
Sticky add-to-cart bar
Sticky add-to-cart bar
Sibling product swatches
Sibling product swatches
Product recommendations
Product recommendations

Collection page

Collections template
Collections template
Banner
Banner
Product grid
Product grid
Filters and sorting
Filters and sorting

Cart

Quick cart
Quick cart
Cart page
Cart page
Added-to-cart popup
Added-to-cart popup
Cross sells
Cross sells
Free shipping bar
Free shipping bar
Low inventory warning
Low inventory warning

Pages

Templates
Templates
Home page
Home page
About page
About page
Blogs page
Blogs page
Blog post
Blog post
Collections list
Collections list
Contact page
Contact page
Password page
Password page
Search page
Search page
404 page
404 page

Support

Support policy
Support policy
Shopify vs Theme issues
Shopify vs Theme issues
Store access requests
Store access requests

Web-ready photography

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.

There are many excellent guides for product photography, such as Shopify's guide to smartphone product photographyTo 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.
  2. When taking product photographs, it is important to leave room around the main subject to allow for cropping. Keeping photographs 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.

  3. Use Landscape orientation for full-width images and Square for mobile images.
  4. 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.

  5. Do not add text directly to images — use heading blocks instead.
  6. Text included in images may appear stretched and be cropped when resized. Using Cornerstone's Heading blocks, however, will ensure all text is properly positioned and resized for any device.

  7. Use Cornerstone's image settings to set the focal point of your images.
  8. Use the image focal point option and add mobile-specific images to avoid cropping the key area of your image.