How can I overlay text on images in the Dawn theme?

Store Design
, , ,

Topic summary

Goal: Center text on top of collage images in Shopify’s Dawn theme with a semi‑transparent overlay.

What was done:

  • In the collage section’s Custom CSS, styles were added to make the card content fill the image, center the text with flexbox, and apply a dark rgba overlay (opacity adjustable). Text color set to white.
  • A follow‑up update added a font-size rule scoped to the collage text so only that section changes (e.g., 24px with !important).

Key terms:

  • Dawn theme: Shopify’s default theme.
  • Collage section: A grid-style image/content block.
  • Custom CSS: Theme editor field for adding section‑specific styles.
  • rgba(): Color format allowing transparency; the last value controls opacity.

Outcomes:

  • Original overlay/centering request solved; OP confirmed it works.
  • Font size customization for that section provided and working.

Open items:

  • How to remove the arrow next to the text (unanswered).
  • How to set different text colors per individual collage card (unanswered).

Notes:

  • A short video was shared showing where to paste CSS and adjust color/opacity.
  • An image illustrating the initial layout was attached.
Summarized with AI on December 12. AI used: gpt-5.
1

Hi guys, I am new at Shopify and just building my first website, but I want to make it as “designy” as possible…and I have one question. I am working on Dawn theme, which seems very nice for furniture online store.

Could anyone help me hoe could I get my font/wordings from under the image directly on to the image in the middle of the image and with some oppacity. This is my current situation (see the photo).

Text overlay.png
Text overlay.png1830×1088 210 KB

2

Hello,

In the ‘Custom CSS’ field of your collage section, paste the below code. Watch the attached video how to do it and change the text color and adjust overlay opacity.

.card {
  position: relative;
}
.card__content {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.20);
}
.card__content .full-unstyled-link {
  color: #ffffff;
}

I hope this will help.

Best regards,

1 Like
3

Perfect, it works great! Thank you! :slightly_smiling_face: Do you know maybe, how can I change font size, but just in this section? So just in this Collage. Thanks again for your help!

4

Below is the updated code, you can change font size in the second last line, it’s currently 24px

.card {
  position: relative;
}
.card__content {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.20);
}
.card__content .full-unstyled-link {
  color: #ffffff;
  font-size: 24px !important;
}
5

is there away to get rid of the arrow next too the text?

6

Hello, do you know how I can change the color of the text for each individual collage card? One has a black background and one white so I can’t use the same color on both.