Collection card
The Collection card in Seventh shows a collection with its image, title, product count and description in grids, lists and mega menus.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Collection card shows one collection with blocks that read their content from that collection: its title, image, product count and description. A card is a block that holds other blocks.
Where to find it: the Collections list section and the collections list page contain a Collection card for each collection they show. To show a single collection, select Add block inside a Custom grid section, then choose Collection card.
Where you can use it
- In collection lists: the Collections list section and the Collections list grid (the collections list page). You style one card, and it repeats for every collection of the section. The collections come from the section, so the card has no Collection setting to fill in.
- For a single collection: Custom grid section, Promotions cards in the Navigation drawer section and Mega menu in the Header section. Select the collection in Collection.
The Card style settings set the card's alignment, spacing, padding, corners and color scheme.
Blocks you can add
A Collection card accepts these collection blocks, plus any theme block and app blocks:
- Collection title: the collection name, linked to the collection.
- Collection image: the collection image. When the collection has no image, the image of its first product is used. Custom image replaces both.
- Collection count: the number of products in the collection, for example "23 products".
- Content group: groups blocks in a row or column. Inside a Content group you can also add Collection description.
Tip: Use metafields to set up custom collection images for your collections, to display them in collection cards.
The Collection title, Collection count and Collection description blocks are also used in the Main header of the collection page. Their settings are listed on this page.
Common use cases
- Featured collections: highlight key collections on the homepage or landing pages.
- Category navigation: help customers browse by product type, use case or theme.
- Seasonal merchandising: promote seasonal or limited collections with strong visuals.
- Editorial layouts: mix collection cards with content cards for more dynamic page structures.
How do I show a different image on a collection card?
Set Custom image in the Collection image block. The custom image replaces the collection image on that card only. To change the image everywhere, change the collection image in Shopify admin → Products → Collections.
All Collection card settings
Every setting on this page, one list per section or block, with its type and default.
Accepts these blocks: Collection title, Collection image, Content group, Collection count, any theme block and app blocks.
Collection (collection picker): Selects the collection the card shows. Not needed in the Collections list section and on the collections list page, where the section sets the collection of each card.
Collection card: Card style
Where to find it: Custom grid → Collection card → Card style
Text alignment (alignment, default: Left).
Inner blocks spacing (dropdown, default: Small). Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Padding (dropdown, default: Regular). Options: XSmall, Small, Regular, Large, XLarge, XXLarge. Shown only when Remove card background is off.
Add padding to media elements (checkbox, default: on): Adds the card padding around the Collection image and other media blocks inside the card. It does not affect the card background media. Shown only when Remove card background is off.
Remove card background (checkbox, default: off): Removes the card background color and the padding around the card content.
Corner radius (dropdown, default: None): Sets the corner rounding of the card itself, not of the blocks inside it. Options: None, Slighty rounded, Rounded, Fully rounded. Shown only when Remove card background is off.
Color scheme (color scheme, default: Scheme 2).
Collection card: Background
Where to find it: Custom grid → Collection card → Background
Show media background (checkbox, default: off): Shows an image or video behind the card content. Shown only when Remove card background is off.
Background image (image). Shown only when Show media background is on and Remove card background is off.
Background video (video): Plays a muted, looping video behind the card content. When both are set, the video replaces the image. Shown only when Show media background is on and Remove card background is off.
Media overlay (dropdown, default: Color). Options: Color, Gradient. Shown only when Show media background is on and Remove card background is off.
Overlay color (color with transparency, default: rgba(0,0,0,0.1)). Shown only when Show media background is on and Remove card background is off and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Show media background is on and Remove card background is off and Media overlay is Gradient.
Where to find it: Collections → Default collection → Main header → Collection title. It is also available in: Collection card, Content group.
Displays title from parent collection.
Collection title block: Typography
Where to find it: Collections → Default collection → Main header → Collection title → Typography
Font (dropdown, default: Headings). Options: Body, Headings, Accent.
Text size (dropdown, default: Heading 3). Options: Heading 1, Heading 2, Heading 3, Heading 4, Heading 5, Heading 6. Shown only when Font is not Body.
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge, XXLarge. Shown only when Font is Body.
Line height (dropdown, default: Default). Options: Default, Smallest, Smaller, Larger, Largest.
Apply accent font to (dropdown, default: None): Sets which part of the title uses the accent font: the first word, the first letter or the last word. Options: None, First word, First letter, Last word. Shown only when Font is Headings.
Text weight (dropdown, default: Normal). Options: Normal, Bold.
Case (dropdown, default: Default). Options: Default, Uppercase.
Reduced text opacity (checkbox, default: off): Shows the text at 62 percent opacity (69 percent on dark color schemes), for secondary text such as captions or notes.
Custom text color (color, default: transparent): Sets a text color that replaces the color scheme text color. Leave it transparent to use the color scheme.
Collection title block: SEO
Where to find it: Collections → Default collection → Main header → Collection title → SEO
HTML tag (dropdown, default: Heading 3): Sets the HTML heading level of the title for search engines. It does not change the size. Options: Heading 1, Heading 2, Heading 3, Heading 4, Paragraph.
Where to find it: Custom grid → Collection card → Collection image.
Displays image from parent collection.
If the collection doesn't have an image, it will fallback to the first product image.
Custom image (image): Replaces the collection image on this card only.
Media aspect ratio (dropdown, default: Uncropped: Natural): Sets the shape of the image. Natural shows the image at its uploaded shape; the other ratios crop it. Options: Uncropped: Natural, Cropped: Short (4:3), Cropped: Square (1:1), Cropped: Tall (5:6), Cropped: Taller (2:3).
Media focal point (dropdown, default: Center): Sets which part of the image stays visible when the ratio crops it. Options: Top, Center, Bottom. Shown only when Media aspect ratio is not Uncropped: Natural.
Corner radius (dropdown, default: None): Sets the corner rounding of the image. Options: None, Slighty rounded, Rounded, Fully rounded.
Where to find it: Collections → Default collection → Main header → Collection count. It is also available in: Collection card, Content group.
Displays collection count from parent collection.
Collection count block: Typography
Where to find it: Collections → Default collection → Main header → Collection count → Typography
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge.
Line height (dropdown, default: Small). Options: Default, Smallest, Smaller, Small, Larger, Largest.
Text weight (dropdown, default: Normal). Options: Normal, Bold.
Case (dropdown, default: Default). Options: Default, Uppercase.
Reduced text opacity (checkbox, default: off): Shows the text at 62 percent opacity (69 percent on dark color schemes), for secondary text such as captions or notes.
Custom text color (color, default: transparent).
Where to find it: Collections → Default collection → Main header → Collection description. It is also available in: Content group.
Displays collection description from parent collection.
Collection description block: Typography
Where to find it: Collections → Default collection → Main header → Collection description → Typography
Text size (dropdown, default: Medium). Options: XXSmall, XSmall, Small, Medium, Large, XLarge, XXLarge.
Line height (dropdown, default: Default). Options: Default, Smallest, Smaller, Larger, Largest.
Text weight (dropdown, default: Normal). Options: Normal, Bold.
Case (dropdown, default: Default). Options: Default, Uppercase.
Reduced text opacity (checkbox, default: off): Shows the text at 62 percent opacity (69 percent on dark color schemes), for secondary text such as captions or notes.
Custom text color (color, default: transparent).
Related pages
- Collections list section: shows several collections with this card.
- Collections list page: the collections list template, which uses this card.
- Collection page: uses the Collection title, count and description blocks in its Main header.
- Custom grid section: add a single Collection card.
- General section styling: the Section design and Cards arrangement settings of the parent section.