Clickable Slide in Horizon theme

Technical Q&A
, ,
1

I am wanting a slide to be clickable without needing to add a button. Can anyone share code that would be suitable. www.hyperactivedesigns.shop

2

Hey @HyperactiveDesigns

First off, nice site. Rare to see a Horizon looking this clean.

So very possible, and I imagine not very hard to do, but it would need changes to be made to the theme file. For that, I would need to look at your code.

Also, making code changes could mean you lose it during updates to the theme, and it would need to be applied each time.

But happy to make a video to show you exactly what to do and where. If that sounds good, with you, send me your collab code, and I can request access and look under the hood.

3

You can do this with a stretched link over the slide. Something like this in the slide markup:

```liquid

{% if block.settings.link != blank %}

<a class="slide__link" href="{{ block.settings.link }}" aria-label="{{ block.settings.heading | escape }}"></a>

{% endif %}

<!-- heading, text, etc -->

```

Then add:

```css

.slide { position: relative; }

.slide__link { position: absolute; inset: 0; z-index: 2; }

.slide__content { position: relative; z-index: 3; pointer-events: none; }

.slide__content a, .slide__content button { pointer-events: auto; position: relative; z-index: 4; }

```

That makes the slide clickable but keeps any actual buttons working. I would duplicate the theme first, then check the exact slide wrapper class in the inspector because Horizon’s class names can vary a bit by section.

4

Hi @HyperactiveDesigns

Yes, this is possible. You can make the entire slide clickable by wrapping the slide content in an <a> tag or adding a click event with JavaScript, so you don’t need to add a separate button. If you share your theme/slider code, I can help with the exact code.

Best regards,
Devcoder :laptop: