Fluorescent
Eclipse
Eclipse
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Shoppable feed
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page

Was this helpful?

  1. General
  2. Image guide

Web ready photography

Last updated 5 months ago

Was this helpful?

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

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 .

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

guide to smartphone product photos
Adobe's article on the rule of thirds