Product cards

These settings apply to product cards displayed in sections, as well as on collection and search pages.

Setting Description
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.
Style
  • Standard: This option displays product cards without visible borders or background color on the content container.
  • Card: This option arranges the image, heading, price, and buttons within a single card with a distinct background from the surrounding section.
Image padding Add “Image padding” using the slider. This adds space around your card images.
Text alignment

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

  • Left
  • Center
  • Right
Product title text style

This option controls the capitalization style of product titles:

  • None — The text is displayed exactly as entered in the admin panel.
  • Capitalize — Each word starts with a capital letter.
  • Uppercase — All text is displayed in uppercase letters.
Quick view and compare icons border radius This option allows you to control the border radius of the Quick View and Compare icons. Select the desired value using the slider.

Style:

  • STANDARD

  • CARD

Image padding


Border settings


Setting Description
Corner radius Use the slider to control the corner shape of product cards. Achieve the desired level of roundness or squareness, aligning them with your design vision. The range is from 0px to 40px.
Thickness Use the slider to adjust thickness of border. The range is from 0px to 10px.
Opacity You can increase or decrease visibility of border color to make it more expressive or less noticeable. The range is from 0% to 100%.

Thickness and opacity

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