Skip to main content

Product Card

The product card settings allow you to customize the appearance and functionality of product cards in your store. You can adjust various aspects such as layout, text, buttons, and more.

Settings​

  • Show brand name above product title: Show the brand name above the product title in the product card.
  • Center product card content: Center the content of the product card.
Brand and Content Settings

Product Title​

  • Limit product title to 1 line: Limit the product title to 1 line in the product card.
  • Change product title font weight: Change the font weight of the product title in the product card.
  • Change product Price font size: Change the font size of the product Price in the product card.
Product Name Options

Background​

  • Customize product card background color: Set a custom background color for the product card.
    • Background Color in Dark Mode: Set a custom background color for the product card in dark mode.
    • Background Color in Light Mode: Set a custom background color for the product card in light mode.
  • Background Transparency: Set the transparency of the product card background.
Product Card Background Options

Product Border​

  • Product card radius: Set the radius for the product card corners.
  • Enable Product Border: Enable or disable the border around the product card.
    • Border Width: Set the width of the product card border.
    • Border Color: Set the color of the product card border.
    • Border Style: Choose the style of the product card border (solid, dashed, dotted, etc.).
Product Card Border Options

Product Options​

  • Show Product Options: Show or hide product options in the product card.
    • Show Product Options Labels: Show the labels for product options in the product card.
    • Display Product Single Options as Buttons: Show product single options as buttons in the product card.
    • Display Product Multiple Options as Buttons: Show product multiple options as buttons in the product card.
Product Options

Save Amount​

  • Enable Save Amount: Enable or disable the "Save Amount" feature in the product card.

    • Save Amount Text: Set the text for the "Save Amount" feature in the product card.

      tip

      You can use variable {save_amount} to display the saved amount in the text.

Save Amount

Discount Amount​

  • Enable Discount Amount: Enable or disable the "Discount Amount" feature in the product card.

    • Text: Set the text for the "Discount Amount" feature in the product card.

      tip

      You can use variable {percent} to display the discount amount in the text.

    • Horizontal Position: Choose the horizontal position for the "Discount Amount" label in the product card.

    • Vertical Position: Choose the vertical position for the "Discount Amount" label in the product card.

    • Text Color: Set the text color for the "Discount Amount" label in the product card.

    • Background Color: Set the background color for the "Discount Amount" label in the product card.

Discount Amount

Promotional Label​

  • Enable Promotional Label: Enable or disable the promotional label in the product card.

    • Horizontal Position: Choose the horizontal position for the "Promotional" label in the product card.
    • Vertical Position: Choose the vertical position for the "Promotional" label in the product card.
Promotional Label

Customize Label​

  • Text Color: Set the text color for the "Promotional" label in the product card.
  • Background Color: Set the background color for the "Promotional" label in the product card.
Promotional Label Design

Product Card Elements​

Rating​

  • Hide Product Rating: Hide the product rating in the product card.

    tip

    When rating is not hidden you have the option to:

    • Rating position: Choose the position of the product rating in the product card.
Product Rating

Buttons​

  • Hide Wish List Button: Hide the wish list button in the product card.
  • Hide Add to Cart Button: Hide the add to cart button in the product card.
  • Show Product Category: Show the product category in the product card.
Hide Elements

Out of Stock​

  • Hide Out of Stock button: Hide the out of stock button in the product card.
Hide Out of Stock
  • Show Out of Stock Stamp: Show the out of stock stamp in the product card.
    • Out of Stock Stamp Color: Set the color for the out of stock stamp in the product card.
    • Out of Stock Stamp Text: Set the text for the out of stock stamp in the product card.
Out of Stock Stamp
Last updated on by Moneef Alnahdi