Collection card settings

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on customizing sections

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

These settings control the default appearance of collection cards across your theme. Use them to create a consistent baseline for collection grids, featured collection areas, and other collection-based displays, then override them in individual sections only when a specific layout needs different styling. For a broader overview of how theme parts can be customized, see Shopify documentation on sections and blocks

Card style

Card style sets the overall structure and visual weight of collection cards. It has the biggest impact on how collection listings feel, so it is usually the best setting to choose first.

Banner styles work best when the image should lead and the text can sit on top of it. Padded styles usually feel more conventional and easier to scan in multi-column layouts, while image-free styles can suit simpler, text-led designs.

Changing the global card style can affect collection cards in several places at once. After updating it, check both collection listing areas and any promotional collection displays that use the same defaults.

Image aspect ratio

Desktop and mobile aspect ratio settings control how collection images are framed on different screen sizes. This helps you keep cards visually consistent while still adapting the crop for smaller screens.

Wider ratios can feel more editorial and horizontal, while square or portrait ratios give each collection more visual presence. If your collection images vary a lot, a fixed ratio can make the layout cleaner, but it may crop some images more aggressively.

Tip

If collection images look fine on desktop but crop too tightly on phones, adjust the mobile ratio first. This usually improves small-screen presentation without changing the desktop layout.

Button style

Button style controls whether collection cards show a call to action and how prominent it feels. Use a stronger treatment when you want collection cards to drive clicks more directly, and a lighter treatment when the destination is already obvious from the image and title.

Hiding the button can make dense grids feel cleaner. More prominent button styles are usually a better fit for featured or promotional collection areas.

Card text

You can control how much text appears on each collection card, from title and excerpt to no text at all. This setting affects both clarity and visual density.

Showing both title and excerpt is often the safest choice when collection names need extra context. Title-only or no-text approaches work better when your collection names are clear and the imagery does most of the communication.

Text alignment

Horizontal and vertical alignment control where text sits within the card. These settings are most noticeable in image-led styles, where placement affects both readability and the overall balance of the card.

Left-aligned text is usually easiest to scan in grids. Centered text can feel more polished in promotional layouts, while vertical positioning helps you keep text away from busy parts of an image.

Note

Middle vertical alignment applies only to the banner card style. In other card styles, that placement option does not have the same effect.

Global defaults and overrides

These settings act as theme-wide defaults for collection cards. Some sections can override them locally, which makes this group a good place to establish a consistent starting point before adjusting special cases. For details on editing those section-level controls, see Shopify documentation on customizing sections

Use the global defaults to keep collection cards aligned across the theme, then apply local overrides only where a section has a clear design reason to differ.

Usage notes

1. Choose layout first. Start with card style before adjusting text or buttons, because the overall layout changes how the other settings read.
2. Review responsive behavior. Slider-style presentations can change navigation, pagination, preview, and breakpoint behavior, so check both desktop and mobile views after making layout changes.
3. Review mobile crops separately. Check collection cards on smaller screens whenever images contain key product details, faces, or text.
4. Match text to clarity. Reduce card text only when your collection titles and images are strong enough to explain the destination on their own.
5. Use default styling for flexibility. Blank, transparent, or default-style values usually preserve fallback styling, while explicit colors, gradients, or media overrides make the local card area more independent.
6. Check for local overrides. If one area looks inconsistent after a global change, that section may be using its own collection card settings.