Product cards

Overview #

The theme settings for product cards allow you to customize the appearance and functionality of product cards across your shop. These settings are applied globally but can be overridden at the section or block level. They enhance the visual appeal and usability of the shop by providing a range of customization options.

Key components and functionality #

Product cards

This setting group allows you to customize the appearance and functionality of product cards. These settings can be overridden by section settings if needed.

Card style

This setting determines the visual style of the product card.

• Options: Banner, No image, No padding, Padding
• Default: Padding

Image aspect ratio

This setting controls the aspect ratio of images within product cards.

• Options: Default, Landscape, Portrait, Square, Widescreen, Ultrawide
• Default: Square

Image style

This setting defines how images are displayed on the product card.

• Options: Single image, Slideshow
• Default: Single image

Button style

This setting customizes the style of buttons on product cards.

• Options: Hide, Icon only, Text only, Text with icon
• Default: Text with icon

Text display

This setting controls the text displayed on product cards.

• Options: Title and excerpt, Excerpt only, Title only, No text
• Default: Title and excerpt

Text alignment

This setting allows you to align text horizontally and vertically on product cards.

• Horizontal alignment options: Left, Center, Right
  • Default: Left
• Vertical alignment options: Top, Middle, Bottom
  • Default: Bottom

Collection badges

This setting allows you to display collection badges on product cards.

Price display

This setting toggles the display of product prices on cards.

• Default: True

Quick-add button

This setting enables a quick-add button on product cards, allowing users to add products to their cart directly.

• Default: True

Variant selector

This setting shows a variant selector on product cards.

• Default: False

Vendor display

This setting toggles the display of the vendor name on product cards.

Card hover settings

These settings allow you to customize the behavior of product cards when hovered over.

Hover media

This setting determines the media displayed when a product card is hovered over.

• Options: None, Last item, Second item, Second-to-last item, Use metafield
• Default: None

Hover media metafield

This setting allows you to specify a metafield for hover media.

Slideshow settings

These settings control the slideshow functionality for product cards.

Column count

This setting specifies the number of columns in the slideshow for desktop and mobile.

• Desktop default: 1
• Mobile default: 1

Animation style

This setting defines the animation style for slideshows.

• Options: Default, Fade
• Default: Default

Pagination style

This setting controls the pagination style for slideshows.

• Options: Dynamic, Fraction, Progress bar, Scrollbar

Autoplay settings

These settings control the autoplay functionality for slideshows.

• Autoplay delay: 0 to 10 seconds, Default: 4 seconds
• Animation speed: 0.1 to 5 seconds, Default: 0.8 seconds
• Autoplay enabled: False

Navigation and pagination display

These settings toggle the display of navigation and pagination controls.

• Show navigation: True
• Show pagination

Color swatch settings

These settings allow you to customize the display of color swatches on product cards.

Color swatches

This setting toggles the display of color swatches.

• Default: False

Swatch style

This setting defines the style of color swatches.

• Options: Circle, Landscape, Portrait, Square, Widescreen
• Default: Circle

Column count

This setting specifies the number of columns for color swatches on desktop and mobile.

• Desktop default: 4
• Mobile default: 4

Option names

This setting allows you to specify option names for color swatches.

Image swatch settings

These settings allow you to customize the display of image swatches on product cards.

Image swatches

This setting toggles the display of image swatches.

• Default: False

Swatch style

This setting defines the style of image swatches.

• Options: Default, Circle, Landscape, Portrait, Square, Widescreen
• Default: Square

Column count

This setting specifies the number of columns for image swatches on desktop and mobile.

• Desktop default: 4
• Mobile default: 4

Option names

This setting allows you to specify option names for image swatches.

Swatch border settings

These settings allow you to customize the border of swatches on product cards.

Swatch border

This setting toggles the display of borders around swatches.

• Default: True

Border color

This setting allows you to specify the color of swatch borders.

Active border color

This setting allows you to specify the color of active swatch borders.

Usage examples #

1. Customizing product card appearance: Use the card style and image aspect ratio settings to create a unique look for your product cards that aligns with your brand's aesthetic.

2. Enhancing user interaction: Enable the quick-add button and variant selector to streamline the shopping experience, allowing customers to quickly add products to their cart and choose variants directly from the product card.

3. Improving visual appeal: Utilize the hover media and slideshow settings to add dynamic elements to your product cards, making them more engaging and visually appealing to customers.

These settings provide a comprehensive toolkit for tailoring the appearance and functionality of product cards, ensuring they meet the specific needs and preferences of your shop.