Card components

LogoLive Chat Support | Webibazaar Templatesalesiq.zohopublic.in

Use this setting to customize the "Card components".

  • Product cards

Block
Description

Text alignment

Choose how the text content (title, price) aligns within the product card:

  • Left

  • Center

  • Right

List product background

Choose how the List product background show within the product card:

  • Glass effect

  • Color scheme

List product image height

Customization of the "List product image height" is as follows:

  • Adapt

  • Portrait

  • Square

Image ratio

Set how the product image is displayed in product card:

  • Adapt to image

  • Portrait

  • Square

Show second image on hover

Toggle to show the second product image when the user hovers over the product card.

Show quantity

Toggle to show quantity button in product card.

Show product type

Enable this to show product type in product card.

Show vendor

Toggle to show the product vendor (brand name) below the product title.

Show product rating

Toggle to display product ratings (requires a product rating app).

Show card border

Toggle to show or hide a border around product cards.

Action buttons position

Choose where the “Action” buttons appears:

  • Over the image

  • Bottom

Enable quick view button

Toggle to enable a quick view button for products (desktop only).

Enable quick view button

Toggle to show or hide the “Quick view” button on product card.

Quick view button style

Choose the style of the quick view button:

  • Outline

  • Solid

Card color scheme

You can change the background and foreground color of a product card using the color scheme.

  • Scheme 1

  • Scheme 2

  • Scheme 3

  • Scheme 4

  • Scheme 5

  • Scheme 6

  • Scheme 7

Add to cart button

Quick add

Customization of the "add to card button" is as follows:

  • None

  • Standard

  • Bulk

Bulk is optimized for items purchased in higher quantities. Applicable when "Variants" is disabled.

Add to cart button style

Choose the style of the “Add to cart” button:

  • Outline

  • Solid

Swatches

Show color swatch Toggle to display color swatches when variants are disabled and quick add is set to "Standard".

Color swatch type

Choose how the variant options are displayed:

  • Swatch

  • Variant image

Variant image mode requires that all variants have an associated image.

Swatch style

Customization of the "Swatch style" is as follows:

  • Rounded

  • Oval

Variants

Show variants Toggle to display product variant selectors (like size or color options). Show variants label Toggle to show or hide the label for variants (like “Size” or “Color”). Type Choose how the variant options are displayed:

  • Dropdown

  • Pills

Enable color swatch Toggle to enable color swatches for variants (requires “Pills” type to be selected).

Featured product

Color swatch type

Choose how the variant options are displayed:

  • Swatch

  • Variant image

Variant image mode requires that all variants have an associated image.

Discount Badge

Enable stylish badge

Turn this on to apply a more designed or decorative look to discount badges.

Show discount as

Choose how the discount badge appears:

  • Sale

  • Save amount

  • Save percentage

  • None

Background color

Use this to sets the discount badge’s background.

Foreground color

Use this to sets the text color on the discount badge.

Soldout badge

Background color

Use this to sets the soldout badge’s background.

Foreground color

Use this to sets the text color on the soldout badge.

Custom badge

Background color

Use this to set a background color of custom badge.

Foreground color

Use this to set a foreground color of custom badge.

  • Collection cards

Block
Description

Enable product counter

Toggle this on to show the total number of products available in each collection.

Style

Customization of the "Collection card style" is as follows:

  • Standard

  • Card

Text alignment

Customization of the "Text alignment" in collection card is as follows:

  • Left

  • Center

  • Right

Image height

Customization of the "Collection card image height" is as follows:

  • Adapt to image

  • Portrait

  • Square

  • Blog cards

    Block
    Description

    Style

    Customization of the "Blog card style" is as follows:

    • Standard

    • Card

    Text alignment

    Customization of the "Text alignment" in blog card is as follows:

    • Left

    • Center

    • Right

    Header blog style

    Customization of the "Header blog style" is as follows:

    • Standard

    • Card

    Color scheme

    You can change the background and foreground color of a blog card using the color scheme.

    • Scheme 1

    • Scheme 2

    • Scheme 3

    • Scheme 4

    • Scheme 5

    • Scheme 6

    • Scheme 7

PreviousSection componentsNextSocial hub

Last updated