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.
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.liquidfile - 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.
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.
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!
