How to display product prices and names only on hover in Dawn?

Store Design
, , , ,

Topic summary

A user seeks to hide product names and prices on their Shopify Dawn theme collection page, revealing them only on hover.

Solution Provided:
GemPages support team offers a CSS-based fix:

  • Navigate to Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Add custom CSS markup before the closing tag

The solution includes a screenshot showing the expected hover effect result.

Follow-up Questions:
The original poster confirms the solution works but requests two additional modifications:

  • Making the entire product image clickable (not just on hover)
  • Adapting the functionality for mobile devices, possibly just hiding the name and price without requiring hover

Status: Partially resolved - initial hover effect implemented successfully, but mobile optimization and clickability enhancements remain open questions.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
3

Hello @LayNoNuma

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you:

  1. Go to Online Store → Theme → Edit code:

GemPages_0-1669618959296.png
GemPages_0-1669618959296.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before :

Result:

Screenshot at Dec 19 23-33-40.png
Screenshot at Dec 19 23-33-40.png1205×790 32.3 KB

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.