How to add Product Title and Price as a text over the product image on product grid i catalog page?

Shopify Discussion

Topic summary

Goal: Show product title and price as text over product images in the collection grid (Shopify Dawn), keeping image hover zoom and click behavior.

Approach provided: Use CSS to overlay text without changing Liquid.

  • Set the product card container to position: relative.
  • Absolutely position the content wrapper near the bottom/left with a higher z-index.
  • Example used on Dawn: .card.card–standard.card–media { position: relative; } and .card__content { position: absolute; bottom: 40px; left: 20px; z-index: 2; }.

Outcome: Original poster confirmed this works. A suggestion was made to adjust text color or add a background overlay for better contrast.

Access details: The helper requested a preview URL and password to tailor the solution; the store was password-protected and credentials were shared.

New issue raised: Another user reported that after applying the CSS, the image itself is no longer clickable—only the title/price links work. No fix or follow-up solution was posted.

Additional request: A separate user asked how to add badges/product labels on collection/featured products and shared examples and store access. No response yet.

Status: Original overlay request resolved; clickability side effect and badge/label request remain open.

Summarized with AI on December 22. AI used: gpt-5.
2

Hi DevNoob,

To do this you can use CSS, Since I don’t have access to check your current theme configuration I will share an outline here,

For your product card wrapper add

.wrapper-class {
position : relative}

Then for the wrapper that holds the name and price add

child-wrapper {
position: absolute;
bottom:40px;
right:20px;
}

Change the wrapper classes as you need, if you need further assistance reach out to me. You can find my email address below.