What's your biggest current challenge? Have your say in Community Polls along the right column.

Solved

Making A Slideshow Image Clickable in Dawn Theme

sam1011
Visitor
2 0 8

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.

Accepted Solution (1)

jess-macedo
Shopify Partner
18 1 36

This is an accepted solution.

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-1655475734782.png

 

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

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

View solution in original post

Replies 71 (71)
waqas390
Visitor
2 0 0

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.

waqas390_0-1691943879029.png

 

sowmya13
Visitor
1 0 0

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

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

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

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

TreathW
Shopify Partner
4 0 0

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

bareera_bnf
Tourist
5 0 1

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

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
New Member
4 0 0

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

stellaconcept
Visitor
1 0 0

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

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

 

Screenshot 2024-07-05 at 11.51.21.pngScreenshot 2024-07-05 at 11.51.35.pngScreenshot 2024-07-05 at 11.52.05.png

AA31
Tourist
8 1 1

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

marvic
Explorer
66 4 19

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
Explorer
66 4 19

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

Where to find image_picker?

WelsonKee
Visitor
1 0 0

It really works!!

jess-macedo
Shopify Partner
18 1 36

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:
Screen Shot 2023-02-24 at 11.08.05 AM.png 
 
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
Tourist
3 0 1

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

still didn't work 😞

johncurioso
Visitor
1 0 0

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.

websensepro
Shopify Partner
1289 145 166

If some one looking for a video solution to this feature:

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial