Product cards
Jalal avatar
Written by Jalal
Updated over a week ago

Product cards are essential for showcasing your products effectively and engagingly. Using these settings you can customize the appearance and behavior of product cards on your store.


Layout

Choose the layout style for your product cards.

Select the layout style you prefer for your product cards. You can choose from various options to match your website's design and branding.

  • Quickshop: Use this layout for adding a cart icon on your product cards.

  • Standard: This layout removes the cart icon and if you click the product you will go to the product detail page.

Quickshop Behavior

This setting allows you to define how the Quickshop feature behaves on your product cards.

  • Static: The cart icon remains static and always visible.

  • On hover: Shows the cart icon on hover only.

Show Cart Icon: Enable this option to display a cart icon instead of the traditional '+' icon for Quickshop.


Product Card Image Behavior

Determine how the product card images behave.

  • Second Image on Hover: When users hover over the product card, it will display the second image associated with the product.

  • Product image slider: When users hover over the product card, it will display the product images associated with the products as slider.

Product Card Text Alignment: Set the alignment for the text displayed on your product cards.

Product Card Font Size: Customize the font size of the text on your product cards to suit your design preferences.

Product Card Vendor Font Size: Set the font size for displaying the vendor information on

your product cards..

Product Card Title Font: Choose the font style you want for the titles of your product cards. (Primary/Secondary)

Product Card Title Font Weight: Specify the font weight (boldness) for the titles of your product cards.

Product Card Price Font Size: Customize the font size for displaying product prices on your cards.

Show Sale Price as Label: Enable this option to show the sale price as a label on your product cards.

Show Price Range on Product Cards: When your products have different price ranges based on their variants, this option will display those ranges on your product cards.

Show 'Incl.- or Excl. Tax' Text: Enable this option to display text indicating whether the prices on your product cards include or exclude taxes.

Show Product Vendor: Choose whether or not to display the product vendor information on your product cards.

Show Product Ratings: If you have a review app installed, product ratings will be automatically pulled and displayed on your product cards.


Color Swatches

Enable Color Swatches: Turn on color swatches to allow customers to easily view product variants by color.

Color Swatches Behavior: Define how color swatches should behave when users interact with them.

  • Static: Color swatches remain static and don't change upon interaction.

  • Hover: Color swatches will be displayed on hover only.


Hide Color Swatches When Product Has Only One Color Variant

This option ensures that color swatches are only displayed when there are multiple color options available for a product. If there's only one color variant, the swatches will be hidden for a cleaner look.


These settings give you the flexibility to fine-tune the appearance and behavior of your product cards, making it easier to present your products in an appealing and user-friendly manner.


โ€‹

Did this answer your question?