Making A Slideshow Image Clickable in Dawn Theme

[sam1011]

Hi!

I am looking for a solution to make my Slideshow Images Clickable in Dawn Theme. On clicking the image, it should be redirected to the assigned page. Can someone help me out here? 

Thank you.

[waqas390]

As you've mentioned, after copying and pasting the code onto the banner, the links on the dropdown menu, which appears above the banner, are not working correctly. The problem is that when the dropdown menu items are clicked, the banner's link is being selected instead of the dropdown menu. To address this issue, please provide me with the specific code you're using, particularly related to the banner and the dropdown menu. This will allow me to provide more accurate guidance on how to resolve the problem.

[sowmya13]

Hey there!

I tried using this code and while the images are clickable on the slideshow, when i click on the image it gets redirected to the home page and not the product collection page as i desired.

Kindly help me with this

Thankyou 🙂

[samueldthomas]

Hey Jess, 

This is a great solution, thank you. 

I'm wondering if you could help me develop it a step further - could I potentially set the image click to open a modal. In order to do so, I would need to put a selector in to set the data-target and data-toggle so each image opened a different modal. Do you think this would be possible?

[rbuchert]

Hi; this didn't work for me.  It made the slideshow clickable, but it took me to the homepage rather than the button URL.

[rbuchert]

It almost works except that the banner clicks to the home page.  Any ideas on what I did wrong?

[TreathW]

04/04/2024 and your solution works perfectly. Thank you!!

[bareera_bnf]

Hi Jess-Macedo!

Could you please help me with this image_picker thing? Where can I get it? Sorry I am new to shopify.

[CrystalMailing]

Hi,

I am currently using Dawn version 14.0.0 and cannot find what you mentioned on point 3 <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }}

I understand the theme has gone through many changes since 2022 and wanted to know if you can help me do the same so that I can make the whole image clickable?

[artofanoop]

Thanks a Ton for this solution @jess-macedo . It worked for me.

[stellaconcept]

inves desse codigo abaixo:

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

Trocar por esse:

<a href="{{ block.settings.image_link }}" style="position: absolute; bottom: 0; right: 0; left: 0;top: 0;">

[thomasdm87]

Hi, I have just tried the code with the Refresh theme and it has made the slideshow image clickable, but when clicked it doesn't go to the collection link I chose in the Shopify Editor... am I doing something wrong? thanks

[AA31]

This is not working when we open/ click on Auto-rotate slides option. You have any solution for it?

[marvic]

Works great with one caveat:

When I have 2 or more images in my slideshow and I only want to make one clickable (enter a link), the rest of the images are still clickable and take the user to the homepage (no link entered). Is there a way to prevent images that I haven't entered a link for to become clickable?

[marvic]

Oh, that was actually very simple to solve:

Just wrap the href argument into an if statement:

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

[murtazakalang]

Where to find image_picker?

[jess-macedo]

Guys, here is the updated version for dropdown menus, I noticed a lot of you had this issue before, so here it goes: 

I am using Dawn theme 8.0.

First, for the slideshow, I changed a bit to this (slideshow.liquid):

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

I also changed the schema in image_picker to this: {

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

If this, doesn't fix, send me your preview theme and I will try to find the conflict.

I noticed that since the first code had that insane z-index, it was causing conflict with a ton of things. If it works, let me know, I guess I need to post the updated version there.

I believe you are going to be good, but check how the mobile version shows to you, sometimes it disappears, if that is the case, it worked with me changing the following setup:

 

If that doesn't work, I received the following URL, which seems to help: https://community.shopify.com/c/shopify-design/image-banner-not-displaying-on-dawn-theme-mobile-view...

[oliviaajones16]

Hi there! 

I updated to this new version, and now my drop down menu is working again, but my slideshow is not clickable any more.

How do I have both my slideshow clickable and my drop down menu working?

[lovehuvet]

still didn't work 😞

[johncurioso]

Hi folks,

I've come across an issue with the provided code, and it's not performing as expected. I'm always looking to optimize and improve code efficiency. You can find my website for context at https://www.bckpods.com/.

If anyone has insights on how to enhance the code, I'd greatly appreciate your assistance. Your expertise would be invaluable.

[femantraa]

https://community.shopify.com/c/shopify-design/making-a-slideshow-image-clickable-in-dawn-theme/m-p/...