Product cards
Use this setting to customize the "Product cards" Image Padding, Text alignment, Color scheme, Variants & swatches, Add to cart button, Border, and Shadow.
Color scheme
In this section, you can change the background and foreground color of the pagination using the color scheme:
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Style
Customization of the "Style" in the slide is as follows:
Standard
Card
Show border around card
Toggle to display a border around each product card. Not applicable to the standard style.
Show border above card content
Toggle to display a border above the content of each card. Not applicable to the standard style.
Border color
Choose the color of the border around the product card.
Image ratio
Customization of the "Image ratio" in this section is as follows:
Adapt to image
Portrait
Square
Text alignment
The Text alignment customization in the card section is as follows:
Left
Center
Right
Price color
Select the color for the product price, specifically for discounted pricing.
Use video
Toggle to display the MP4 video as the first media in the product card if available. Note: This does not work for YouTube or Vimeo videos.
Show second image on hover
Toggle to enable displaying a second product image when the user hovers over the product card.
Show quantity
Toggle to display product quantity selection. Not applicable when the “Quick add” setting is set to “Bulk.”
Show product type
Toggle to display the product type (e.g., shirt, hat) on product cards.
Show vendor
Toggle to display the product vendor’s name on product cards.
Uppercase vendor
Toggle to display the product vendor’s name in uppercase text, creating a distinct, stylized appearance.
Show product rating
Toggle to display product ratings on the product cards. This requires a product rating app to be installed.
Enable quick view button
Toggle to add a quick view button on product cards, allowing users to view product details in a popup without navigating away.
In Product cards "Add to cart button" customization as is follow:
Add to Cart Button
Button height Adjust the height (in pixels) of the button for better visibility and alignment with your store’s design. Show arrow inside the button on desktop Toggle to show an arrow icon inside the “Add to Cart” button on desktop view. Applicable when “Variants” is disabled and quick add is set to “Standard”. Quick add
Customization of the "Quick add" in this section is as follows:
Standard
Bulk
Style
Customization of the "Style" in this section is as follows:
Outline
Solid
Position
Customization of the "Style" in this section is as follows:
Over the image
Bottom
In Product cards "Swatches & Variants" customization as is follow:
Swatches
Show color swatch Toggle to display color swatches instead of a dropdown for variant selection. Applicable when “Variants” is disabled and quick add is set to “Standard”. Display swatch below the product name Toggle to display swatches below the product name, providing an alternative layout for showcasing variant options. Color swatch type
Customization of the "Color swatch type" in this section is as follows:
Count
Swatch
Swatch (Only dhow firs 4)
Variant image
Color corner radius
Adjust the corner radius (in pixels) for the color swatches to control their roundness.
Variants
Show variants Toggle to display product variant selectors on product cards, allowing customers to choose a variant directly from the product grid. Type
Customization of the "Type" in this section is as follows:
Dropdown
Pills
Enable color swatch Toggle to enable color swatches for the variant selectors. Requires the variant selector type to be set to “Pills.” Variants corner radius Adjust the corner radius (in pixels) for variant selectors to control their roundness.
Last updated