Product cards

Setting Description
Style
  • Standard: This option displays product cards without any visible border or color container view.
  • Card: This option arranges the image, heading, price, and buttons within a single card with a distinct background or visible border from the surrounding section.
Subheading Create a metafield of type "Single line text" to customize info. Paste name here (e.g.,"Product info") Learn more.
Color variant name Add here the same variant name as on product detail page in admin panel. In this field, you have the flexibility to replace “color” with various alternatives such as "colour", “palette”, “hue”, “shade”, “tint”, or “tone”, or even write it in another language of your choice.
Image padding Add Image padding using the slider. This adds space around your card images.
Heading weight

This option allows you to select the desired font weight for product card headings. Simply choose the level of thickness that best fits your store’s style:

  • Normal
  • Medium
  • Semi Bold
  • Bold

Adjusting the font weight helps control the visual hierarchy and emphasis of product titles in your storefront.
Text alignment

You have three alignment options for positioning text under a product image or within the product card (type, heading, price, color swatches…):

  • Left
  • Center
  • Right
Color scheme Applying a chosen color scheme to product cards from a suggested list of color schemes automatically updates all associated colors for a cohesive and professional look across your website.

Color swatches on product cards

Three steps to show:

  1. Create a color variant

  1. Add name into “Color variant name” field in Product cards tab of theme settings

  1. Navigate to section where color swatches should be displayed, and enable “Show color variants” option

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us