Card settings control corner radius, text alignment, and aspect ratios for cards throughout your store. Once you understand them, you can maintain visual consistency across collection pages, blog listings, and featured content without manually adjusting each section.
What these settings control
- Corner radius for all cards (rounded or sharp corners)
- Text alignment within cards
- Card container aspect ratios
- Media aspect ratios within cards
- How images fit within card boundaries
- Overlay effects for text readability
How to access
Open the Theme Customizer
From your Shopify admin, go to Online Store → Themes → Customize.
Navigate to card settings
In the theme editor sidebar, select Theme settings → Cards.
Adjust settings
Modify corner radius, text alignment, and ratio options as needed.
Save changes
Click Save to apply your changes across all card elements.
Settings
Appearance
Ratios
Media Display
Corner radius
Controls the roundness of card corners, measured in rem units. Higher values create more rounded corners.Available values: 0rem (sharp), 0.5rem, 1rem, 1.5rem, 2rem (very rounded)Match corner radius with your button corner radius for design consistency.
Text alignment
Choose how text is positioned within cards: Left, Center, or Right.Left alignment: Natural reading flow, works with varying text lengths
Center alignment: Symmetrical appearance, use only when all card text is consistently brief
Right alignment: For RTL languages or specific design requirementsCard ratio
Defines the overall shape of the card container.Adapt to image: Card height adjusts to match image dimensions
Portrait (2:3): Taller cards with vertical emphasis
Square (1:1): Uniform, balanced grid appearance
Landscape (4:3): Wider cards for horizontal imageryControls aspect ratio of images and videos within cards.Adapt to image: Media displays at its original aspect ratio
Portrait (2:3): Forces vertical emphasis on all media
Square (1:1): Forces consistent square dimensions
Landscape (4:3): Forces horizontal emphasis on all mediaMedia ratio can be set independently from card ratio. For example, you can have square cards with landscape images inside.
Determines how images fill the card space.Cover: Image fills entire area, may crop edges (recommended for consistent grids)
Contain: Full image visible, may show empty space around edges
Fill: Image stretches to fill space, may distort proportionsWe recommend using Cover for consistent card heights and clean grids.
Enable for mobile: Overlay appears only on mobile devices
Enable for both: Overlay appears on all devices
Disabled: No overlay applied Best practices
- Match corner radius with button settings for design consistency
- Use left alignment for varying text lengths, center alignment only for consistently brief content
- Test card settings with various image sizes before finalizing
- Enable overlays only when text appears over images
- Preview on mobile devices as card appearance can differ on small screens
- Plan for image cropping when using “Cover” fit
Changing card ratios affects how images are cropped. After adjusting these settings, review your collection and blog pages to ensure images display as intended.
- Colors - Coordinate card colors with your overall color scheme
- Typography - Adjust text styles within cards
- Products - Configure product-specific card settings
- Layout - Control overall page width affecting card grids
