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.
Horizontal product card — price font weight

Choose font weight for price in horizontal product cards (small):

  • Normal
  • Medium
  • Semi bold
  • Bold

Note: Check product cards screenshots below the table.

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