Product Card Settings

In Shopify, a product card is a visual snapshot of a product, displaying essential details like image, title, and price. It streamlines the shopping experience by providing key information without requiring users to visit a separate product page, enhancing the overall user interface design.

To configure it, you will access Theme Settings > Product card.

1. Product Image

There are many options to config Product image:

• Show secondary image on hover: Disable this option if you want to show 1 image for product.

• Effect secondary image: There are 6 effects None, Opacity, Zoom, Move top to bottom, Flip, Rotate

• Product image custom ratio: An image's aspect ratio is the ratio of its width to its height. You will change ratio in the section.

2. Product buttons

• Show quick view

• Show ultra button: Ultra buttons are Quick add, Choose options, Add to cart, View product.

• Show quick add: Requires showed ultra button

• Show quantity selector: Requires showed ultra button and only show with button add to cart. Quantity selector button shows with Product Design 2, 3, 4, 6, 7, 10, 11, 12

3. Product Info

• Text alignment: This option allows you to change align text to Left, Center or Right.

• Show rating: To display a rating, add a product rating app.

• Enable uppercase title: Activate this option to display the title in all uppercase letters for a bold and attention-grabbing look.

• Show full title: Display the full title if it exceeds the standard length.

• Title font size: Adjust the font size of the title to ensure optimal readability and visual hierarchy across your store.

• Title font weight: Customize the thickness of the title text, from light to bold, to match your store’s branding and design aesthetics.

4. Color list

• Color display mode: There are 3 options Hide, Count, or Color List.

• Show color type: This option allows you to show All colors or Only colors available.

Config below, requires color display mode is color list.

• Color shape: There are 2 options Square or Circle

• Color image source: There are 2 options Variant images or Custom images

• Change product image when clicking swatch on event: Swatch color will change when you Hover or Click

• Enable color limit: You can limit the swatch color to show with the options below.

• Maximum color to show: 0 to responsive auto number. Requires color limit is enabled.

• Action after color view more is clicked: You have two options for it Expand all colors or Go to the product page. The required color limit is enabled.

5. Size list

• Size display mode: Hide, Count, or Size list

• Show size type: All size or Only size available

• Enable size limit: You can limit the swatch size to show with the options below.

• Maximum color to show: 0 to responsive auto number. Requires color limit is enabled.

6. Miscellaneous

Remove collection URL: Remove the collection portion from product URLs for better SEO.

7. Options for products on mobile

• Enable minimal product info: Hidden countdown product, color, size list ...

Group product buttons.Only work on mobile

• Hidden add to cart on mobile

• Hidden quickview on mobile

• Hidden wishlist on mobile

• Hidden compare on mobile