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

[Jmax]

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.

[LitCommerce]

Hi @Jmax,

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

Code:

<a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>

Hope it helps!

[Jmax]

Thanks LitCommerce - I'll try it. 

[LitCommerce]

Hi @Jmax,

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

[MVUILL]

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

[LitCommerce]

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.

[Melie]

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

[macauebuy]

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

[Melie]

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

[Melie]

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

[LitCommerce]

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.

[AlohaAkahai]

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:

      <a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;">

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

       <a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;"></a>
        <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 %}">
          <div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
            {%- if block.settings.heading != blank -%}
              <h2 class="banner__heading {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
            {%- endif -%}
            {%- if block.settings.subheading != blank -%}
              <div class="banner__text" {{ block.shopify_attributes }}>
                <span>{{ block.settings.subheading | escape }}</span>
              </div>
            {%- endif -%}
            {%- if block.settings.button_label != blank -%}
              <div class="banner__buttons">
                <a{% if block.settings.link %} href="{{ block.settings.link }}"{% else %} role="link" aria-disabled="true"{% endif %} class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}">{{ block.settings.button_label | escape }}</a>
              </div>
            {%- endif -%}
          </div>
        </div></a> 

[DB160]

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 -%}
<a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;">
{%- endif -%}

and for the closing tag

{%- if block.settings.link and block.settings.button_label == blank -%}
</a>
{%- 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

[DB160]

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

<a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index:2;">

Cheers

Darren

[VSLV22]

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.

[DB160]

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.

[VSLV22]

LOL yeah, that totally fixes everything. NOT.

[EmilyH3]

I have the same issue with the Mobile version disappearing after using the code that makes it clickable and fixes the nav bar, but when I check that "Show content below images on mobile" option, it then shows only a small sliver of the banner with the top 3/4 just totally white. Any ideas what other tweaks I could try? Thank you!

[LongNguyen]

Your solution works for me, no more dropdown conflict with banner

[DB160]

There are main 2 methods used in this discussion thread to make the whole image clickable. Here is how to make both work. Choose which you prefer:

Method 1:  as described by LitCommerce and jess-macebo

<a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>

Positioned above  <div class="slideshow__text-wrapper...

Using this method change z-index to 3

<a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 3;"></a>

then to the end of your base.css file add:

#shopify-section-header { z-index: 5; }

Method 2 as described by AlohaAkahai

wrapping the link arround the content div:

ie

<a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;"></a>
<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 %}">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
{%- if block.settings.heading != blank -%}
<h2 class="banner__heading {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text" {{ block.shopify_attributes }}>
<span>{{ block.settings.subheading | escape }}</span>
</div>
{%- endif -%}
{%- if block.settings.button_label != blank -%}
<div class="banner__buttons">
<a{% if block.settings.link %} href="{{ block.settings.link }}"{% else %} role="link" aria-disabled="true"{% endif %} class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}">{{ block.settings.button_label | escape }}</a>
</div>
{%- endif -%}
</div>
</div></a>

in this case update the opening link to have a z-index of 2

<a href="{{ block.settings.link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index:2;">

Hope this helps

[SarahY]

It works for the header and banner. But, seems like the solutions make all the link (in text) all unclickable, except for button link. Any solutions for this?

[Gemz1]

Hi DB160

Thanks for this.  We tried method 2 and it fixed the menu issue - but when clicking the banner it no longer goes to its destination.  We are running Dawn 8.0 - does this make a difference?

Thanks for any light you can shed on this,

[eastolivia]

This Solution works! I have been searching for months for a solution to this that wouldn't override the main navigation menu at the top. One note, in Dawn 8.0, the </a> should go on line 122 rather than 133. Thank you thank you!

I truly don't understand why Shopify does not have this as default functionality in the theme. It seems extremely basic.

[EmilyH3]

Were you able to get this working on Mobile? AlohaAkahai's method fixes the issue of the navigation bar links all routing to the first slideshow link, but then the Mobile slideshow disappears entirely and it only appears on desktop! 

[Gemz1]

Hi Olivia

How did you fix this in 8.0?  I can get the menu to work using method 2, but when that is done, the banner doesn't go anywhere when I click it?

Thanks in advance

[Alex_Dismount]

Great solution! Was the issue with the banner disappearing on mobile ever resolved?

[eastolivia]

This works. Thank you!

[FitOnline]

Thank you, it worked!

[VECI]

This solution is working fine for me!

[jess-macedo]

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:

<a href="{{ block.settings.image_link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>

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

{
"type": "url",
"id": "image_link",
"label": "Image Link"
},

[AlohaAkahai]

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

[ServerXr]

Thank you so much it's works