How to overlay headings and links on images using Dawn theme's multicolumn function?

Store Design

Topic summary

Main issue: Overlay the heading and link directly on multicolumn images in Shopify’s Dawn theme, with a semi-transparent dark layer for readability.

Solution provided:

  • Add custom CSS in Assets > section-multicolumn.css to position text over images and add a dark overlay.
  • Key effects: image wrapper positioned relative; a pseudo-element adds a black overlay; text container is absolutely centered with flex; text color forced to white.
  • Visual result confirmed via screenshots.

Follow-up improvement:

  • Request to equalize spacing between rows and columns.
  • Additional CSS shared (global margins and a media query) to balance spacing. Result confirmed satisfactory by the original poster.

New questions (unresolved):

  • How to apply these styles to only one specific multicolumn section when multiple exist on the same page.
  • Limitation: the theme’s “Custom CSS” field has a 500-character limit; adding CSS to section-multicolumn.css makes it sitewide. Guidance requested on scoping to a single page/section.

Outcome:

  • Original overlay and spacing issues resolved for the initial setup.
  • Thread remains open regarding section-specific scoping and character-limit workarounds.
Summarized with AI on January 4. AI used: gpt-5.
4

Hi @Justin34 ,

Go to Assets > section-multicolumn.css and paste this at the bottom of the file:

.multicolumn-card-spacing {
    margin: 2.5rem;
}
@media screen and (min-width: 750px) {
	.background-none .multicolumn-card__image-wrapper {
		margin: 1.5rem;
	}
}

it will display like this:

Screenshot.png
Screenshot.png1433×635 1.15 MB

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

2 Likes