Image

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on headers settings
3. Company XYZ documentation on section padding settings
4. Company XYZ documentation on section backgrounds settings
5. Company XYZ documentation on separators settings
6. Company XYZ documentation on visibility settings
7. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to showcase one image with flexible display controls and optional supporting content. For a broader overview of section-based theme content, see Shopify documentation on sections and blocks. It works well for editorial photography, simple banners, promotional callouts, and linked visual breaks between other sections.

Image settings

These settings control the image itself, including its shape, width, crop behavior, and optional link. The most important choices are usually width and aspect ratio, since they have the biggest effect on how prominent the image feels in the layout.

Use the max image width setting to decide whether the image should feel immersive or contained. A full-width image creates more impact, while a capped width often feels cleaner and easier to pair with surrounding content.

Aspect ratio settings let you keep a consistent image shape even when source images vary. Choose the natural ratio when composition matters most, and use a fixed ratio when you want a more uniform layout across the page. The separate mobile ratio is especially helpful when a desktop crop feels too wide or too tight on smaller screens.

Image style gives you a quick visual treatment without editing the file itself. Rounded corners usually suit softer editorial layouts, while a circle crop works best when the uploaded image is already close to square.

Forced aspect ratios can crop the image. Check both desktop and mobile views so important parts of the image stay visible.

If you add a link, keep it closely related to the image so the section feels intentional rather than decorative.

Caption settings

Use the caption area to add a short note above or below the image. This works well for photo credits, a brief description, or small supporting context that should stay attached to the media.

Top captions help introduce the image before it appears, while bottom captions usually work better for credits or secondary details. Keep caption text short so it supports the image instead of competing with it.

Overlay settings

Overlay settings add a solid color or gradient on top of the image. This is useful for softening a busy image, adding mood, or improving contrast when the image sits near other visual elements.

A subtle overlay often does the most work with the least visual cost. Strong overlays can be effective for dramatic imagery, but they can also hide detail if pushed too far.

Standard section settings

Header settings

Use the shared Header settings to add a caption, heading, subheading, icon, and optional button above the image area. In this section, the header is useful when the image needs context or when you want to turn the section into a simple visual callout with a clear action.

Keep the button closely tied to the image or heading message. On mobile, button position and full-width behavior can help the call to action feel easier to notice and tap.

Padding settings

Use the shared Padding settings to control the space above and below the section. More padding helps a featured image stand on its own, while tighter spacing helps it feel connected to nearby content.

It is often worth adjusting desktop and mobile spacing separately, since large images can feel balanced on desktop but overly tall on smaller screens.

Section background settings

Use the shared Section background settings to add color, gradients, images, or video behind the section. This can help frame the image as a designed content block instead of a standalone asset.

Blank or transparent background choices usually preserve the surrounding theme styling. More explicit background colors, gradients, or media choices make the section feel more self-contained.

If the main image is already visually busy, use background effects sparingly so the section does not feel crowded.

Separator settings

Use the shared Separator settings to place a line at the top or bottom of the section. This is a simple way to distinguish the image from surrounding content without adding extra visual weight.

Subtle separator styles usually work best when the image itself is the main focal point.

Visibility settings

Use the shared Visibility settings to show or hide the section by device. This is useful when you want one image treatment for desktop and a different crop or replacement section for mobile.

Device-specific visibility and media choices can change layout, alignment, and readability, so review both viewport sizes before you publish.

Only hide the section on a device when another section or layout choice is clearly doing the job better there.

Width settings

Use the shared Width settings to control the content width and the outer section width. In this section, content width affects how wide the image and header content can appear, while section width matters most when you add a background or want the section wrapper to extend further.

A narrower width can make the section feel more editorial, while wider settings create a more immersive presentation. Preview width changes on the live page when possible, since the editor may not always reflect the final layout exactly.

Usage notes

1. Protect the composition. Review crops on desktop and mobile whenever you use a forced aspect ratio.
2. Match width to purpose. Use broader widths for impact and narrower widths for a more contained, editorial look.
3. Keep captions brief. Short captions add context without pulling attention away from the image.
4. Use overlays carefully. Add only enough overlay strength to improve mood or clarity without flattening the image.
5. Simplify competing elements. If the image, header, button, and background all demand attention, scale back one or two so the section has a clear focal point.