Image settings
Use these settings to control how an image looks, fits, and behaves wherever this image group is available. You can choose the image, adjust its shape and width, set how it crops on desktop and mobile, and optionally make it clickable. For a broader overview of how theme settings are edited, see Shopify documentation on the theme editor
For a visual summary of these controls, see the Image settings reference.
Image selection
Section titled “Image selection”Start by choosing an image that already suits the space it will occupy. A wide file works best for banners and horizontal layouts, while square or portrait images usually feel more natural in tighter content areas.
If your image includes text, logos, or a tightly framed subject, check it again after changing aspect ratio settings. Cropping can remove important details near the edges.
Shape and width
Section titled “Shape and width”Image style changes the overall presentation of the image. Use the default style for a neutral look, rounded corners for a softer visual treatment, or a circle when the image is centered and simple enough to work inside a circular frame.
Max image width controls how large the image can appear within its available space. Setting it to 0 lets the image expand to the full available width, which is useful for large visual areas. Lower values help keep images more compact and balanced beside text or other content.
Aspect ratio
Section titled “Aspect ratio”Aspect ratio controls the shape of the image frame. Keeping it at Default preserves the image’s natural proportions, while fixed ratios create a more consistent layout across different images.
Use fixed ratios when you want several images to align neatly or when you want a more deliberate visual rhythm. Landscape and widescreen ratios suit broad imagery, while square and portrait ratios can give smaller content areas a more structured look.
Fixed aspect ratios can crop the image on any side. If the focal point sits close to an edge, preview the result before publishing.
Mobile ratio
Section titled “Mobile ratio”The mobile aspect ratio lets you adjust the image shape for smaller screens without changing the desktop presentation. This is useful when a wide desktop crop becomes too shallow or awkward on phones.
Leaving the mobile option at Default uses the main aspect ratio. Choose a separate mobile ratio when the image needs more vertical space or a simpler crop on smaller screens.
Image links
Section titled “Image links”You can add a link to make the image clickable, which is useful for promotional graphics, featured content, or brand visuals that should lead somewhere specific. Linked images work best when the destination feels obvious from the surrounding content.
Use the new-tab option only when it improves the browsing experience, such as for external destinations. For most internal navigation, opening in the same tab feels more natural.
Usage notes
Section titled “Usage notes”- Choose the right source image. Start with an image that already matches the intended layout so you need less aggressive cropping.
- Balance size with width controls. Adjust maximum width when an image feels oversized instead of relying only on aspect ratio changes.
- Check crops on mobile. Review smaller screens separately, especially when the desktop image is wide or contains important focal details.
- Compare desktop and mobile settings. Review both viewport sizes when you change crop, alignment, visibility, or media options, since they can produce different on-screen results.
- Preserve fallback styling when needed. Leave blank, transparent, or default-style values in place when you want the image area to keep the theme’s built-in look and behavior.
- Use overrides intentionally. Choose explicit colors, gradients, or alternate media only when you want the local image area to stand apart from surrounding content.
- Protect key content. Avoid fixed ratios for images with edge-to-edge text, logos, or tight framing unless you have confirmed the crop works well.