How to make collection photo have title ontop of photo with this style? Shrine pro

Store Design
1

Hello,

I would like to make the title of my collections show ontop of the photo with a grey square behind it so its clearer to read like the photo I attach below.

image
image1920×614 159 KB

Any help is greatly appreciated!

2

Hi!

You can definitely make your collection titles appear on top of the image with a background to improve readability. This usually involves a small CSS adjustment. Here’s how to do it safely:

1. Locate your collection title class

Most themes wrap collection titles in a class like .collection-card__title or similar. You can check this by inspecting the collection image in your browser (right-click → Inspect).

2. Add Custom CSS

Go to Online Store → Themes → Customize → Theme Settings → Custom CSS (or in your theme.css / theme.scss.liquid) and add something like this:

.collection-card {
  position: relative; /* ensures the title can be positioned over the image */
}

.collection-card__title {
  position: absolute;
  bottom: 10px; /* distance from bottom of image */
  left: 10px;
  padding: 5px 10px;
  background-color: rgba(128, 128, 128, 0.7); /* semi-transparent grey */
  color: #fff; /* white text for contrast */
  font-size: 18px; /* adjust as needed */
  border-radius: 4px; /* optional rounded edges */
}

3. Adjust as needed

  • bottom and left control placement

  • rgba(128,128,128,0.7) gives a semi-transparent grey; you can tweak opacity (0–1)

  • font-size and padding can be adjusted to match your design

3

I dont have theme.css or theme.scss.liquid and custom css is not working. Website: https://qz26pn-cv.myshopify.com/ password: bagono

4

Please add this code to Custom CSS of that section to do that

.card__content {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff78;
}
.card__heading { font-size: 20px; }

Screenshot 2025-09-24 at 09.51.38
Screenshot 2025-09-24 at 09.51.381920×660 79.7 KB

Best regards,
Dan from Ryviu: Product Reviews App

5

Thank you for sharing your idea! I understand that you’d like the collection titles to appear on top of the photos with a grey background for better readability, similar to the example you attached. I’d be happy to help you achieve this. Please share the photo so I can provide more tailored guidance or assist with the customization. Looking forward to helping you make your collections stand out!

6

This worked thank you again! :slight_smile:

7

Happy I could help :blush: