HIDE SWATCHES DISPLAY ON CERTAIN PAGES

You can use the following method in the custom CSS to hide the swatches on the product item level, while still allowing them to be displayed on the product page itself. This CSS code targets the color swatches within the product item elements and sets their display property to none, ensuring they are hidden:

.product-item .color-swatches {
  display: none !important;
}

By applying this CSS rule, the color swatches will be hidden from the product item views, such as in product listings or collections. However, they will remain visible on the individual product pages where customers can select their preferred color options.

This approach helps in maintaining a clean and uncluttered look on the product item level while providing full functionality on the product page.