Blog post

Featured links

1. Company XYZ documentation on cards settings
2. Company XYZ documentation on visibility settings
3. Shopify documentation on sections and blocks
4. Shopify documentation on customizing sections

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to feature a single article as a card with its image, title, excerpt, and read more link. It is a practical choice when you want to spotlight one post in a grid, sidebar, landing page, or editorial layout.

Core settings

Select the article you want the block to display. The block uses the article’s existing content, so the best results usually come from posts with a strong featured image and a clean excerpt.

Tip

If you want to replace the usual article image or text presentation with a more custom promotional layout, use a banner block instead. For an overview of how blocks work in themes, see Shopify documentation on sections and blocks

Standard block settings

Card settings

These settings control how the article card looks and let you override shared card defaults for this block. You can change the card style, image aspect ratio, button style, visible text, text alignment, and caption details to suit the space where the article appears.

Use simpler card styles when the block sits in a dense layout, and use Banner when the article should feel more prominent. Title-only cards work well in tight spaces, while title and excerpt gives readers more context before they click. Shared card behavior is also covered in Card settings.

The mobile image ratio is worth checking separately if the desktop crop looks good but becomes awkward on smaller screens. This is especially important for featured images with faces, text, or important edge details.

Middle vertical text alignment only applies when the card style is set to Banner.

Caption settings help you decide how much article metadata to show. Author and date can add context for editorial content, but they are best hidden when the card needs to stay visually compact.

Color settings

These settings override the shared card colors for this block only. Use them when a featured article needs stronger contrast, a different emphasis level, or a more tailored presentation than your standard cards.

Banner overlay colors apply only when the card style is set to Banner. A solid overlay or gradient can improve text readability over busy images, and the opacity setting helps you balance legibility with image visibility. Shared color behavior is also covered in Card settings.

Note

An overlay opacity value tied to the shared default uses your theme-wide color behavior, while 0% makes the overlay fully transparent.

Visibility settings

Use visibility controls to show this block on all devices or hide it on desktop or mobile. This is useful when you want different article placements, crops, or supporting content for smaller screens. Learn more in Visibility settings. For related theme editor guidance, see Shopify documentation on customizing sections

Editor settings

Editor settings help you keep complex layouts organized. Give the block a clear editor title so you can quickly identify which article card you are updating.

Usage notes

1. Choose a strong article. Pick a post with a clear featured image and a useful excerpt so the card feels complete with minimal adjustment.
2. Match style to placement. Use banner-style presentation for featured editorial moments and simpler card styles for supporting content.
3. Review mobile crops. Check the mobile image ratio after setup to avoid awkward cropping on smaller screens.
4. Protect readability. If text sits over an image, adjust overlay and text colors until the title and excerpt are easy to scan.
5. Use visibility with intent. Hide the block on one device only when an alternate layout makes the reading experience clearer.
6. Preview both states. The theme editor can show the block before live content is available, so review the article card in preview and on the storefront to confirm the final look.
7. Check both viewports. Desktop and mobile controls can produce different alignment, visibility, and media behavior, so confirm the block on both screen sizes before publishing.
8. Keep defaults when you want fallback styling. Leave color and media overrides unset when you want the block to inherit the surrounding card treatment; use explicit overrides only when the article needs a more independent look.