Luxoria Documentation
  • Sections: Header & Popups
    • Announcement bar
    • Header
    • Newsletter popup
    • Cookie banner
  • Product quick view
  • Sections: Template & Footer
    • Hero slideshow
  • Featured collections
  • Image with countdown
  • Marquee
  • Comparison
  • Collage
  • Image with products slideshow
  • Featured cards grid
  • Featured products
  • Image with text
  • Image with products pin
  • Logos
  • Featured product
  • Featured blog
  • Rich text
  • Image with collapsible content
  • Video and image
  • Testimonials
  • Icons with text
  • Email signup
  • Social media images
  • Footer
  • Custom liquid
  • Theme Settings
    • Colors
    • Typography
    • Rounding
    • Product card
    • Variants and swatches
    • Price per unit
  • Search behavior
  • Breadcrumbs
  • Language and currency
  • Social links
  • Favicon
  • Cart
  • Animation
  • Checkout
  • Custom CSS
  • Template & Pages
    • Product
    • Collection
  • Collections List
  • Page
  • Blog
  • Blog post
Powered by GitBook
On this page
  • The subcategory is managed through:
  • Introduction & Settings overview:

Was this helpful?

  1. Theme Settings

Product card

PreviousRoundingNextVariants and swatches

Last updated 11 months ago

Was this helpful?

The subcategory is managed through:

Customize Theme → Theme Settings → Product card

Introduction & Settings overview:

Product cards are fundamental components of a Shopify store's interface, serving as the primary means of showcasing merchandise to customers. From displaying product images to presenting essential details, the design and layout of product cards significantly influence user engagement and purchasing decisions.

  • Show badges*: Enables or disables the badges in the top left for the products.

  • Show swatches*: Enables or disables the swatches presented below the product image. Different product colors are needed.

  • Enable quickview*:

  • * Note: For illustration the above settings, please see the snippet below.

  • Swap image on hover: With that setting, the user can enable or disable the image swap when hovering over the product. It means that when hovering, the second image of the product will be the visible one. If disabled or no second image exists, the image will be a little bit zoomed in.

  • Media ratio on desktop: Gives control over the product cards' media ratio for the desktop version.

  • Media ratio on mobile: Gives control over the product cards media ratio for the mobile version.

  • Horizontal content alignment: Gives control over the horizontal positioning of all the content of the cards. One of three possibilities is to be chosen: Left, Center or Right.

  • Custom liquid: Тhis setting allows the users to directly put in a code into the field through which they can build a completely custom Product card subcategory.