Everything you need to add and customize the Image block — from choosing aspect ratios and sizing options to setting up separate mobile images and adding clickable links.
An Image block lets you place a single picture anywhere inside a Group block on your page. Images are one of the most common building blocks for any online store — they can showcase products, highlight lifestyle photography, display brand logos, or add visual interest between other content.
In the Boardwalk theme, the Image block is a responsive element that automatically adjusts to fit the screen size. You can control the shape of the image with aspect ratio presets, scale it down to a custom width, round the corners, flip it horizontally, and wrap the entire image in a clickable link. The block also supports a separate mobile image and an independent mobile aspect ratio, giving you full control over how images look on phones versus desktops.
Follow these steps to add and configure an Image block on any page of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the
page where you want to add the image using the page
selector dropdown at the top center of the editor.
Image blocks live inside Group blocks. In the Theme Editor sidebar, find an existing Group or add a new section that contains one. Click the Group to expand it.
Note: The Image block cannot be added directly to a section — it must be placed inside a Group block. If you don't see a Group available, add a section that includes one first.
Inside the Group, click Add block and choose Image from the list. A placeholder image will appear on your page.
Click the Image block in the sidebar and use the Image picker to upload or select a photo from your media library. The image will replace the placeholder on your page.
Configure the aspect ratio, width, corner radius, and other options described in the settings reference below. You can also add a link, set up a separate mobile image, or choose a different aspect ratio for smaller screens.
Click Save in the Theme Editor. Preview your page on both desktop and mobile to make sure the image looks the way you want at every screen size.
These settings are available when you click an Image block in the Theme Editor sidebar. They control the image's appearance, sizing, and link behavior.
The picture displayed by this block. Use the image picker to upload a new photo or select one from your Shopify media library. If no image is selected, a placeholder graphic is shown.
Controls the shape of the image on desktop screens.
Options: Adapt to image (uses the
photo's natural proportions),
Widescreen,
Standard,
Landscape,
Square, or
Portrait. When a fixed ratio is
selected, the image is cropped to fit.
Determines how wide the image appears within its
parent Group. Options: Full width (100%)
(fills the available space) or
Custom scale (lets you set a specific
percentage).
Sets the image width as a percentage of the parent
Group. Range: 10% to 100% (in 5% steps). This
setting only appears when Image width is set to
Custom scale.
Rounds the corners of the image. Range: 0px to 40px (in 2px steps). Increase this value to create softer, rounded edges on the image.
Mirrors the image left-to-right. This is useful when you want to reverse the direction of a photo to better match your page layout.
Makes the entire image clickable. Enter a URL to any page, product, collection, or external website. When a link is set, visitors can click the image to navigate to that destination.
When turned on, clicking the image opens the link in a new browser tab instead of navigating away from the current page. This setting only appears when a Link is provided.
These settings let you customize how the image appears on mobile devices. You can use a completely different image and a separate aspect ratio for smaller screens.
When turned on, the same image is used on both desktop and mobile. Turn this off to upload a separate mobile image that may be better suited for smaller screens (for example, a tighter crop or a vertical composition).
A separate image shown only on mobile devices. Use this to display a photo that is optimized for portrait or narrow screens. This setting only appears when Use desktop image for mobile is turned off.
When turned on, the mobile image uses the same aspect ratio as the desktop image. Turn this off to choose a different shape for mobile — for example, a square ratio on mobile while keeping widescreen on desktop.
Controls the shape of the image on mobile screens.
Options are the same as the desktop aspect ratio:
Adapt to image,
Widescreen,
Standard,
Landscape,
Square, or
Portrait. This setting only appears
when Use desktop aspect ratio for
mobile is turned off.
The Image block comes with features that work automatically — no apps or custom code needed.
The image automatically scales to fit the available space in its parent Group. On desktop it displays at up to 1200px wide, and on mobile it scales down to 800px for faster loading.
Upload a different image for mobile devices. On small screens the mobile image is shown automatically while the desktop image is hidden, so visitors always see the version best suited to their screen.
Choose a different shape for the image on mobile versus desktop. For example, you can use a widescreen ratio on desktop and a square on mobile for a better fit on narrow screens.
Six aspect ratio options let you control the image shape without editing the original file. Choose Adapt to image, Widescreen, Standard, Landscape, Square, or Portrait — the image is automatically cropped and centered to fit the selected ratio.
Wrap the image in a link to any page, product, collection, or external URL. When a link is set, the entire image becomes clickable. You can also choose to open the link in a new browser tab.
Images are loaded only when they are about to scroll into view. This speeds up your page's initial load time, especially on pages with many images.
The image fades in smoothly as it enters the viewport, adding a polished animation effect to your page without any extra setup.
The image automatically inherits its alignment (left, center, or right) from the parent Group block. Adjust the Group's alignment settings to position the image where you want it.