On a wide screen, a product photo can show the whole item and its distinguishing detail. A narrow mobile crop may remove that detail or enlarge the wrong part. This matters most when the picture helps a shopper choose a color, size, attachment, or bundle. If the gallery and variant selector disagree, the problem can continue into the cart.
The owner should not solve this by applying the same crop ratio to every image. Different products need different focal points, and an image that looks attractive may still fail to show the information a buyer needs.
Make a SKU-based review list
Start with products that have close-looking variants, text on packaging, or small but important accessories. For each SKU, record the key detail a buyer must see. Open the page on an actual phone, not only a desktop browser narrowed to a mobile width. Check the initial hero image, every variant state, thumbnails, zoom, and the image that appears in cart.
Note whether the crop is caused by the source image, a fixed-height container, CSS object-fit, theme gallery settings, or an app. If the image is fundamentally too tight, changing the layout may not reveal missing pixels. If the source is good but the gallery centers the wrong area, a focal-point setting or alternate mobile image may help. These are implementation decisions after diagnosis.
Preserve meaning in both image and text
Add a concise variant label and product detail near the selector. A photo should support the choice, not carry the only explanation. Alt text should describe the image for someone who cannot see it, including relevant variant distinctions when appropriate. W3C's image tutorial explains that text alternatives depend on the image’s purpose; repeating a generic product name for every variant adds little.
Do not use an editorial lifestyle crop as the only product image if it hides the actual configuration. Offer at least one clear view of the item and its defining details. Keep file size and display dimensions sensible so a richer gallery does not unnecessarily slow the page.
Test the path after a change
For each reviewed SKU, select every major variant and check that the correct image, label, price, cart line, and order confirmation agree. Ask someone unfamiliar with the product which variant they believe they selected before showing the cart. That detects a visual misunderstanding that a code-level “image loads” check cannot.
ARCHV can scope mobile product presentation and content guidance. Theme code, variant-media mapping, photography, and commerce integrations require separate discovery. Request a website estimate with affected product URLs, source images, and a list of details the customer must see.
Do not assume a crop caused every variant complaint. A Shopify variant-image discussion also points to possible mapping errors. Check the source asset, displayed gallery state, selected SKU, and cart line separately before deciding whether the remedy is new photography or code.
Keep a visual QA record for seasonal catalog changes. New photography often arrives in a different aspect ratio, and a template that worked for last month's products can crop the next collection badly. The review should name the SKU and the missing detail so the team can fix the asset or focal point precisely.