Clickable Slideshow image and a clickable button - Dawn

Store Design
, , , ,
1

Hello everyone,

I managed to make the default slideshow in the Dawn theme clickable. This is the solution commonly found online, with several videos explaining the same method. However, the issue is that the clickable button on the default slideshow stops working. I need both the image and the button to be clickable.

The code I used to make the image clickable was adding the following code right after the on line 152 of the slideshow.liquid file, in the default code:

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

Later, there’s this piece of code between lines 381–385.

{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},

I added this piece of code after the “,” resulting in the following:

{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
{
"type": "url",
"id": "image_link",
"label": "Image Link"
},

Is there a way to keep both options (Button and whole image clickable)?

Thanks

1 Like
2

Thank you very much for the answer!

Unfortunately it doesn’t work, as I need the entire image to be clickable as well as the button with its respective effect when the mouse is over it.

Need to consider that each image in the carousel will have the same link as the button.

I’ve been working on it and I can’t find a solution

3

Hi @Vilcka ,

The issue of z-index, since you add the below code

z-index: 999; is overlapping everything now therefore CTA is not working

All you have to do is apply below attribute on CTA.

style="z-index: 1000; position:relative;"

Let me know if issue still exist and best will be to share your store URL to check.

Hope this will helps…