Product card settings

Overview #

The card settings for products are designed to control the overall look and feel of product cards across the site. These settings are applied globally but can be overridden at the section or block level to allow for more customized displays. They provide flexibility in designing the product display, allowing for a tailored shopping experience that aligns with the brand's aesthetic and functional needs.

Key components and functionality #

Card style

The card style setting determines the visual style of product cards. It offers several options to customize the appearance of cards, impacting how products are presented to customers.

• Options:
  1. Use theme setting
  2. Banner
  3. No image
  4. No padding
  5. Padding
• Default: Use theme setting

Image aspect ratio

This setting controls the aspect ratio of images within product cards, ensuring that images are displayed consistently across the site. It allows for different aspect ratios to be used, which can be particularly useful for mobile contexts where different ratios might be more effective.

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

Button style

The button style setting defines the style of call-to-action buttons on product cards, allowing for customization of how these buttons appear to users. This can help in maintaining a consistent design language across the site.

• Options:
  1. Use theme setting
  2. Hide
  3. Icon only
  4. Text only
  5. Text with icon
• Default: Text with icon

Text display

This setting manages how text is displayed on product cards, providing options for showing different types of text content. It allows for flexibility in how much information is presented to the customer at a glance.

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

Text alignment

This setting allows for the horizontal alignment of text within product cards, ensuring that text is positioned according to design preferences. It can be adjusted to suit different design layouts and user preferences.

• Options:
  1. Use theme setting
  2. Left
  3. Center
  4. Right
• Default: Use theme setting

Vertical text alignment

The vertical text alignment setting controls the vertical positioning of text within product cards. This can affect how text is visually balanced with other elements on the card.

• Options:
  1. Use theme setting
  2. Top
  3. Middle
  4. Bottom
• Default: Use theme setting

Variant display

This setting determines how product variants are displayed on cards, offering various styles for showcasing product options. It provides flexibility in how customers can view and select different product variants.

• Options:
  1. Use theme setting
  2. Hide
  3. Show color swatches
  4. Show color and image swatches
  5. Show image swatches
  6. Show pills
• Default: Use theme setting

Usage examples #

1. Customizing card style for promotions: You might consider using the "Banner" card style to highlight promotional products with a large, eye-catching design.

2. Consistent image display: Setting the image aspect ratio to "Square" can ensure all product images are displayed uniformly, enhancing the visual appeal of the product grid.

3. Minimalist button design: You might consider choosing "Icon only" for the button style to maintain a clean and modern look on product cards, focusing more on the product image and details.

These settings provide a good starting point for designing product displays, allowing for customization that aligns with the unique needs and aesthetics of each shop.