Making A Slideshow Image Clickable in Dawn Theme

Store Design

Topic summary

A user seeks to make slideshow images clickable in Shopify’s Dawn theme, redirecting to assigned pages when clicked.

Initial Solutions Provided:

  • Early responses suggest editing image-banner.liquid and modifying the liquid schema, but note this requires theme development knowledge.
  • A working code solution emerges: adding an anchor tag with absolute positioning in slideshow.liquid and inserting a URL field in the schema after image_picker.

Common Issues Reported:

  • Dropdown menu conflicts: The high z-index in the original code prevents header dropdown menus from being clickable on desktop when overlapping the banner.
  • Unwanted homepage redirects: Images without assigned links default to redirecting to the homepage.
  • Mobile display problems: Some users report slideshow elements disappearing or malfunctioning on mobile devices.
  • Extra white space: Clickable areas extend beyond intended boundaries, creating unwanted clickable regions below footers.

Updated Solutions:

  • Contributors share revised code removing the problematic z-index and restructuring the anchor tag placement.
  • Alternative approaches using onclick inline functions are suggested.
  • Mobile-specific settings adjustments are recommended.

Current Status:
The discussion remains active with ongoing troubleshooting. Multiple users continue requesting help with dropdown menu conflicts and unwanted clickable behavior, though no definitive universal solution has been confirmed for all Dawn theme versions.

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

Hi Kushal,

I checked your site and z-index is making the issue.

you need to apply another logic instead of z-index.

Check my above solution without z-index and with the onclick inline function in html.

Thanks!

Zain

1 Like