Success
Image
Add a standalone image with flexible sizing, crop, caption, overlay, and mobile layout controls.
Use this block to add a standalone image with flexible display controls. You can adjust its shape, width, crop behavior, caption, overlay treatment, alignment, and link behavior to fit the surrounding layout. For a broader overview of how this fits into theme content, see Shopify documentation on sections and blocks
Image settings
Section titled “Image settings”This group controls the image itself and how it appears. For broader guidance on image-related controls, see the image settings reference.
Choose the image first, then refine how it displays. Image style changes the visual shape, while max image width lets you keep the image contained or stretch it across the available space. Setting max image width to 0 makes the image use the full available width.
Aspect ratio is useful when you want a more consistent layout, especially if several images appear together. The default ratio keeps the image’s natural proportions, while fixed ratios create a tidier grid but may crop the visible image.
The mobile aspect ratio can follow the main ratio or use its own setting. This is helpful when a wide desktop crop feels too short or too tight on smaller screens.
If you add a link, the image becomes clickable. Opening it in a new tab is most useful for external destinations or downloads.
Fixed aspect ratios can crop edges of the image. Check both desktop and mobile if the image includes faces, product details, or text.
Caption settings
Section titled “Caption settings”Use the caption when the image needs a label, short explanation, or credit line. You can place it above or below the image, then adjust alignment and text size to match its role.
Short captions usually work best. If the caption needs stronger emphasis, increase the text size, but keep it brief so the image remains the focus.
Overlay settings
Section titled “Overlay settings”Overlay settings add a solid color or gradient on top of the image. This can help create a stronger visual style or improve caption contrast against busy photography.
Opacity controls how strongly the overlay affects the image. Lower opacity preserves more image detail, while higher opacity creates a more dramatic tinted effect.
Alignment settings
Section titled “Alignment settings”These settings control how the block sits within the available space on desktop and mobile. They matter most when the image does not fill the full width.
Center alignment is often the safest choice for standalone images. Left or right alignment can work well when the image is part of a more editorial layout or is paired with nearby content.
Standard block settings
Section titled “Standard block settings”Color settings
Section titled “Color settings”These controls let you override the usual colors for this block, including border and text color. Use them when this image needs to stand apart from the surrounding layout or when the caption needs a clearer contrast treatment. See the color settings reference.
Visibility settings
Section titled “Visibility settings”Use visibility controls to show or hide this block by device. This is useful when you want separate image treatments for desktop and mobile layouts. See the visibility settings reference.
Editor settings
Section titled “Editor settings”Editor settings help you label the block clearly in the editor sidebar. A custom editor title is especially helpful when you have multiple image blocks in the same area. For the block editing interface, see Shopify documentation on the theme editor
Usage notes
Section titled “Usage notes”- Review desktop and mobile separately. Layout, alignment, visibility, and media behavior can differ by viewport, so check both views before publishing.
- Keep fallback styling when you can. Blank or default-style color choices usually preserve the surrounding look, while explicit colors, gradients, or media overrides make the block feel more independent.
- Treat separate media as a deliberate choice. Different desktop and mobile images can improve fit, but they can also change cropping, loading, fallback behavior, and readability.
- Watch important image content. If the image includes faces, product details, or text, confirm that the chosen crop still keeps the subject readable on both screen sizes.