Image

An image with an optional separate image for handheld screens, and an optional link. You set its ratio, width, height and corner radius.

Where it is used

This is a standalone block. It can be added inside the Popup link block (popup-link.liquid). It also appears in the overlays group (overlays-group.json) and in the default content of the index.json, page.about.json and product templates.

Settings

Learn how to use this block

Setting	Options	Description
Image		The picture to display. Until one is chosen, a placeholder image is shown.
Image on mobile		A separate picture for mobile screens. When empty, the main image is used on every screen.
Link		Makes the whole image a link to this address.
Image ratio	• Adapt to image • Square • Golden • Portrait • Landscape • Product	Sets the shape of the image frame. Adapt to image keeps the picture's own proportions, and the other options crop it to the chosen ratio.

Size

Setting	Options	Description
Width	• Fit • Fill • Custom	Fit uses a compact default width, Fill takes the space available in the group, and Custom uses the percentage set below.
Custom width		Image width as a percentage of the space it sits in. Shown when Width is Custom.
Width on mobile	• Fit • Fill • Custom	Sets the image width on mobile. Fit uses a compact default width, Fill takes the space available, and Custom uses the percentage set below.
Custom width on mobile		Image width on mobile as a percentage of the space it sits in. Shown when Width on mobile is Custom.
Height	• Fit • Fill	Fit keeps the image at its natural height, and Fill stretches it to the height of the group it sits in.
Custom height		Image height as a percentage, meant for when Height is Custom. Height only offers Fit and Fill in this block, so this slider is not shown.
Corner radius	• Inherit • None • Custom	If set to "Inherit", this block will follow the global rounded corners setting in Theme settings ▸ Layout ▸ Rounded image.
Custom corner radius		Corner rounding of the image, in pixels. Shown when Corner radius is Custom.

Spacing

Setting	Options	Description
Top padding		Space above the image, in pixels.
Bottom padding		Space below the image, in pixels.

Adapt to image uses the image's own proportions, and the other ratios set a fixed shape. Corner radius defaults to Inherit, which follows the Rounded image setting in Theme settings. If Image on mobile is empty, the main image is used on handheld screens.