Media cards

Show large image or video cards with text and buttons on top, in a slider or a grid, to showcase collections, categories and promotions.

---

The Media cards section shows large image or video cards, each with its own heading, description and button on top of the media. Use it to showcase collections, categories or campaigns, in a slider customers can browse or in a grid.

1. Our guide to set up a Media cards section:

Steps:

• In the theme editor, click Add section.

• Locate Media cards.

• Click Save.

The section is added with three Card blocks. You can add, reorder or remove cards.

2. Section settings

• Layout: Slider / Grid.

Grid

Cards wrap into rows. Set the width of each card with Desktop width in the Card block.

Slider

Cards sit in one row that customers can slide through, with previous and next buttons.

• Heading: Add a title to introduce the section. Leave it blank to hide it.

• Heading size: 15–80px.

• Desktop height: 250px / 350px / 450px / 550px / 650px / 750px / 850px. The height of all cards on desktop.

• Mobile height: 150px / 250px / 350px / 450px / 550px / 650px / 750px. The height of all cards on mobile.

• Adapt to first media size: All cards use the shape of the first card's image or video. This overrides Desktop height and Mobile height.

• Corner radius

  • Corner radius: Rounds the corners of the cards, 0–40px.

• Section padding

  • Top padding: 0–100px.

  • Bottom padding: 0–100px.

3. Block settings

Card block

Each card shows one image or video with text on top.

• Desktop width: The width of the card on desktop, 20–100%. Only applies when Layout is set to Grid.

• Image: The card's image.

• Shopify-hosted video: A video uploaded to your Shopify files. It plays automatically, muted and on a loop. If you set both an image and a video, the video is shown.

• Media overlay opacity: Darkens the media so text stands out, 0–100%.

• Text

  • Heading: The card's title.

  • Heading size: 15–80px.

  • Description: Supporting text.

  • Desktop content position: Where the text sits on desktop: Top, Middle or Bottom, combined with Left, Center or Right.

• Button

  • Button label: Leave it blank to hide the button.

  • Button link: Where the button goes.

  • Use outline button style: Shows the button with an outline instead of a solid fill.

• Colors

  • Heading and Text: The colors of the heading and description.

  • Button label, Button background and Button outline: The colors of the button. Button outline applies when Use outline button style is on.

• Mobile layout

  • Mobile content position: Where the text sits on mobile: Top, Middle or Bottom, combined with Left, Center or Right.

4. Tips

• In Grid layout, set Desktop width to 50% for two cards per row, or 100% for a full-width card. You can mix widths, for example 70% and 30%.

• Use images with the same shape for all cards, especially with Adapt to first media size on.

• Raise Media overlay opacity if the text is hard to read over bright images.