How to overlay text on split screen image banner in shopify dawn theme

Topic summary

A user is working on a Shopify Dawn theme split-screen image banner with two clickable images, each linking to separate product pages. They want to overlay text on each image section (as shown in their reference screenshot) without breaking the existing click functionality.

Current Status:

  • Custom code already implemented for clickable images
  • Text overlay needs to be added per reference design
  • Site is in draft mode

Technical Challenge:

  • Maintaining image clickability while adding text overlays
  • Likely requires CSS positioning or Liquid template modifications

The user encountered difficulty sharing their draft site preview and appears to have resolved this in follow-up messages. No solutions have been provided yet.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

Hi all,

I am trying to place two different texts on my split screen image banner ( I am attaching a reference image of where I want the text to be overlayed )

Right now, I have custom coaded the two different images you see to become clickable (image 1 leads to a seperate product page, and image 2 leads to a seperate product page).

All I want to do is to add the text according to this reference image, without disturbing the clikability of the image,

Any help will be greatly appreciated!

Its currently in draft mode, even the products are in draft mode. When I am trying to share the preview link, it shows the original live website. is there a way to share the draft wesbite?

sent you!