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

Jmax
New Member
5 0 0

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.

Replies 31 (31)

LitCommerce
Astronaut
2860 684 741

Hi @Jmax,

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

 

Screenshot.png

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Jmax
New Member
5 0 0

Thanks LitCommerce - I'll try it. 

LitCommerce
Astronaut
2860 684 741

Hi @Jmax,

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

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
MVUILL
Explorer
66 0 17

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
Astronaut
2860 684 741

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Melie
Excursionist
18 0 4

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
Visitor
2 0 1

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
Excursionist
18 0 4

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
Excursionist
18 0 4

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
Astronaut
2860 684 741

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
AlohaAkahai
Shopify Partner
68 3 25

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
Shopify Partner
21 0 9

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
Shopify Partner
21 0 9

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
Excursionist
30 0 8

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
Shopify Partner
21 0 9

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
Excursionist
30 0 8

LOL yeah, that totally fixes everything. NOT.

EmilyH3
Tourist
7 0 1

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
Tourist
11 0 3

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

DB160
Shopify Partner
21 0 9

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
Shopify Partner
4 0 3

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
Excursionist
18 1 8

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
Visitor
2 0 0

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
Tourist
7 0 1

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
Excursionist
18 1 8

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
Shopify Partner
7 0 0

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

eastolivia
Visitor
2 0 0

This works. Thank you!

FitOnline
Visitor
1 0 0

Thank you, it worked!

VECI
Visitor
2 0 0

This solution is working fine for me!

jess-macedo
Shopify Partner
18 1 33

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>

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"
},

AlohaAkahai
Shopify Partner
68 3 25

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

ServerXr
Shopify Partner
6 0 2

Thank you so much it's works