Media with text split

Use this section to pair editorial copy with images or decorative, muted video. All copy and media are section settings. The only blocks are buttons: add up to two, duplicate or reorder them, and choose Primary, Secondary, or Link for each action. Enter a destination to make a button usable. A label without a destination displays a disabled action.

Choose a composition

Layout style	Media	Copy
Split	One frame, or two with Show a second media. Second media arrangement chooses Columns or Rows.	A separate column beside the media on desktop.
Collage	Two overlapping frames, with a placeholder for either unset frame.	A separate column beside the media on desktop.
Overlay	The primary frame fills the section. Second-media controls do not apply.	A panel placed using Text position.

In Split and Collage, Media position chooses the desktop side. Image size sets the media column to 35%, 45%, or 55% for Small, Medium, or Large on either side. Media aspect ratio offers Portrait (3:4), Square (1:1), Landscape (4:3), and Wide (16:9). Vertical alignment places copy at the top, center, or bottom; Content alignment aligns its text and actions.

Below 750px, the heading appears above the media and body. Mobile header alignment aligns that heading. Show media first on mobile places media before the body and actions; turning it off places the body and actions first. Collage keeps its overlapping second frame on mobile.

Adjust collage overlap

Collage overlap appears when Layout style → Collage is selected. It ranges from 10% to 90% in 5% steps and defaults to 75%.

Lower the value to expose more of the primary image or video. Raise it to bring the secondary frame farther over the primary media. At 10%, the frames overlap lightly; at 90%, most of the secondary frame sits over the primary frame. The same setting applies on desktop and mobile, with spacing calculated from Media aspect ratio so portrait and wide media stay inside the section. The primary frame remains larger, and the secondary frame stays capped at 220px wide on mobile.

Start at 75%, then lower the overlap if the secondary media covers a product, label, or other important detail. Check both the desktop and phone previews. Media controls stay on the leading edge so the secondary frame does not cover the primary video’s Play/Pause button.

Keep overlay copy readable

Text background uses the selected color scheme for all three options:

• Card has a solid background, rounded corners, and a shadow.
• Glass has a nearly opaque background with a subtle translucent finish and backdrop blur.
• Minimal has a solid background with square corners and no shadow or border.

Minimal replaces the former None treatment. Existing sections saved with that option retain their copy and position and receive the readable Minimal background automatically.

Media darkening adjusts the image or video behind the panel; it does not change the panel’s background. Section height sets the desktop minimum height. On mobile the minimum tapers to the viewport, and longer copy can increase the section height.

Typography and interaction

Heading size uses the global editorial scale. Small, Medium, and Large range from 28–40, 32–56, and 36–72px on desktop. Below 750px they use 20, 24, and 28px. Body and action text stay readable at phone widths.

Button hover behavior now comes from Theme settings → Button hover effect. Link-style actions follow Text hover effect. The section no longer has a competing button-hover control. Entrance reveals remain optional through Show entrance animation, subject to the global motion and reveal settings.

Video behavior

Choose Video for either active media frame and select a Shopify-hosted video. These videos are always muted and looped. Autoplay video starts motion only while the frame is visible and the browser tab is active. A visitor’s reduced-motion preference disables autoplay; they can still choose Play. Leaving the frame or hiding the tab pauses playback.

The Play/Pause button reflects actual playback. If the browser rejects playback, it continues to show Play so the visitor can retry. Keyboard users can activate it with Enter or Space. Without JavaScript, video posters remain still. This section’s video is decorative; use the dedicated Video section for content requiring audio or captions.

Content ownership and empty states

Manually entered section settings own the eyebrow, heading, body, and media. Button blocks own labels, links, styles, and their order. Optional dynamic sources can supply compatible settings; custom metafields and native product resources are not required.

Removing every button leaves the copy in place. Clearing all copy and button labels removes the content column so media fills the available width. An empty Overlay keeps its media height. Unselected media displays a placeholder. Duplicate buttons keep independent settings and can be reordered without changing the copy or media.