Success
Article card settings
Control the default design and content shown on article cards across your theme.
These settings define the default appearance of article cards across your theme. Use them to create a consistent reading and browsing experience in blog listings, featured article areas, and other places where articles appear, while still allowing individual sections to override the defaults when needed. For broader setup context, see Shopify documentation on the theme editor and Shopify documentation on sections and blocks
You can also review the article card reference for additional context.
Card layout and image shape
Section titled “Card layout and image shape”Start with the card style, since it sets the overall structure and tone of article previews. A more visual style can make editorial content feel richer, while a simpler style can help dense article grids feel cleaner and easier to scan.
Image aspect ratio controls how article images are cropped inside each card. Because desktop and mobile ratios are set separately, you can keep cards balanced on larger screens and still avoid awkward cropping on smaller devices.
If your article images vary a lot in shape or composition, choose image ratios that still look intentional when cropped. Consistent ratios usually produce a neater card grid.
Text, metadata, and calls to action
Section titled “Text, metadata, and calls to action”These settings control how much article information appears on the card. You can emphasize discovery with both title and excerpt, keep things tighter with title only, or reduce text further when the layout is meant to be more visual.
Caption settings let you show the author, date, both, or neither. This can help you balance editorial context against visual simplicity, depending on whether recency and authorship matter in your content strategy.
Button style changes how strongly the card signals interaction. More prominent button styles can help in content-heavy layouts, while lighter styles work well when the card itself already reads clearly as clickable.
Text alignment and positioning
Section titled “Text alignment and positioning”Horizontal alignment affects how formal or design-led the cards feel. Left-aligned text is usually easiest to scan in article grids, while centered text can suit more stylized layouts.
Vertical text alignment matters most with the banner card style, where text placement changes the balance between image visibility and overlay content. Use it to decide whether the card should feel more image-led or more text-led.
Tag badges
Section titled “Tag badges”Tag badges let you highlight articles with specific tags by showing a badge in the card corner. This is useful when you want to call out content such as featured stories, announcements, guides, or seasonal articles without changing the full card layout.
Enter tags as a comma-separated list and keep tag naming consistent. Badges work best when used selectively so they stay meaningful and do not overcrowd article listings.
Usage notes
Section titled “Usage notes”- Choose structure first. Set the card style before fine-tuning text and image settings, since the layout affects how every other choice reads.
- Review mobile separately. Check the mobile image ratio and any desktop or mobile-specific controls on real article cards so cropping, spacing, and visibility still work well at both sizes.
- Match detail to browsing intent. Show more text for discovery-focused article lists, and reduce text for tighter or more visual layouts.
- Keep defaults flexible. Blank, transparent, or default-style values usually preserve fallback styling, while explicit colors, gradients, or media overrides make the card feel more independent.
- Use badges sparingly. Highlight only a small set of important tags so badge treatment stays noticeable.
- Expect content source limits. Article cards can only surface what is available from the selected content, so tags, article data, pagination, and related results may affect what appears in the grid.