Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Making A Slideshow Image Clickable in Dawn Theme

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)

ecom3_
Shopify Partner
10 1 3

Hi @sam1011 !

 

Since a complete solution would take quiet some effort, I can only tell you what you have to look for.

 

1. In order to make those images clickable, you would need to edit the image-banner.liquid-file. You can find this in Themes->Customize (go to ThemeEditor), click the 3 dots top left and click "Edit code". Then Sections -> image-banner.liquid.

 

2. Edit the liquid Schema-array in the bottom of the file, to make sure blocks (that represents a slide) gets a "link" property in the ThemeEditor.

 

3. You would need to edit the liquid/html code in order to add the link to every image dynamically, based on what has been inserted in the "link" property in each block in the ThemEditor.

 

If you are not familiar with theme dev / web dev at all, I would recommend to hire a professional for this task, since this unfortunately cannot be done with just a few clicks.

 

Best regards

Was your question answered? Mark it as an Accepted Solution

ecom3 | We build e-commerce.
Growth consulting, Design & Development
www.ecom3.de
Frankfurt
Tourist
33 0 0

I managed to make the slideshow banner images at the top of my page clickable but it has created a white space that is also clickable under the footer on my homepage. Any ideas how to adjust so it is not adding anything below the footer? Site is blockyourears.com.au

 

flirtingfiction
Visitor
1 0 0

Hey @Frankfurt ! I am curious if you found a solution to the extra white space that appeared just below the clickable slideshow images? I have the same thing and am hoping to clean that up.

Frankfurt
Tourist
33 0 0

I ended up restoring the slideshow code back to the original code and then using a different custom code to make the slideshow clickable. This one here https://community.shopify.com/c/shopify-design/making-a-slideshow-image-clickable-in-dawn-theme/m-p/...

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

sam1011
Visitor
2 0 8

Just what I wanted! Thank You @jess-macedo  for helping me out. 

gabe14
Visitor
2 0 2

Hi Jess-Macedo,
I tried to follow the steps. I see in the admin that now I can add the link, but still not working on the live site as a link. my site is bestdogparents.com Can you help me? Thanks.

 

jess-macedo
Shopify Partner
18 1 36

Hi Gabe14,
Of course, let me help you with that.
I will need to take a look at your code.
I can request a collaborator request if you give me your store backend link and look into it.  I am sending you a private message, you can reply there.

gabe14
Visitor
2 0 2
THanks a lot.
Do you give me your email address and I add it in the Shopify admin, or
what backend link you need?
jess-macedo
Shopify Partner
18 1 36

Hi Gabe14, you can email me at jeessica.macedo@gmail.com. The link is the one that shows to you when you are logged in to your homepage. It is always something like: xxxxxxxxx.myshopify.com

SarahY
Shopify Partner
4 0 3

Hi. I just realised after following your steps, the slide overlapping the mega menu. I've changed <a href="{{ block.settings.image_link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a> to z-index 3, but also just realised all links in all other pages are not working, except buttons. Please advice.

CaioAugusto
Visitor
1 0 0

Worked for me!

Muhammad-Faizan
Shopify Partner
11 0 2

thank you very much jess-macedo, its worked for me on dawn theme

hitesh23
Shopify Partner
1 0 0

Worked like a charm, Thanks a lot

charles1024
Tourist
4 0 1

Hi, 

My slide show image is clickable, but it doesn't bring me to my linked page.

It's just keep bringing me back to the home page.

 

And also, I am not able to click on this after add in the coding.Screenshot 2022-12-03 at 12.34.32 PM.png

 

 

Can please help on this?

 

Thanks

jess-macedo
Shopify Partner
18 1 36

Hi @charles1024 , can you email me? jeessica.macedo@gmail.com
I will help you with that.

sanjanapai
Visitor
2 0 0

I too have this issue, looking for a solution.

 

My slideshow images are now clickable, but keeps bringing me back to the home page.

femantraa
Visitor
3 0 0

All the process is same but instead of opening the <a> tag on that place open it up were the media image <div> start | just replace the div to <a> tag and add the JASON id to call the link, That way your menu wi'll work fine and your slideshow will be clickable yahh!  

Screenshot 2024-04-02 at 1.06.54 AM.png

 

SineN
Shopify Partner
3 0 0

Hi. I have tried this but after pasting the second piece of code after the image_picker I get this error: 

 

Unable to update the file

  • Invalid JSON in tag 'schema'

 

Any idea why?

 

Thank you!

AdityaC
Shopify Partner
2 0 3

Hi @SineN ,

 

You will have to add the second piece of code after the image_picker block ends (after }, ) and NOT exactly after the words image_picker ends. 

oliviaajones
Visitor
1 0 0

Hi there!

I'm struggling with this - I pasted this after the image_picker block, and the slideshow is 'clickable' but just refreshes my page, doesn't bring me to the button links I've attached to each image.

AdityaC
Shopify Partner
2 0 3

Hi @oliviaajones 

 

The links from button won't work, after doing all this process you will see a new field on the backend, just after field where you choose the slider image, this is where you need to paste the link for it to work.

 

Hope that it helps!

oliviaajones16
Tourist
3 0 1

Hi @AdityaC Thank you so much for your help!

 

However, now my drop down menu options aren't working for those items that are above my slideshow. Do you know how to fix this?

snufflebum
Excursionist
29 0 4

I tried following all the steps, but I dont see a new field to add a link after my slider image. Can you please help?

sanjanapai
Visitor
2 0 0

Hi @AdityaC 

Would you be able to help out on this?

sanjanapai_0-1697082526992.png

I have the same issue with my store myporo.in

Nidhi_Singh
Visitor
1 0 1

Hello,
I did as mentioned. The image is now clickable but I am facing an issue with dropdown menu links. 
Dropdown menu links are not working on a desktop. On mobile, it's working fine.
https://whitedotsports.com/
Please can you help?

seanaapsc
Tourist
4 0 0

I'm also having this same issue. Wonderful solution otherwise, but it is making my drop down menu not clickable (only for those options that go over the banner) - https://dtfstation.com/

 

Any help is much appreciated!

oliviaajones16
Tourist
3 0 1

This is happening to me as well!

charles1024
Tourist
4 0 1

Hi @seanaapsc ,

 

Looks like your dropdown menu is clickable now.
May I know what is your solutions for that?

Thanks

 

seanaapsc
Tourist
4 0 0

Unfortunately, I have just removed this code for now, as the drop-down menu is more vital to me than the slideshow links currently. But I would still love a resolution to making the slideshow images clickable while still being able to use the drop-down menu. 

 

Oh just saw Jess-Macedo's reply about drop-down menu fix! Will try it and update if it works. Thank you!

BjornAnd
Visitor
3 0 0

This works "as a sharm" also on the Dawn 2.0 V-8.0 version!

Easy to implement 😉

Ramimak
Visitor
1 0 0

Hi, I can't find image pickeris it in slideshow.liquid?

Sohail_karim
Excursionist
17 0 2

I have tried link is added successfuly but problem rises when i click on menu bar instead of clicking buttons it clicks image_slider showing at the background of menu. 

How can i resolve this please?Screenshot (64).png

 

zainmirza60
Shopify Partner
33 0 3

This is workable but overlapping hero banner at site header menu due to z-index apply to avoid this bug please see below solution in code and screenshot:

 

 

 <div
        class="slideshow__slide grid__item grid--1-col slider__slide"
        id="Slide-{{ section.id }}-{{ forloop.index }}"
        {{ block.shopify_attributes }}
        role="group"
        aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
        tabindex="-1" 
        {% if block.settings.link %}
          onclick="location.href = '{{ block.settings.link }}';"
        {% endif %}
      >

 

 

Screenshot 2023-07-14 121735.png

zainmirza60
Shopify Partner
33 0 3

@waqas390 please read the above this is exact solution what you are looking.

zainmirza60
Shopify Partner
33 0 3

@sanjanapai please read the above my post it help you

Migratory
Shopify Partner
7 0 2

Thank you so much! Your code works, resolves the z-index issue with the dropdown menus and is elegant. This should be the the accepted solution. To improve it further, here's the code which shows a pointer (the one with the hand's index finger pointing upwards) when hovering your mouse over the banner:

 

{% if block.settings.link %}
  onclick="location.href = '{{ block.settings.link }}';"
  style="cursor: pointer;"
{% endif %}

 

Another thing to note is that this code only works when the "Button link" field in the theme editor is populated with a url.

jess-macedo
Shopify Partner
18 1 36
Hi,

I am not sure you saw my last response about this, but this was the
solution I found:

I am using Dawn theme 8.0.

First, for the slideshow, I changed a bit to this (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 -%}





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:
[image: 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...
<>
1
<>
<>
Report
<>
Reply
<>

zainmirza60
Shopify Partner
33 0 3

Let me try this but my above code is working well thanks for your efforts.

MEDICI
Visitor
2 0 0

Finally, I solved the problem by referring to the code in this article!

https://community.shopify.com/c/shopify-design/trouble-with-z-index-of-mobile-menu-after-making-link...

Kushalchugh
Visitor
2 0 0

Hii 
https://korefitness.in/ this is my store 


I have implemented this whole process in my backend. but the problem is  In mobile menu is not working properly. whenever I am clicking on it, there is a lot of problem.

In Desktop, whenever i am hover on menu, there is also lot of problem.

firstly please go to home page https://korefitness.in/ and then click the hamburger icon and then select the any option. If click then redirect the home page automatically


plz help me this problem as soon as possible


thanks & regards,
KUSHAL

zainmirza60
Shopify Partner
33 0 3

Hi Kushal,

 

I checked your site and z-index is making the issue. 

you need to apply another logic instead of z-index.

 

Check my above solution without z-index and with the onclick inline function in html. 

 

Thanks!

Zain

Kushalchugh
Visitor
2 0 0

I have tried everything, but it is not getting right. plz help me.

zainmirza60
Shopify Partner
33 0 3

Hi Kushal,

 

I checked your site now your header menu is working properly what is issue now yesterday it was not working.

 

Thanks

Zain

wamccar
Visitor
3 0 0

Is this still working for 11.0 version? I am having a few issues 

 

zainmirza60
Shopify Partner
33 0 3

@wamccar  I checked the release note of Dawn v11.0.0 and conclusion is that above solution will work with slideshow because nothings changed with slideshow code good luck. 

wamccar
Visitor
3 0 0

Okay thank you, I am having issues where I put in the code and then I can add a link, but I can not add a photo. Any way you could help out here? 

SecretStrangle
Tourist
7 0 1

Hey Jess,

 

Any chance you could help me with this pls? £ $

If you could show me over zoom?

 

I dont mind going into code but this one seems a bit much for me lol 

 

Thanks 

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