Card settings

Overview #

The Card settings group is a core component of the theme settings, designed to control the visual presentation of cards across the entire site. These settings influence the appearance and behavior of product, collection, and article cards, ensuring a cohesive look and feel. While these settings are applied globally, they can be customized at the section or block level for more specific design needs.

Key components and functionality #

Image aspect ratio

This setting manages the aspect ratio of images within cards, particularly affecting the "Banner" card style. Options include:

1. Use theme setting
2. Default
3. Landscape
4. Portrait
5. Square
6. Widescreen
7. Ultrawide

The default value is use theme setting. This ensures images maintain a consistent appearance, enhancing the overall aesthetic of the site.

Card style

The card style setting defines the visual style of cards. Available options are:

1. Use theme setting
2. Banner
3. No image
4. No padding
5. Padding

The default value is use theme setting. This setting allows for flexibility in card presentation, adapting to different content types and design preferences.

Card text display

This setting controls the text content displayed on cards. Options include:

1. Use theme setting
2. Title and excerpt
3. Excerpt only
4. Title only
5. No text

The default value is use theme setting. This setting helps manage text visibility, balancing information display with design simplicity.

Card button style

This setting determines the style of buttons on cards. Options are:

1. Use theme setting
2. Primary
3. Secondary
4. Extra large
5. Plain
6. Small
7. Small secondary

The default value is use theme setting. Consistent button styling is crucial for maintaining a unified user interface.

Card text horizontal alignment

This setting aligns text horizontally within cards. Options include:

1. Use theme setting
2. Left
3. Center
4. Right

The default value is use theme setting. Proper alignment enhances readability and visual balance.

Card text vertical alignment

This setting manages the vertical alignment of text within cards. Options are:

1. Use theme setting
2. Top
3. Center
4. Bottom

The default value is use theme setting. Vertical alignment affects the overall layout and flow of card content.

Usage examples #

1. Consistent Image Display: You might consider setting the image aspect ratio to "Square" to ensure uniformity across product images, which can be particularly useful for catalog pages.

2. Minimalist Card Design: Consider choosing "No image" and "No text" for a clean, minimalist card style that focuses solely on the product name or price.

3. Highlighting Promotions: You might consider using the "Banner" card style with "Primary" button style to draw attention to promotional items or special offers.

These settings provide a flexible framework for customizing the visual presentation of content, allowing you to tailor the theme to your specific branding and design needs.