The Media cards section allows you to showcase multiple pieces of featured content using image or video cards. Each card can include its own media, heading, text, and call-to-action button.
This section is suitable for highlighting collections, product categories, campaigns, featured content, or other visual content in a card-based layout.
Click the section name to see the section settings on the right-hand sidebar.
Customize how media cards are displayed across desktop and mobile devices.
Hover effect: Choose the effect applied when customers hover over a media card. Available options shown include None, Blur, and Tilt.
Media height: Choose how the media height is determined on desktop. When Fixed height is selected, you can manually set the height.
Fixed height: Set the media height on desktop when Media height is set to Fixed height.
Media height mobile: Choose how the media height is determined on mobile devices.
Mobile fixed height: Set the media height on mobile when Media height mobile is set to Fixed height.
Number of cards on desktop: Set the number of cards displayed at the same time on desktop. The number is automatically adjusted on smaller screens.
Desktop spacing: Adjust the spacing between cards on desktop.
Item width on mobile: Set the width of each card on mobile. Set a value below 100% to reveal a preview of the next slide.
Make section full width: Expand the section to use the full available width.
Color scheme: Select the color scheme applied to the section. You can choose an available color scheme or customize it through Edit scheme.
Use the Section padding settings to adjust the spacing around the section.
The Section header container allows you to add introductory content above the media cards.
Text alignment: Choose how the section header content is aligned: left, center, or right.
Custom width: Enable this option to customize the width of the section header content.
Click Add block under Section header to add content. The available content shown in the example includes:
Heading: Add the main newsletter heading
Text: Add supporting information
Spacer: Add additional spacing between newsletter content and the signup form.
Child blocks can be reordered by dragging and dropping them in the Theme Editor.
Each Media card represents an individual piece of featured content within the section. You can add multiple Media card blocks and configure each card independently.
Color scheme: Select the color scheme applied to the individual media card.
Content position: Choose where the card content is positioned. In the example shown, the content uses Bottom left.
Media overlay opacity: Adjust the opacity of the overlay displayed over the card media.
Media type: Choose between Image and Video.
Image: Select the image displayed in the media card when Image is selected as the media type.
Click Add block under a Media card to add content to that specific card.
The available content shown in the example includes:
Heading: Add the card title, such as Bell Pepper or Citrus Fruits.
Text: Add supporting information or a short description.
Button: Add a call-to-action button that directs customers to related content.
Each Media card can have its own media, content, and color scheme, allowing you to showcase different categories or featured content within the same section.