Updated November 8, 2026
Direct answer: A focal point tells the crop which part of an image to favor; it does not guarantee that the product’s entire outline will remain visible. If a product is cropped on mobile, check the saved point, the crop shape, the product’s position in the source image, and every placement that reuses that image. Do not assume a universal mobile-image setting or CSS fix will resolve the problem.
Shopify allows one focal point per image, shared wherever that image is reused. Theme support varies: Dawn 7+ and the Horizon family are supported, while third-party themes follow their own documentation. Open the image in Files, the theme editor, or product Media; click the image or drag the blue dot, then save. The saved point may not appear visually centered.
Diagnose the visible crop
Compare three layers: the source image, the focal point, and the area available to the crop.
- Wrong area favored: If the mobile crop keeps the decoration but removes the product, the point may be sitting on the background or another object.
- Product favored but incomplete: If the crop centers on the product but removes its side, base, handle, or lid, the focal point is working as an anchor rather than protecting the whole product.
- Correct in one placement, wrong in another: Different sections can present different crop shapes. The image may be appropriate for a banner but too constrained in a product-card or collection placement.
- Product too close to the source edge: Repositioning the focal point may favor the product without leaving enough surrounding area for its complete silhouette.
Fix the anchor before redesigning the image. If the point is already on the product, investigate the composition and crop geometry next.
Worked example: a wide tabletop image
Imagine a wide tabletop photograph with a ceramic vase on the left and decorative foliage and candles on the right.
Place the focal point on the vase’s main visible surface, not in the empty space between the vase and decoration. On a narrow mobile crop, losing most of the right-side decoration may be an acceptable trade-off if the complete vase remains visible.
If the vase still loses its left edge or base, there are three likely explanations:
- The point was not saved on the intended asset.
- The crop shape does not provide enough room for the vase at that placement.
- The vase occupies too much of the source frame to survive the crop intact.
In the third case, recompose the source image: give the vase more breathing room, move nonessential decoration farther away, or place the product in a more compact central area. If the full tabletop scene matters on desktop but the product alone matters on mobile, consider a genuinely different composition rather than expecting one focal point to satisfy both.
Focal point versus a protected bounding box
A focal point answers one question: which part of the image should the crop favor? A protected bounding box is an editorial concept—a rectangular area containing the complete product and every detail that must remain visible.
Do not treat the focal-point control as a protected bounding box. A point on the middle of a product does not automatically preserve its widest or lowest edges. To approximate a protected area with a single image, keep the complete product in a compact zone around the point, leave visual breathing room around its silhouette, and place expendable scenery near the edges.
This approach works best with a compact, centrally positioned product. A broad, tall, diagonal, or edge-hugging product may need a recomposed source image even when its focal point is technically correct.
Check desktop and mobile in context
Review the storefront at a wide desktop width and a narrow mobile width. Check every placement that uses the image rather than judging the asset in isolation.
At each placement, look for the full outline, base, lid, handles, front face, and any detail essential to identifying the product. Also inspect the surrounding section shape and available height; section height and adaptation options vary by theme. A broad banner and a narrow product placement can expose different portions of the same source image.
Do not use the blue dot’s apparent centering as the only diagnostic. Reopen the image and verify the saved location. Also avoid promising that custom CSS will restore missing product area unless the theme’s cropping behavior has actually been investigated.
When a duplicate source is justified
Duplicate the source only when the placements require genuinely different compositions and the theme allows separate assets to be selected for those placements.
For example, a desktop banner might need the vase on the left with decoration on the right, while a mobile banner needs the vase centered and the decoration removed. If the same image appears in both places, its one focal point must serve both uses. Separate assets are more defensible when each placement needs a different balance rather than merely a different crop of the same balance.
When using separate assets:
- Keep the product’s angle, scale, color, and proportions consistent.
- Give each asset a focal point appropriate to its composition.
- Confirm that each placement is using the intended asset.
- Retest both wide and narrow storefront views.
Logo whitespace and fallback decisions
A header logo’s whitespace is a separate issue from banner cropping. Blank space around a wordmark is part of the logo asset’s presentation; a banner focal point determines what a crop favors. Moving a banner focal point will not erase empty space around a logo, so treat logo cleanup and banner composition as different edits.
| Observed problem | Preferred response |
|---|---|
| The crop favors the wrong object | Move the focal point onto the product and save it. |
| The product is favored but still clipped | Recompose the source image or use a distinct placement asset. |
| One image needs conflicting compositions | Use separate assets only if the theme supports asset selection. |
| Essential banner wording is embedded in the artwork | Redesign the banner without baked-in text so the crop is not responsible for preserving a message. |
| Third-party theme behavior is unclear | Follow that theme’s documentation and verify the result at both widths; do not promise a universal setting. |
Start with the image that is visibly wrong, list its placements, correct and verify the focal point, and test wide and narrow views. If the product still clips, change the composition before adding another asset.
Related practical guides
Sources and scope
Documentation checked November 8, 2026. Rewarx is the publisher. Examples are instructional, not measured products or observed business results. Generated covers are editorial illustrations; no hands-on software comparison is claimed.