Photo Medley

A split section with a collage of three images on one side and a text column on the other. The image side arranges one tall portrait image alongside two stacked landscape images with a small gap between them. On mobile the collage shifts to an offset grid (left image sits lower) with the text underneath; on desktop the two columns sit side by side in a 12-column grid (8 columns for images, 4 for text).

Content can come from a photo_medley metaobject – useful for per-collection or per-product content via dynamic source – or from the manual image pickers in the section settings. Manual images override the metaobject when both are present. The section hides entirely when there are no images and no text.

Settings

Setting	What it does
Section ID	Optional anchor for jump links.
Photo medley data	A photo_medley metaobject providing images, title, description, and tag text. Connect via dynamic source for per-collection content.
Flip columns	Swaps the image and text sides on desktop. Off by default (images left, text right).
Large image	The tall portrait image (left or right depending on flip). Overrides the metaobject’s image_large when set.
Top image	The upper stacked landscape image. Overrides the metaobject’s image_top.
Bottom image	The lower stacked landscape image. Overrides the metaobject’s image_bottom.
Padding top / bottom	Default 48/64/80px (mobile/tablet/desktop).

Blocks

Static blocks:

• Tag – a small label above the title, often used for a category name. Falls back to the metaobject’s tag field.
• Title – the section heading. Falls back to the metaobject’s title field.
• Rich text – description below the title. Falls back to the metaobject’s description field.

Repeatable:

• Buttons – CTA buttons below the text content.
• Custom HTML – arbitrary HTML for anything the other blocks don’t cover.

Where it’s used

• collection.json
• collection.parts.json
• index.json (homepage)

Tips

• Use the metaobject for per-collection content. Connect photo_medley_data via dynamic source to the collection metafield so each collection gets its own images and copy without duplicating sections.
• Manual images win. If you fill in the image pickers in the section settings they override the metaobject images. This is useful for one-off overrides on a specific page.
• Flip for visual variety. Alternate the “Flip columns” checkbox across multiple Photo Medley sections on the same page to create a zig-zag layout.
• Image aspect ratios are fixed. The large image renders at roughly 2:3 portrait, the top image at 3:2 landscape, and the bottom image at a taller landscape. Crop your photos to these proportions for the best result.