Fluorescent
Eclipse
HelpEclipseCornerstoneStilettoLorenzaSparkIraContext
Eclipse
HelpEclipseCornerstoneStilettoLorenzaSparkIraContext
  • Get started
    • Migrating to Eclipse
    • Theme license
  • FAQs
  • Changelog
    • Update your theme
  • General
    • Editing themes
      • Dynamic content with metafields
      • Edit default theme content
      • Multiple languages
      • Unique content for markets
      • Customizing your site
      • H1 heading tags
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • SEO for Shopify
    • Online store speed
    • Accessibility
  • Theme settings
    • Theme settings
      • Social media
    • Theme styles
    • Fonts
    • Colors
  • Corner rounding
  • Pages
    • Page templates
      • Using templates
      • Customize page styles
      • Create and assign templates
    • Demo layouts
    • About page
    • Home page
    • Blog page
    • Blog post
    • Contact page
    • Password page
    • Search page
  • Sections
    • Sections
      • Using sections
      • Content blocks
    • Blog posts
    • Collapsible content
    • Collection list
    • Contact form
    • Featured collection
    • Featured links
    • Feature product
    • Grid
    • Icon with text columns
    • Image hero
    • Image with text
    • Multi-column
    • Newsletter
    • Rich text
    • Scrolling content
    • Shop the look
    • Slideshow
    • Video
    • Video hero
    • Video with text
    • Custom Liquid
  • Header
    • Announcement bar
    • Header
      • Layout and style
      • Logo
      • Transparent header
      • Mega menu
      • Language and Currency
    • Impact logo
    • Search
  • Footer
    • Footer
      • Image Text and Socials
      • Links block
      • Newsletter and Socials
      • Language and Currency
      • Custom Liquid
  • Products
    • Product listings
      • Product card styles
      • Sale and sold out badges
      • Quick shopping
    • Prices and currencies
    • Swatches
      • Use default colors
      • Use custom colors
      • Use custom images
  • Product pages
    • Product page
      • Gift card product
    • Media gallery
      • Media grouping
    • Product overview blocks
      • Description
      • Price
      • Buy buttons
      • Collapsible row
      • Complementary products
      • Custom option
      • Featured icon with text
      • Icon with text
      • Inventory status
      • Image block
      • Popup block
      • Product rating
      • Text block
      • Share icons
      • Custom Liquid
    • Variant selector
      • Info popup
    • Sticky add-to-cart
    • Sibling products
    • Product recommendations
  • Collections
    • Collection page
      • Banner
      • Product grid
      • Promotion tiles
      • Filters and sorting
    • Collection list page
  • Cart
    • Cart
    • Free shipping bar
    • Cross sells
  • Popups
    • Popups
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • Advanced
    • Custom CSS
    • Custom fonts
Powered by GitBook
On this page
  • Product card images
  • Product card details
  • Show vendor
  • Show swatches
  • Show product ratings

Was this helpful?

  1. Products
  2. Product listings

Product card styles

Go to Theme settings > Product listing to customize the appearance of product cards.

Product card images

Change the shape (aspect ratio) of the product images, and enable a secondary image on hover.

Setting
Description
Options

Show second image on hover

Display the second product image when a cursor hovers over a product card.

Aspect ratio

Make product images consistent by cropping them to a square or rectangular shape. Select Natural to maintain their original shape without cropping.

Natural Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2)

Product card details

Choose to show vendor names, swatches, and product ratings.

Show vendor

Setting
Description
Options

Show vendor

Show vendor names on product cards.

Show swatches

Go to Theme settings > Swatches to show swatches on product listings.

Setting
Description
Options

Enable product listing swatches

Show product ratings

Setting
Description
Options

Show product ratings

If you have a product reviews app, display ratings with either stars, the number of reviews, or both.

Rating & Count Default

Rating

Count

Last updated 3 months ago

Was this helpful?

Show product variant swatches on hover. Go to Theme settings to .

set up swatches