How to make entire slideshow area clickable - (Dawn 2.0)

Store Design
1

RE: Slideshow section (Dawn 2.0) - how to make the entire slide a clickable area.

Hi - I’m using Shopify’s free Dawn 2.0 theme. Right now, when using the slideshow section on the home page, only the button is clickable on the slide. I’d like to change it so that for each slide the entire slide area is clickable and will go to the URL set for that specific slide button in settings.

How do I change this? Thanks.

1 Like
2

Hi @Jmax ,

Go to sections > slideshow.liquid file, find ‘slideshow__text-wrapper’ and add code here:

Screenshot.png
Screenshot.png1292×368 44 KB

Code:

Hope it helps!

7 Likes
3

Thanks LitCommerce - I’ll try it.

4

Hi @Jmax ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like
5

Hi! Thank you for this solution, the code doesn’t work (banner was clickable but when clicking I’m still on the homepage). So I used it to put in the code itself the right URL link. Not the best option but it works now, so thank you very much!!

1 Like
6

Hi @MVUILL ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

7

Hi

I used this solution and it works fine except now the top menu reacts to the link on the slide-show as well. How do I change that?

Thank you in advance

Melie

8

HI, do u find any solution, i have same problem when applied the code, the drop down list handover disappear which overlap with slideshow link

9

No, sorry - I’m still trying to work it out. Let me know if you come up with a solution. It is really frustrating…

10

Hi LitCommerce

I made my slideshow clickable following your solution. This works great except the drop down list from my top main menu now follows the same link as the slideshow. (The slideshow-link overrules the drop-down-menu) Can you help me with this?

https://kunstogliv.myshopify.com/admin/themes/122917617709/editor

Password: trulyu

Best regards Melie

11

Hi @Melie ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

12

This reply has bugs in it. So I figured out workable solution for everyone.

Go to sections > slideshow.liquid file, find ‘slideshow__text-wrapper’ and add code here:

Then scroll down to line 133 and insert after second . The code below is an example of how it should look for unmodified slideshow.liquid


        

          

            {%- if block.settings.heading != blank -%}
              ## {{ block.settings.heading | escape }}
            {%- endif -%}
            {%- if block.settings.subheading != blank -%}
              
                {{ block.settings.subheading | escape }}
              

            {%- endif -%}
            {%- if block.settings.button_label != blank -%}
              
                

            {%- endif -%}
3 Likes
13

Hello, here is the solution:

  1. Open your theme,

  2. Open slideshow.liquid

  3. search for <div class="slideshow__text-wrapper banner__content banner__content–{{ block.settings.box_align }}

  4. Place the following code above it:

jessmacedo_0-1655475970281.png

After that, search for image_picker and paste this piece of code just after it:

{
“type”: “url”,
“id”: “image_link”,
“label”: “Image Link”
},

2 Likes
14

The post by 'Jess-Macedo ’ isn’t a solution. It will over write all other links on the page. Bad code

1 Like
15

Hi.

This works well but I have added the following tweak, so that you can swap easily between both options.

Use AlohaAkahai’s code and method but add the following code around the links

{%- if block.settings.link and block.settings.button_label == blank -%}

{%- endif -%}

and for the closing tag

{%- if block.settings.link and block.settings.button_label == blank -%}

{%- endif -%}

Then to use the entire image link leave the button label blank and add the link in the theme customiser. Adding a label button label will swap to the default button in the content box.

Cheers

Darren

16

Hi. Just noticed that the link stops working outside the slideshow__text-wrapper div which has a z-index of 2. To fix this I added a z-index of 2 to the link as well. The dropdown will also still show over the slider.

updated link is

Cheers

Darren
1 Like
17

This works. Thank you!

18

Thank you, it worked!

19

After spending two solid hours trying to get the codes you guys wrote with those super easy instructions to work…

now the banner is completely missing on mobile view. Works on desktop but what good is this to me if it doesn’t work on mobile?

Can someone that knows what they are doing resolve this caused situation please, thank you.

20

Hi VSLV22

Simplest way to fix this is to go to the slideshow settings > mobile layout and check the “Show content below images on mobile” option.