Images are central to storefront design. In the builder, open Insert, switch to the elements view, open the Basics group, and choose Media. Two image presets are available:

Both presets start with a placeholder. Set the source in the Design panel under Content.

Use a static image or switch the source to dynamic content for Shopify-connected layouts — for example a product's Featured image, a specific Media slot, or images from a product media Repeat on.

On the Style tab, the Media section controls Content (the source), Sizing, Focus, and Quality. Sizing offers Fit (the whole image is visible) or Fill (the image covers the frame), and Focus sets the focal point for filled images. Combine these with the Size section (width and max width) to control how the image fits its container.

The Size section also has a Ratio setting that fixes the image's proportions regardless of its source. Choose Auto (use the image's own ratio), a preset — Square (1:1), Portrait (2:3), Landscape (3:2), or Video (16:9) — or Custom to enter your own width and height values. Ratio pairs with Sizing: it sets the shape of the frame, while Fill crops the image to fit that shape (use Focus to control what stays in view). A fixed ratio is handy for keeping product images uniform across a grid even when the originals have different dimensions.

The Lightbox preset enables a click-to-expand interaction automatically. Shoppers click the image to view it larger without leaving the page — useful for product galleries, lookbooks, and editorial content.

You can also add a Toggle lightbox action to a standard Image from the Action section on the Interactions tab of the Design panel.

Instant serves images through optimized delivery. Adjust the Quality setting when you need sharper hero images versus lighter thumbnails. On published storefronts, below-the-fold images load lazily so they don't block the initial page load, while the first sections load eagerly.

Place images inside Column or Grid structure elements for predictable alignment. Use Layouts & layers to confirm which image connects to which dynamic source — especially when multiple product images repeat inside a gallery.

For product pages, combine a main image with a Gallery element (under Product or Interactive in Insert) for thumbnail navigation.

Provide meaningful alt text. For Shopify images, the alt text comes from the image's alt text set in Shopify. Avoid using images alone for critical information such as price or stock status — pair them with text elements.