The product cards settings control the layout of product items on your store. To find these settings, go to Online Store > Themes > Xpert > Customize > Theme Settings and scroll down to Product Cards.
General configurations:
Show product vendor:
Check this option if you want to display the product vendor.
Show product ratings:
Check the option if you want to display star rating in your product cards.
Center pre-order and last-stock labels:
You can check this option to move these labels to center.
Product Card Text Alignment:
The Product Card Text Alignment setting determines the alignment of the text in the product card. You can choose from the following options:
Left: The text is aligned to the left.
Center: The text is centered.
Right: The text is aligned to the right.
Product Card Image Behavior
The Product Card Image Behavior setting determines what happens when you hover over the product image. You can choose from the following options:
Product image slider: A slider of product images is displayed.
Second image on hover: The second product image is displayed.
Last image on hover: The last product image is displayed.
Layout:
The Layout setting determines how the product cards/items are displayed. You can choose from the following options:
Add to cart (with variants): This option shows an add to cart button with product variants.
Quickshop: This option shows a shopping cart icon that opens the product in the sidebar where you can see product details/variants and add to cart.
Basic (click to go to product): This option removes the button and if you click on the product you go to the product detail page.
Variant picker: This option enables a quick selection of variants.
Add to Cart / Quickshop Behavior:
The Add to Cart / Quickshop Behavior setting determines when the add to cart button or cart icon is displayed. You can choose from the following options:
Static: The button or icon is always displayed.
Hover: The button or icon is only displayed when you hover over the product card.
Add to cart form layout:
You can display the form either in columns or rows.
The following is column layout.
Show ‘Add to cart’ text instead of cart icon:
This setting determines whether to show the text "Add to cart" instead of the cart icon.
Variant Picker
Color scheme: Pick the color scheme for the variant selection.
Background opacity: Set the opacity of the background of the variant picker
Button label: Set the text of the label, for example 'Add to cart'. Leave blank if you want no button.
Variant picker name: The option name used for the size options, for example 'Size' or 'Sizes'. You can add multiple names by entering each on a separate line.
Heading customization:
This part gives you customization option for product card title.
Text customization:
You can customize the fonts for product cards, the text other than product title.
Price customization:
Controls the font size of price show in your product card. Also if you don't want to display price range for variant products uncheck the option.
You also have an option to show/hide tax text.
Color Swatches:
The Color Swatches setting determines whether to show color swatches for the product items. If this setting is enabled, available variants are shown as color swatches so that the customer can see the available options for that product.
Color swatches behavior: Static/on hover
‘On hover’ is only applicable when ‘Standard’ layout is selected.
Mobile layout:
Control the font and button size in product cards.
I hope this is helpful!