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.
The product card displays key information including the product image, product details, color options, badges, and more.
Go to Theme settings > Product card to config it
Show quickview: Toggle to enable or disable a quick view pop-up for a product.
Show secondary image on hover: Toggle that, when enabled, displays a second image of the product when the user hovers their mouse over the product image.
Title maximum lines: This option to set a limit on the number of lines for the product title. Value is 0 to auto line. If enable will affect hover effect of title
Text alignment: allows the user to choose between "Left" or "Center" alignment for the product information text.
Color display mode: Select the display mode for product color variants (Hide, Count, Color list)
Show color type: Enable this option to display the color type (All color, Only color available)
Config below, requires color display mode is color list.
Color shape: Select the shape of the color swatches or image swatches, includes: Square và Circle
Color image source: Select the image source to be used for the color swatch display.
+ Variant images: When this option is selected, the swatch image for each color will be automatically pulled from the image assigned to that color variant in the product catalog.
+ Custom images: When this option is selected, you can manually upload separate images to be used as the swatches for each color.
Change product image when click swatch on event: Enable this option to change the main product image (on the product page or within a product grid) when a customer clicks on a color swatch or variant image.
Click mode is forced on touch devices.
Enable color limit: Enable this option to limit the number of color swatches or images displayed initially.
Maximum color to show: Enter the maximum number of colors to display before offering a "view more" option.
0 to responsive auto number. Requires color limit is enabled.
Action after color view more is clicked: Select the action that will occur when a customer clicks the "view more" color option.
+ Show all colors: Displays all remaining colors in place.
+ Go to product page: Redirects the customer to the full product details page to view all variants.
Requires color limit is enabled.
Remove collection URL: Remove the collection portion from product URLs for better SEO.
