Mixed content
Mixed content places a row or grid of blocks on the page. Each block can be an image or video with text, a text group, a video or an image.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Mixed content.
The package uses this section on the Home page and on the About, Contact, Sustainability and The Craft pages.
Settings
View the section guide .
Heading content
| Setting | Options | Description |
|---|---|---|
| Subheading | Small line of text shown above the heading. | |
| Heading | Main heading of the section. | |
| Description | Text shown under the heading. | |
| Heading size | • Large | Sets the heading text size. Large follows the H1 style, Medium the default section heading style, and Small the H3 style. |
| Heading alignment | • Left | Aligns the subheading, heading and description to the left, center or right. |
Block settings
| Setting | Options | Description |
|---|---|---|
| Match item heights | Stretches the blocks in a row to the same height. Images fill the row height only when their ratio is set to Adapt to image. |
Layout
| Setting | Options | Description |
|---|---|---|
| Column gap | • No gap | Space between blocks. No gap places them edge to edge, and the larger options add more space on desktop than on mobile. |
Carousel
Enable carousel on mobile turns the blocks into a horizontal carousel on small screens. A value between 1 and 2 for Columns on mobile (for example 1.5) switches the mobile layout to free scrolling.
| Setting | Options | Description |
|---|---|---|
| Enable carousel on mobile | Shows the blocks as a swipeable carousel on mobile. | |
| Columns on mobile | How many blocks show side by side on mobile. A decimal such as 1.5 lets the next block peek in. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
Section width sets the container. Page width keeps the content inside the page margins, Wide uses a fluid container, and Full width uses the full browser width.
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Page width keeps the section inside the standard page width, Wide stretches it closer to the screen edges with side margins, and Full width runs edge to edge. |
| Top padding | Space above the section, in pixels. It shrinks on smaller screens. | |
| Bottom padding | Space below the section, in pixels. It shrinks on smaller screens. | |
| Show top border | Draws a thin line along the top edge of the section. |
Blocks
Media with text (_media-with-text)
An image or video card with text blocks. The text sits below the media or over it. Badge settings and Link appear when Content position is Below image, and overlay settings appear when it is Overlay image.
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. | |
| Image ratio | • Adapt to image | Shape of the media. Adapt to image keeps the picture's own proportions. Default: Adapt to image. |
| Content vertical alignment | • Top | Places the content at the top, middle or bottom of the block. Default: Top. |
| Width | • 16% | Share of the row this block takes on desktop. Default: 50%. |
| Image | Image shown in the block. 1920px x 840px recommended. | |
| Image on mobile | Image shown on mobile. 348px x 348px recommended. | |
| Video | Video shown in the block. 684px x 500px recommended. | |
| Link | Page the block opens when a shopper selects it. Works for images only, not videos. | |
| Content position | • Overlay image | Places the text over the image or below it. Default: Overlay image. |
| Content alignment | • Left | Aligns the text inside the block. Default: Left. |
| Show badge | Shows a badge on the block. Default: on. | |
| Badge text | Text shown in the badge. Default: Badge text. | |
| Badge icon | • Star | Icon shown before the badge text. Default: Star. |
| Background color | Background color of the badge. Default: #C03E35. | |
| Text color | Text color of the badge. Default: #ffffff. | |
| Vertical position | • Top | Places the badge at the top or bottom of the block. Default: Bottom. |
| Overlay opacity | Darkens the image behind the text. Default: 0. | |
| Content position on desktop | • Top left | Where the text sits over the image on desktop. On mobile, the position adjusts automatically. Default: Middle left. |
Text group (_text-group)
A column of text with its own color scheme, width, alignment and padding. It holds headings, descriptions, buttons, icons, images, social icons and app blocks.
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. | |
| Content vertical alignment | • Top | Places the column at the top, middle or bottom of the row. Default: Top. |
| Width | • 16% | Share of the row this column takes on desktop. Default: 50%. |
| Content alignment | • Left | Aligns the text in the column. Default: Left. |
| Horizontal content padding | Space on the left and right of the column, in pixels. Padding inline is automatically optimized for mobile. Default: 30. | |
| Vertical content padding | Space above and below the column, in pixels. Padding block is automatically optimized for mobile. Default: 30. |
Video (_content-video)
A YouTube or Vimeo video, or an uploaded video, in a set share of the row. An uploaded video without autoplay shows its poster and a play button until tapped. With no video set, the block stays empty.
| Setting | Options | Description |
|---|---|---|
| Video URL | YouTube or Vimeo video shown in the block. | |
| Video | Uploaded video. Overrides the Video URL setting. 684px x 500px recommended. | |
| Video poster | Image shown before the video plays. Use the same dimensions as the video. | |
| Enable video autoplay | Plays the video on load, muted. Default: on. | |
| Enable video looping | Plays the video again from the start when it ends. Default: off. | |
| Video alt text | Text read aloud by screen readers to describe this video. | |
| Video ratio | • Video | Shape of the video frame. Default: Video (16:9). |
| Content vertical alignment | • Top | Places the block's content at the top, middle or bottom of the row. Default: Top. |
| Width | • 16% | Share of the row this block takes on desktop. Default: 50%. |
Image (_content-image)
An image in a set share of the row, optionally linked. A placeholder shows until an image is chosen.
| Setting | Options | Description |
|---|---|---|
| Image | Image shown in the block. Leave it empty to show a placeholder. | |
| Image ratio | • Adapt to image | Shape of the image. Adapt to image keeps the picture's own proportions. Default: Adapt to image. |
| Link | Page the image opens when a shopper selects it. | |
| Content vertical alignment | • Top | Places the block's content at the top, middle or bottom of the row. Default: Top. |
| Width | • 16% | Share of the row this block takes on desktop. Default: 50%. |
Notes
- The heading stays above the blocks on mobile. The carousel applies only to the blocks.
No comments yet