How do I remove hover effect from Product Title? (Boundless Theme)

Store Design
, ,

Topic summary

A user is attempting to remove the grey hover effect that appears over product titles on their homepage and collection pages in Shopify’s Boundless theme. Previous solutions from Shopify discussions involving .collection-grid-title-wrapper opacity adjustments have not worked.

Key Details:

  • The hover effect creates a grey box overlay on product titles
  • Both the product image and title appear to have hover effects
  • Goal is to eliminate the grey box while keeping the title visible

Proposed Solution:
Another user provided CSS code to add above </body> in theme.liquid:

  • Targets .product-item__link-wrapper span.product-item__meta:hover
  • Sets background-color: transparent !important
  • Also targets .product-item__link-wrapper .product-item__meta:before with the same transparent background

The discussion remains open pending confirmation of whether this solution resolves the issue.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

I’ve been trying to remove the product title hover on my homepage / product collection (shown below) in the “Boundless” theme using the instructions from Shopify discussions but with no success. I have tried changing opacity of .collection-grid-title-wrapper but nothing affects the hover. I want to remove the grey box that appears upon hovering, keeping the product title under the product image with no hover. The product image itself has hover effect so that is probably affecting the title and is what needs to be removed. Would appreciate help!

Link to site: https://homiesnetwork.com/

Screen Shot 2023-01-21 at 2.26.05 PM.png
Screen Shot 2023-01-21 at 2.26.05 PM.png2850×1416 362 KB

2

@Homies

hello,

Please add this given code above in theme.liquid

.product-item__link-wrapper span.product-item__meta:hover { background-color: transparent!important; } product-item__link-wrapper .product-item__meta:before{ background-color: transparent!important; }