Making A Slideshow Image Clickable in Dawn Theme

Solved
sam1011
New Member
2 0 5

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)

Accepted Solutions
jess-macedo
Shopify Partner
16 1 16

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 28 (28)
ecom3_
Shopify Partner
10 1 2

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
jess-macedo
Shopify Partner
16 1 16

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
New Member
2 0 5

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

gabe14
New Member
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
16 1 16

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
New Member
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
16 1 16

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

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

Worked for me!

Muhammad-Faizan
Shopify Partner
10 0 1

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

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
16 1 16

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

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!

Nidhi_Singh
New Member
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?

AdityaC
Shopify Partner
2 0 1

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
New Member
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 1

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!

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!