Product card settings

Featured links

1. Shopify documentation on the theme editor
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on product cards settings
4. Company XYZ documentation on product variants

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use these settings to fine-tune how product cards appear wherever this shared card pattern is used. You can keep cards aligned with your broader theme defaults or override them when a specific product listing needs a different presentation. For broader context on how these settings fit into the theme editor, see Shopify documentation on the theme editor

Card settings

This group controls the overall look and information density of product cards. It is most useful when you want to adjust how visual, compact, or action-focused product listings feel without changing every card-related setting globally. For more background on how these controls relate to theme components, see Shopify documentation on sections and blocks

The card settings reference page includes extra guidance on how these overrides relate to broader theme behavior: product cards

Card style

Card style changes the structure and spacing of each product card. Use it to make cards feel more editorial, more compact, or more utility-focused depending on the collection and the quality of your product imagery.

More structured or padded styles usually work best when product photos vary in framing or background. Tighter styles can fit more products into a row, but they also make inconsistencies more noticeable.

If your product images are cropped inconsistently, choose a style with more visual structure or spacing to keep product grids looking intentional.

Image aspect ratio

You can choose separate image ratios for desktop and mobile, which is helpful when one crop does not work well on both screen sizes. Fixed ratios usually create a cleaner, more consistent grid, especially when your catalog mixes different image shapes.

Wider ratios can feel more editorial, while square or portrait ratios often make product listings easier to scan. If your photography is already carefully prepared, using the default or theme-level ratio may preserve the intended framing better.

Tip

Always check mobile after changing image ratios. A crop that looks balanced on desktop can feel too tight on smaller screens.

Button style

This setting controls how prominent the product-card action appears. Hide it for a cleaner browsing experience, or use a text-based style when customers need a clearer action cue.

Compact button styles help keep dense grids tidy. On mobile, the action uses an icon-only style, so make sure the card still feels clear and usable when the label is no longer shown.

Card text

Card text controls how much written product information appears on each card. More text can help explain a product quickly, while less text creates a cleaner, more image-led layout.

Showing both title and excerpt works best when the supporting copy is short and consistent. If excerpts are uneven in tone or length, title-only cards are usually easier to scan.

Text alignment

Text alignment affects both readability and visual tone. Left alignment is usually the clearest choice for product grids, while centered text can feel more promotional or design-led.

Vertical alignment matters most in layouts where text sits within a more stylized card. The middle position only applies to the banner card style, so it is mainly useful for banner-based product card treatments.

Card variant selector

The variant selector lets customers preview or choose options directly from the product card using swatches or pills. This is especially useful when color, pattern, or image-based variation is an important part of the buying decision.

If your catalog has simple products or inconsistent variant presentation, hiding the selector can keep cards cleaner. When you do enable swatches or pills, make sure variant data is set up consistently so customers get a reliable experience.

For setup guidance, see product variants

Note

Variant selectors require additional setup. If swatches or pills look incomplete or inconsistent, review your variant setup before enabling them broadly.

Usage notes

1. Use overrides selectively. Keep theme-level settings in place unless a specific product-card context needs a different look or behavior.
2. Choose ratios for consistency. Fixed image ratios help unify mixed photography, while default ratios preserve more natural image framing.
3. Design for mobile first. Since product-card actions become icon-only on mobile, rely on strong imagery and clear text to keep cards understandable.
4. Keep text purposeful. Show excerpts only when they add useful product context; otherwise, simpler title-led cards usually scan better.
5. Enable selectors where they matter. Use swatches or pills for products with meaningful visual choices, and confirm your variant setup is consistent before rolling them out widely.
6. Review slider-style cards on both viewports. If you choose a slider-like presentation, check navigation, pagination, and spacing on desktop and mobile because the layout can behave differently from a static grid.
7. Check separate media choices carefully. When desktop and mobile use different image crops, review both versions for readability, fallback framing, and any unwanted cropping.