Media with text
An image or video card in a Mixed content row. It takes a set share of the row width, and the text can sit over the media or below it.
Where it is used
This block is used only in the Mixed content section (mixed-content.liquid).
Settings
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. | |
| Image ratio | • Adapt to image | Sets the proportions of the image or video area. Adapt to image follows the media's own proportions, and the other options crop it to a fixed ratio. |
| Content vertical alignment | • Top | Positions this card at the top, middle or bottom of its row when neighboring cards have a different height. |
| Width | • 16% | How much of the row this card takes, as a percentage of the row width. |
Media
| Setting | Options | Description |
|---|---|---|
| Image | 1920px x 840px recommended | |
| Image on mobile | 348px x 348px recommended | |
| Video | 684px x 500px recommended. | |
| Link | Note: This link setting only works for images, not videos. |
Content
| Setting | Options | Description |
|---|---|---|
| Content position | • Overlay image | Overlay image places the heading, text and buttons on top of the media. Below image places them underneath and makes the badge settings available. |
| Content alignment | • Left | Aligns the text and buttons in this card to the left, center or right. |
Badge settings
| Setting | Options | Description |
|---|---|---|
| Show badge | Shows a small badge on the media. Only available when Content position is Below image. | |
| Badge text | Text shown inside the badge. | |
| Badge icon | • Star | Icon shown before the badge text: a star, a dot or no icon. |
| Background color | Background color of the badge. White or a transparent color leaves the badge without a filled background. | |
| Text color | Color of the badge text. | |
| Vertical position | • Top | Places the badge near the top or the bottom of the media. |
Overlay image settings
| Setting | Options | Description |
|---|---|---|
| Overlay opacity | Strength of the dark layer over the media, from none to fully dark. Only available when Content position is Overlay image. | |
| Content position on desktop | • Top left | On mobile, the position adjusts automatically. |
Content position sets whether the text sits over the image (Overlay image) or below it (Below image). Link, Show badge, Badge text, Badge icon, Background color, Text color and Vertical position appear only when Below image is selected. Overlay opacity and Content position on desktop appear only when Overlay image is selected.
Notes
The Link setting works only for images, not videos.
No comments yet