Theme Settings - Product card

What are Product card?

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

1. Product card

• Show quickview: Toggle to enable or disable a quick view pop-up for a product.

2. Product image

• 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.

3. Product info

• 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.

4. Color list

• 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.

5. Badges

• Badge shape: This option with two choices: "Rectangle" and "Round"

+ Rectangle: This option displays product badges in a rectangular shape.

+ Round: This option displays product badges with rounded corners,

6. Miscellaneous

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

Updated on: 18/08/2025