How can I make the entire slideshow image clickable without using buttons?

Hey Everyone,

So I am in the process of building more store using the Craft theme, I am having some issues regarding making the slideshow clickable. I don’t want to use buttons I want the whole image to be clickable.

Seems like a really basic feature to me that should be a default option for anything using a slideshow.

So I have found some solutions in the community, the one that I am closest with seems to be using

Then building a block setting of

“blocks”: [
{
“type”: “slide”,
“name”: “t:sections.slideshow.blocks.slide.name”,
“limit”: 5,
“settings”: [
{
“type”: “url”,
“id”: “slideshow_image_link”,
“label”: “Slideshow Image Link”
},

This works, I can create the reference add it into the block settings on the website builder etc that’s all fine.

However the ONLY place I seem to be able to put the <a href and have the entire image clickable is in the “section” not the block. All placements in the block do not seem to give me an entirely clickable image - I can only click to follow the link in certain areas of it.

is there a way around this using the section to reference a block setting so I can have a different image per slide?

Is there a specific section I need to put this < a href so that the entire image is clickable instead of certain parts of it?

If I add it to

<div class="slideshow__media banner__media media

Block then nothing appears clickable. Unless I shrink the page down to a mobile size? This seems to be what I want but something is stopping it functioning unless it is mobile.

If I uncheck show content below images on mobile in the website builder it no longer works on mobile either. So I assuming there is some king of content being displayed ontop of the images that is causing the issue.

Hello @Caprani ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

  1. Open your slideshow.liquid theme file

  2. Paste the below code under slideshow__media


  1. Set link for the button

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

1 Like

This worked like a charm! Thank you :grin:

Help! The code did make the slideshow clickable, however, it is overriding the menu dropdown options. For example: I click the menu icon in the header, and if the dropdown option is “on top of” the slide, when I click the menu option I’m directed to the page that is tied to the slide underneath it. This is true for mobile and desktop.