How can I make a slideshow image clickable in the Dawn theme?

Topic summary

A user seeks to make entire slideshow banner images clickable in Shopify’s Dawn theme, rather than just the button elements.

Solution Provided:

  • Custom code modification required in slideshow.liquid file
  • Access via: Online Store > Themes > Edit Code
  • Add anchor tag wrapper around line 157 to wrap the slide content
  • Close the anchor tag properly around line 189 (approximately 30 lines down)
  • Code snippets provided show where to insert opening <a> tag and closing </a> tag

Implementation Issues:

  • One user reported the solution works but causes layout problems with slideshows that have containers
  • Specifically: content becomes off-center and text formatting breaks
  • Another user confirmed the solution worked successfully

Additional Resource:

  • YouTube video tutorial link shared for those preferring video instructions

The discussion remains open with unresolved centering/layout issues for certain slideshow configurations.

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

Hi, I want to create a slideshow banner with 2/3 banners but I can’t work out how to make the whole banner clickable. Tried a couple of things but not working. I have the Dawn theme.

www.mkfireworksking.co.uk

1 Like

You’ll need to do some custom coding to achieve this. Navigate to Online Store > Themes > “…” > Edit Code. Open the Section file titled “slideshow.liquid”. Around line 157, you’ll find something like:


Make a new line break after this and add the following.


Here is the tricky part… You have to close this in the right place. Scroll down about 30 lines to about 189 and look for:

{%- endif -%}

Make a new line break below the and add:


Final closing part should look like:

{%- endif -%}

You should now be able to add slides to your slideshows in the front end and be able to click the entire image instead of JUST the button.

2 Likes

Hi,

I tried to do this and it works however it messes up the other slideshows that have a container (makes it off center and entire text is underlined) it comes up like this.

any assistance would be helpful

Worked great, thanks!

Is some one looking for a video instructions to add this feature