Skip to main content
Product cards
Jalal avatar
Written by Jalal
Updated over a year ago

The product cards settings control the layout of product items on your store. To find these settings, go to Online Store > Themes > Xclusive > Customize > Theme Settings and scroll down to Product Cards.

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.

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.


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.

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 Button Font Size:

The Product Card Button Font Size setting determines the font size of the add to cart button in the product card. You can choose from a variety of font sizes.

You will also find more settings, where you can select if you want to display price range on product cards or not, show product vendor or not and control product ratings.


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.

I hope this is helpful!


Did this answer your question?