Media cards

This section is ideal for showcasing collections, categories, or promotional highlights in a visually engaging format.

---

The Media cards section displays a collection of visual cards (images or videos) with overlay content, ideal for showcasing categories, promotions, or featured content in a flexible layout.

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

Steps:

• In the theme editor, click Add section.

• Locate Media cards.

• Click Save.

2. Section settings

• Layout: Defines how cards are displayed:

Grid

Cards are arranged in multiple rows and columns → suitable for structured layouts like collections or categories.

Slider

• Heading: Adda title to introduce the section.

• Heading size: Adjust the size of the heading to match visual hierarchy.

• Desktop height: Controls the height of all cards on desktop devices.

• Mobile height: Controls card height on mobile devices.

• Adapt to first media size: Uses the first card’s image ratio to define height for all cards.

• Corner radius: Adjusts how rounded the card corners appear (0 = sharp, 40 = fully rounded feel).

3. Card block settings:

Each Card block represents one media item and supports both image and video with layered content.

• Desktop width: Defines how many cards fit per row on desktop.

• Image: Upload the main visual for the card.

• Shopify-hosted video: Upload a video file. If both image and video are set, video will override the image.

• Media overlay opacity: Adds a dark overlay on top of media.

• Text settings

  • Heading: Main title displayed on the card.

  • Heading size: Controls prominence of the title.

  • Description: Add supporting text for additional context.

  • Desktop content position: Precisely position content within the card.

• Button settings

  • Button label & Button link: Add label and assign link for the CTA button to drive action.

  • Use outline button style: Switch between solid and outline styles.

• Color settings: Customize overlay content colors independently from theme defaults:

  • Heading color

  • Text color

  • Button label color

  • Button background color

  • Button outline color

• Mobile layout

  • Mobile content alignment: Adjust alignment of text and buttons on mobile for better readability and spacing.