How can I make the image banner clickable in the Dawn theme?

Store Design

Topic summary

Goal: make Dawn theme’s Image Banner clickable without custom blocks.

Core approach proposed: edit image-banner.liquid to add two URL fields (for single or double-image banners) and wrap images with links; then adjust section-image-banner.css so the overlay doesn’t block clicks (notably set .banner::after content to none and disable/adjust overlay opacity). Users must also set the links in the theme editor.

Updates/issues:

  • Initial code worked on desktop but some reported mobile problems (banner disappearing or grey/gray screen). Author later posted an updated version “with mobile handling,” noting overlay opacity must be off for clickability and requesting draft links for debugging.
  • Mixed results persisted: some saw only the second image clickable on mobile; others confirmed multicolumn clickable code worked reliably after replacing multicolumn.liquid and adding CSS.
  • An external, updated tutorial was later shared and then revised again to remove unintended text appearing above the banner.

Status: no out‑of‑the‑box setting; community solutions exist but can be fragile across devices. Latest guidance points to the updated external tutorial; thread remains partially unresolved for some mobile cases.

Notes: Code/CSS snippets and screenshots are central to implementation and troubleshooting.

Summarized with AI on December 23. AI used: gpt-5.
18

@calbowes My apologies! I should have included this step for installation.

Fix CSS:

Go to the section-image-banner.css

Change the following (see note)

.banner::after {
  content: none; /* change the '' to none then save */
  position: absolute;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

That (along with the code I put in 5-6 posts back should make it work) should fix your image not being clickable. So sorry about missing that small step. Should work as seen here https://oj50yugge3dakt5z-48367042714.shopifypreview.com

2 Likes