Article cards

Overview

The Article cards theme settings group provides global controls for the presentation of article previews throughout your shop. These options enable you to seamlessly blend imagery, text, and badges, maintaining a visually consistent and engaging feel. Adjusting these settings updates the default style of every article card, unless section- or block-specific overrides are in effect. Fine-tuning Article cards allows you to highlight stories, reinforce branding, and optimize browsing for your audience.

A unified card style makes it easier for users to scan, discover, and interact with your articles while reinforcing your brand’s identity.

⚠️ Important: Changes made within Article cards impact every article preview on your site. Regularly review and test these settings to keep articles attractive, accessible, and on brand.

Key components and functionality

Article cards overview

Article cards allow you to summarize articles with thoughtfully organized visuals, headlines, metadata, and tag badges. The following settings shape the information hierarchy of your article previews and let you control which elements users notice first. By selecting preferred layouts and details, you drive both readability and engagement.

Image aspect ratio

Image aspect ratio determines how featured images are cropped on desktop screens, ensuring a visually harmonious grid or list layout.

1. Default

   1. Uses your theme’s global aspect ratio.

2. Landscape (Default)

   1. Emphasizes a wide, horizontal crop.

3. Portrait

   1. Creates a tall, magazine-like image effect.

4. Square

   1. Delivers a modern, grid-aligned appearance.

5. Ultrawide

   1. Highlights images in a dramatic, extra-wide format.

6. Widescreen

   1. Offers a cinematic style, perfect for visual storytelling.

Mobile image aspect ratio

Mobile image aspect ratio adapts how images are displayed on mobile screens for optimal clarity and impact.

1. Default

   1. Inherits the current global or desktop ratio.

2. Landscape (Default)

   1. Keeps images wide, suitable for most mobile layouts.

3. Portrait

   1. Provides a tall, immersive view.

4. Square

   1. Ensures consistency and neatness in compact feeds.

5. Widescreen

   1. Maintains a classic video-friendly format.

6. Ultrawide

   1. Stretches images wider for a bold effect, even on smaller screens.

Caption display

Caption display sets which metadata details (such as author or publication date) show beneath the article headline.

1. Author (Default)

   1. Displays the author’s name.

2. Date

   1. Shows only the publication date.

3. Author and date

   1. Combines both fields for greater context.

4. None

   1. Hides the caption for a cleaner design.

Display text

Display text determines how much article context to show, letting you choose the right balance of information for your layout.

1. Title and excerpt (Default)

   1. Shows a headline with a short summary.

2. Excerpt only

   1. Reveals only the excerpt or introductory text.

3. Title only

   1. Displays only the article’s headline.

4. No text

   1. Hides both title and excerpt for a purely visual card.

Tag badges

Tag badges add highlighted labels to article cards, making it easier for users to recognize special topics, trends, or categories. Enter tag names separated by commas to display badges only for articles matching those tags. Leaving this area blank will show no badges.

Highlight only a few, high-impact tags to make scanning and filtering content effortless.

💡 Tip: Use tag badges to highlight trending topics, editorial themes, or feature series. Limit badge count per card to prevent visual overload and keep your design clean.

Usage notes

1. Preview Article cards on both desktop and mobile to ensure cards appear clear, organized, and visually appealing.

2. Balance aspect ratio and padding with text alignment so cards remain readable and accessible across all devices.

3. Ensure card text, tag badges, and button styles have enough color contrast for accessibility.

4. Choose concise, meaningful tag badges to aid navigation and scanning.

⚠️ Important: Selecting and testing your Article cards settings carefully guarantees a professional, accessible, and engaging visitor experience. Try different combinations for distinct article types and preview their presentation before finalizing your choices.

Resources