Sampo
documentation

Product card

General

Product cards are used throughout your theme to display product information consistently. The settings in this section apply to all product cards across the theme, ensuring a unified appearance in different sections.

Customization options

Text Position

Choose where to display product information (such as the product title and price):

  • Inside the card: Text is placed within the boundaries of the product card.
  • Outside the card: Text is positioned below the product image, creating a clear separation.

Text Alignment

Select the text alignment for the product card: left, center, or right. This controls how the product title, price, and other text are positioned within the card.

Card Image

Image Aspect Ratio

Choose the aspect ratio for product images:

  • Natural: Keeps the original dimensions of the product image.
  • Portrait (2:3): A taller rectangular format.
  • Portrait (3:4): Slightly shorter than 2:3.
  • Square (1:1): A perfect square for uniformity.
  • Landscape (4:3): A horizontal rectangular format.

Tip

Leave the aspect ratio set to "Natural" if you want to maintain the original dimensions of your images without forcing any cropping.

Media Fit

Define how the product image fits within the product card:

  • Fill: The image will stretch to completely fill the designated area, possibly cropping parts of the image.
  • Original: The image will maintain its original proportions and size, without cropping or stretching.

Show Second Image on Hover

Activate this feature to display the second image from the product gallery when a user hovers over the product card. This provides a dynamic and interactive browsing experience.

Title Typography

Define the typography for product card titles. 

  • Select font: Body font, Body font (bold) or Heading font.
  • Select sizes for desktop and mobile view.

Price Typography

Define the typography for prices in the product cards.

  • Font weight: Regular or Bold.
  • Select sizes for desktop and mobile view.

Additional elements

Show Vendor

Enable this setting to display the vendor name for each product.

Show Badges

Enable badges on product cards. Find badge style settings and custom badge definitions from Theme settings > Product badges.

Show Rating Stars

Display star ratings for products based on customer reviews:

  • Supports ratings via standard metafield definitions.
  • Ensure your product review app provider follows Shopify’s guidelines to enable this feature.

Quick buy

Enable Quick Buy buttons on product cards. You can also define the Quick Buy behavior:

  • Add to Cart
  • Quick View (Note: If the product has multiple variants, Quick View will be used.)

Color swatches

Enable color swatches to display on product pages and product cards.
See Shopify's guidance for adding swatches using category metafields.

Variant availability

Displays availability for a single variant option. By default, it shows Size availability, but this trigger can be modified in theme translations under:

  • Product > Card availability option trigger

Advanced

Display additional product information from metafields on product cards.

  • Add metafields as a comma-separated list of "namespace.key" values.
  • Example: namespace.key, namespace.key

Tips for Customizing Product Cards

  • Experiment with different aspect ratios and media fits to find the best balance for your product images.
  • Use padding and text alignment to maintain a clean, professional design.
  • Activate engaging effects like the second image on hover and rating stars to engage customers and highlight your products effectively.

These settings provide flexibility to create visually appealing product cards that align with your store's branding.