Cards

Live Chat Support | Webibazaar Template

Use this setting to customize the "Product cards" Styles, Image Padding, Text alignment, Color scheme, Border, and Shadow.

Setting	Description
Image ratio	Choose how the product image ratio is displayed: Adapt to image Square Portrait
Add to cart button style on desktop	Choose the style of the “Add to cart” button on desktop: Link Outline button Solid button
Add to cart button width on desktop	Choose whether the “Add to cart” button width is default or full width on desktop.
Display buttons inline	Toggle to display buttons inline with other elements in the product card.
Show second image on hover	Toggle to display the second product image when a user hovers over the product card.
Enable quick view button	Toggle to enable the quick view feature for products.
Quick view position on desktop	Choose the position of the quick view button on desktop: Top right Bottom left Bottom right Bottom full width
Quick view icon	Choose which icon to display for the quick view button: First icon Second icon
Show quick view on hover	Enable to display the quick view button only when the user hovers over the product card.
Show vendor	Toggle to show the product vendor (brand) in the product card.
Show product rating	Enable to display the product rating (requires a product rating app)
Move the price below variant	Enable to move the product price below the variant selector for a cleaner layout.
Show variants	Enable to display the product variants (e.g., sizes, colors) in the product card.
Disable sold out variant	Toggle to disable the sold-out variant from the product card, applicable when type is set to pills.
Variants Type	Choose variant style types in product card: Dropdown Pills
Show dropdown label	Toggle to display the dropdown label when the variant style is set to dropdown.
Enable color swatches	Toggle to enable color swatches in product card (requires type to be set to Pills)
Style	Choose the product card style: Standard Card
Image padding	Set the image padding around product images in pixels.
Text alignment	Customization of "Text alignment" within the product card is as follows: Left Center Right
Color scheme	Choose the color scheme for the product card.. Scheme 1 Scheme 2 Scheme 3 Scheme 4 Scheme 5
Border	Thickness: Set the border thickness of the product card in pixels. Opacity: Adjust the opacity of the product card border. Corner radius: Set the corner radius of the product card border (in pixels), giving it rounded edges.
Shadow	Opacity: Adjust the opacity of the product card shadow. Horizontal offset: Set the horizontal offset (in pixels) for the shadow of the product card, creating a shadow effect to the left or right. Vertical offset: Set the vertical offset (in pixels) for the shadow of the product card, creating a shadow effect above or below. Blur: Set the blur radius (in pixels) for the product card shadow, creating a soft, blurred shadow.