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 #
-
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.
-
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.
-
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.
Align v1.7 is out now! Learn more about our best release yet →