Success
Max image width
Set how wide images can appear, from compact display to full container width.
This settings group controls the maximum width of an image wherever this option is available. Use it to keep images understated, give them more visual weight, or let them expand to fill the available space. If you are adjusting this in the theme editor, see Shopify documentation on customizing themes. For a broader overview of how theme sections and blocks use settings, see Shopify documentation on sections and blocks
Max image width
Section titled “Max image width”Choose a smaller width when the image supports nearby content rather than leading it. This works well for logos, icons, badges, and other visuals that should stay proportional to surrounding text.
Increase the width when the image needs more presence, such as feature artwork, editorial imagery, or other content that should stand out more strongly in the layout. A wider setting can make the image feel more intentional without changing the rest of the content.
Setting the value to 0 removes the width limit and allows the image to stretch across the full available width of its container.
Full-width stretching uses only the space available in the surrounding layout. It will not force the image beyond the width of its container.
Choosing a practical width
Section titled “Choosing a practical width”Start by deciding whether the image is decorative, supportive, or a main focal point. Supportive images usually look better with a modest width, while focal images often benefit from more space.
If this setting appears in different parts of the theme, adjust it for each use case instead of relying on one visual standard everywhere. The right image width depends on the amount of surrounding space and how prominent the image should feel.
Image quality and balance
Section titled “Image quality and balance”Larger image widths make low-quality source images more noticeable. If an image looks soft, awkwardly cropped, or too dominant, reduce the width before changing other layout settings.
Also check the relationship between the image and nearby text or actions. An oversized image can push important content down or make a content area feel unbalanced.
Usage notes
Section titled “Usage notes”- Match the image role. Use smaller widths for supporting visuals and larger widths for images that should lead the content.
- Use full width deliberately. Set the value to 0 only when the layout has enough space and the image still looks sharp at that size.
- Check content balance. Make sure a wider image does not overpower nearby headings, copy, or calls to action.
- Adjust by placement. Revisit this setting in each context where it appears, since the best width depends on the available space.
- Review both viewports. Desktop and mobile controls can behave differently, so check the image on both screen sizes before publishing.
- Compare media choices. If desktop and mobile use different media, confirm that cropping, loading, fallback behavior, and readability still work well in both views.