Solved

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

CovFK
Excursionist
18 1 3

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

Accepted Solution (1)

NadiaAnthony
Shopify Partner
75 11 14

This is an accepted solution.

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:

 

 

<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">

 

 

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

 

 

 

<a {% if block.settings.link %}
   href="{{ block.settings.link }}"
   {% else %}
   role="link" aria-disabled="true"
   {% endif %}
   style="position: absolute; height: 100%; width: 100%;"
>

 

 

 

 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 -%}
</div>

 

 

 

Make a new line break below the </div> and add: 

 

 

 

</a>

 

 

Final closing part should look like:

 

{%- endif -%}
</div>
</a>

 

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.

I help brands bridge the gap between complicated code and clear communication.

View solution in original post

Replies 3 (3)

NadiaAnthony
Shopify Partner
75 11 14

This is an accepted solution.

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:

 

 

<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">

 

 

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

 

 

 

<a {% if block.settings.link %}
   href="{{ block.settings.link }}"
   {% else %}
   role="link" aria-disabled="true"
   {% endif %}
   style="position: absolute; height: 100%; width: 100%;"
>

 

 

 

 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 -%}
</div>

 

 

 

Make a new line break below the </div> and add: 

 

 

 

</a>

 

 

Final closing part should look like:

 

{%- endif -%}
</div>
</a>

 

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.

I help brands bridge the gap between complicated code and clear communication.
justoos
Visitor
3 0 0

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

help.png

pikastore
Tourist
11 1 3

Worked great, thanks!