Hi! Were you ever able to get an answer? I am having the same issue and am looking for a solution.
Topic summary
Goal: add text overlay to collection images on a new Shopify page (for a pay-per-click landing page) and remove the default titles beneath images to match the homepage style.
Implemented fix (CSS added in Assets > theme.scss.liquid):
- Hide titles below images: h3.collection-grid-item__title { display: none; }
- Overlay titles on images by positioning: set .text-center to position: relative; and .collection-grid__item-title to position: absolute; center vertically (top: 50%; left/right: 0); style overlay text (.collection-item__title) as white, 24px, bold.
Outcome: Desktop view matched the homepage; OP confirmed it worked.
Mobile issue: overlay text overflowed the image. Suggested fix: a media query to reduce overlay text size on small screens (@media only screen and (max-width: 767px) { .collection-grid__item-title .collection-item__title { font-size: 14px; } }). OP planned to apply; no final confirmation noted.
Follow-ups: Several users reported not finding theme.scss.liquid in Assets. Helper reiterated the path and asked for site URLs/screenshots; no posted resolutions yet. A user on the Horizon theme also requested guidance for text overlays on featured collection product images.
Central artifacts: CSS snippets drive the solution. Discussion remains partially open for other themes.