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 from the surrounding section.
Shape for style card
  • The default shape features a standard, classic design for your style card, providing a clean and simple look.
  • Choose the Bag Shape for a more unique, non-traditional design. This shape adds a distinctive touch to your store, making it visually more striking and memorable to customers.
Image padding Add “Image padding” using the slider. This adds space around your card images.
Product title alignment

You have three alignment options for positioning a product heading under a product image or within the product card:

  • 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.
Show custom badge Need to add a metafield “custom.badges” with type “Single line text” in Shopify admin. Learn more. Enable the toggle to show custom badge on product card.
Heading font weight

Choose font weight for all product cards: vertical (large) and horizontal (small):

  • Normal
  • Medium
  • Semi bold
  • Bold

Note: Check product cards screenshots below the table.
Heading font family

Sets the font used for product card titles. Options:

• Body — uses the body font from your theme typography settings.

• Heading — uses the heading font from your theme typography settings. (Default)
Product card price font weight

Controls how thick or thin the price text appears on product cards. Options:

• Normal — standard weight. (Default)

• Medium — slightly heavier than normal.

• Semi bold — noticeably heavier weight.

• Bold — the heaviest, most prominent weight.
Horizontal product card. Price font weight

Controls the weight of the price text specifically on horizontal-style product cards. Options:

• Normal — standard weight.

• Medium — slightly heavier than normal. (Default)

• Semi bold — noticeably heavier weight.

• Bold — the heaviest, most prominent weight.

Note: Check product cards screenshots below the table.
Show arrow icon in product card buttons Displays a small arrow icon inside the product card buttons. Disabled by default.
Background color for product card icons Sets the background color behind icons displayed on product cards, such as wishlist or quick-view buttons. Defaults to transparent.

Adding custom badge




Product cards

Vertical product cards (large)

Horizontal product cards (small)


Border settings


Setting Description
Thickness Use the slider to adjust thickness of border. The range is from 0px to 24px.
Opacity You can increase or decrease visibility of border color to make it more expressive or less noticeable.
Corner radius Use the slider to control the rounding of product cards. You can adjust the radius to achieve the desired level of roundness or squareness, aligning them with your design vision.
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