Display Swatches on Shop Page

Display Swatches on Shop Page

Show product options directly on catalog/shop pages so customers can browse variations without clicking into each product.

Why Enable Catalog Swatches

  • Customers see color/pattern options while browsing
  • Reduces clicks needed to explore products
  • Increases engagement on category pages

Enable Catalog Display

Navigate to Products > All Productsedit the variable product and scroll down to the Variation Swatches tab in the Product data section.
Check Enable Catalog Swatches.

Configure display preferences:

  • Enable Show Variation Label to display selected option
  • Choose Label Position (Inline or Stacked)
  • Enable Show Attribute Name for clarity

Click Save Changes.

Result

Category and shop pages now show swatches, letting customers preview options before opening products.