Card settings

Featured links

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

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these settings when a card-based area needs a different presentation than your broader theme defaults. They let you fine-tune how cards look and read without changing every other card style across the storefront. For a broader overview of where these settings fit, see Shopify documentation on sections and blocks

Card appearance

Card style controls the overall presentation of each card, including how much structure, spacing, or image emphasis it has. This is the best place to start if cards feel too busy, too plain, or out of step with the content they are showing.

Styles with more padding usually make mixed content easier to scan. More image-led styles work better when photography should carry most of the message.

Keep Use theme setting when you want consistency with the rest of the theme. Override it only when this card group has a clear visual or content-specific need.

Image proportions

Image aspect ratio controls how card images are cropped and framed. Separate desktop and mobile settings are especially useful when the same crop looks balanced on large screens but cuts off important content on smaller ones.

Landscape and widescreen ratios usually suit horizontal imagery and denser layouts. Square and portrait ratios can create a stronger grid or give taller images more room. If images look awkward on phones, adjust the mobile ratio first instead of compromising the desktop layout.

Card buttons

Button style changes how strongly the card’s action is presented. Use more prominent styles when cards are meant to drive clicks, and lighter styles when the title and image already make the destination clear.

Smaller buttons help reduce visual noise in tight grids. Hiding the button can work in very clean, image-led layouts, but only if the card still reads as clearly interactive.

Card text

Text display controls how much written context appears inside each card. This affects both scanning speed and how much guidance customers get before clicking.

Showing both title and excerpt works well when cards need explanation or when images are less descriptive. Title-only layouts are cleaner and usually work best when the image and label already do enough work. Minimal text styles are best reserved for highly visual layouts with strong surrounding context.

Text alignment

Horizontal and vertical alignment help text feel intentional within the chosen card style. Alignment becomes more important in image-led layouts, where placement affects readability as much as visual style.

Left-aligned text is usually easiest to scan in grids, while centered text feels more promotional. Vertical positioning matters most in banner-style cards and other layouts where text sits over or alongside the image.

Note

Middle vertical alignment applies only to the Banner card style. In other styles, top or bottom placement gives more predictable results.

Reusable overrides

These settings are intended as local overrides for reusable cards. Leaving most options on Use theme setting helps maintain consistency, while selective changes let you adapt a specific card group for different content types, image shapes, or browsing behavior.

If you find yourself changing nearly every option, review the overall presentation of that card area. A lighter set of targeted overrides usually creates a more consistent result than rebuilding the card style from scratch.

For more detail on the available controls, see Company XYZ documentation on settings/cards and Shopify documentation on customizing sections

Usage notes

1. Review both breakpoints. Desktop and mobile controls can affect layout, alignment, visibility, and media behavior differently, so check both views before publishing.
2. Watch slider behavior. Slider-style presentations can change navigation, pagination, previews, and breakpoint behavior compared with a static grid or stacked layout.
3. Keep fallbacks simple. Blank, transparent, or default-style values usually preserve the broader fallback styling, while explicit colors, gradients, or media overrides make the local area more independent.
4. Protect image readability. When desktop and mobile media are set separately, confirm cropping, loading, fallback, and text contrast on both screens.
5. Preserve clear navigation cues. If cards include menus, drawers, nested links, or mobile-only controls, make sure hidden or reordered items do not block the path customers expect to follow.