Beyond Buttons: How to Make Entire Slides Clickable in Shopify Horizon
Hey there, fellow store owners and Shopify enthusiasts!
One of the most common design requests I hear, especially when we're talking about modern, clean themes like Shopify's Horizon, is how to make those beautiful hero slides or image banners entirely clickable. You know, that feeling when you just want to click anywhere on a slide and be taken to the linked product or collection, rather than hunting for a specific 'Shop Now' button?
Recently, a store owner, @HyperactiveDesigns, brought this exact question to the Shopify community forums regarding their Horizon theme. They wanted to know if it was possible to make an entire slide clickable without the need for an explicit button, sharing their site www.hyperactivedesigns.shop as an example of their clean setup. And let me tell you, this is a fantastic question that comes up a lot! It's all about enhancing the user experience and streamlining navigation.
Why Make Your Entire Slide Clickable?
Think about it: a large, engaging banner image is often the first thing a visitor sees. If that image is promoting a new collection or a special offer, making the whole area interactive means fewer clicks for your customer and a more intuitive browsing experience. It feels more fluid, more modern, and frankly, more professional.
The Community's Take: How to Get It Done
The good news is, the community quickly confirmed that this is absolutely possible! Devcoder kicked things off by suggesting two main paths: either wrapping the slide's content in an tag or using JavaScript to add a click event. Both are valid, but as the discussion unfolded, a particularly elegant CSS-based solution emerged that I want to dive into.
Ycs shared a brilliant approach using what's often called a "stretched link." What's great about this method is that it makes the entire slide clickable while still preserving the functionality of any existing buttons or links *within* the slide content. This is a crucial distinction, as you don't want to break other interactive elements you might have!
Michael-Thomas also chimed in, praising HyperactiveDesigns' clean Horizon site and reinforcing that while possible, it would require direct theme file modifications. He also raised a super important point we always need to remember when customizing our themes: any direct code changes might be overwritten during future theme updates. This means you'll need to re-apply them or ensure they're implemented in a way that minimizes update conflicts (e.g., via custom CSS files or app blocks if possible). Always, always duplicate your theme before making any significant code changes!
Step-by-Step: Implementing the Clickable Slide (The "Stretched Link" Method)
Alright, let's get into the nitty-gritty. This method involves a bit of Liquid (Shopify's templating language) and some CSS. Remember Ycs's advice: duplicate your theme first, and use your browser's inspector to identify the exact wrapper classes for your specific slider section in Horizon, as they can sometimes vary.
1. Duplicate Your Theme
Seriously, don't skip this. Go to your Shopify Admin > Online Store > Themes. Find your current theme, click "Actions" > "Duplicate." This gives you a safe playground.
2. Locate Your Slider Section File
In your duplicated theme, go to "Actions" > "Edit code." You'll typically find your slider or image banner sections under the sections/ directory. Common file names could be image-banner.liquid, slideshow.liquid, or something similar depending on how your specific Horizon theme setup is structured. Open the file that controls your main slider/banner.
3. Add the Liquid Code for the Stretched Link
Within that Ycs provided this excellent snippet: Explanation: This code checks if a link has been set in the theme editor for that particular slide block ( Next, you'll need to add some CSS to make that Explanation: Once the code is in place, save your changes. Now, head back to your Shopify Admin > Online Store > Themes > Customize (for your duplicated theme). Navigate to your slider section. For each slide block, you should now find an option to add a link (often labeled "Link" or "Slide link"). Enter the URL you want the entire slide to go to. This "stretched link" method is a fantastic way to achieve that full-slide clickability without sacrificing the functionality of other elements. It's a clean, CSS-driven solution that enhances UX significantly. Remember Michael-Thomas's caution about theme updates. If you're going to make significant code changes, consider documenting them thoroughly or exploring methods like using custom CSS files that are less likely to be overwritten by theme updates. Always test your changes extensively on different devices and screen sizes to ensure everything works as expected, especially accessibility features like the Big thanks to @Devcoder, @Ycs, and @Michael-Thomas for their valuable contributions to this discussion. It's insights like these from our amazing community that truly help store owners like @HyperactiveDesigns elevate their stores!.liquid file, you'll need to find the main wrapper for each slide block. Look for something like a tag that stretches over the entire slide, but crucially, *before* the main content of the slide.
block.settings.link != blank). If it has, it renders an invisible tag with the class slide__link. The aria-label is super important for accessibility, telling screen readers what the link is for.4. Add the CSS Styling
.slide__link actually stretch over the entire slide and handle layering correctly. You can add this CSS to your theme's main CSS file (often assets/theme.css or a specific CSS file for your section if one exists)..slide { position: relative; }
.slide__link {
position: absolute;
inset: 0; /* This is a shorthand for top: 0; right: 0; bottom: 0; left: 0; */
z-index: 2;
}
.slide__content {
position: relative;
z-index: 3;
pointer-events: none; /* Prevents clicks on content from activating the stretched link */
}
.slide__content a, .slide__content button {
pointer-events: auto; /* Re-enables clicks for actual buttons/links within content */
position: relative;
z-index: 4; /* Ensures buttons/links are above the stretched link */
}
.slide { position: relative; }: This is crucial. It makes the slide container the reference point for absolutely positioned children..slide__link { position: absolute; inset: 0; z-index: 2; }: This makes our new link absolutely positioned and stretches it to cover the entire parent .slide element. The z-index: 2; places it above the slide's background but below the main content..slide__content { position: relative; z-index: 3; pointer-events: none; }: We give the main content a higher z-index to ensure it's visually on top. pointer-events: none; is the magic here – it makes the content itself *not* clickable, allowing the stretched link underneath to receive clicks..slide__content a, .slide__content button { pointer-events: auto; position: relative; z-index: 4; }: This is the genius part! For any actual links or buttons *within* your slide content, we explicitly re-enable their click events and give them an even higher z-index, ensuring they function as expected.5. Configure the Link in the Theme Editor
Final Thoughts and Best Practices
aria-label.