Shopify Horizon Theme: Fix Unclickable Carousel Collections on Mobile iOS

Hey everyone! As a Shopify expert and someone who loves digging into the community forums, I often come across those little head-scratchers that can really trip up store owners. Today, I want to share a super helpful fix that came out of a recent discussion on the Shopify Community forums, specifically for those of you using the Horizon theme and noticing some weirdness on mobile.

Imagine this: you've set up a beautiful carousel of your product collections, maybe for different photography series or product categories, hoping your customers can easily swipe through and click to explore. It looks perfect on desktop, but then you grab your iPhone, swipe, tap... and nothing. The links just aren't working. Sound familiar? That's exactly what our fellow store owner, tifholmes, ran into.

The Frustrating Mobile Carousel Glitch on Horizon Theme

Tifholmes, who runs a fine art print shop, was using the most recent Horizon theme for their Shopify store. They had a fantastic Carousel collections menu designed to showcase different photography collections. On desktop, everything was smooth sailing – links were working perfectly, guiding customers to each collection with ease. But on mobile Safari on their iPhone, those collection cards were stubbornly refusing to act as links.

What's interesting is that tifholmes even downloaded another mobile browser on their iPhone, thinking maybe it was a Safari-specific bug. But nope, the issue persisted there too, leading to the assumption that "it's not just Safari." This is a common and understandable thought, but here's where a little technical insight from the community really shines.

The iOS Browser "Fun Fact" and the Simple CSS Fix

This is where another sharp community member, tim_1, stepped in with the perfect solution and a neat little "fun fact" that's super important for all iPhone users to know. Tim_1 pointed out that all browsers on iOS – whether you're using Safari, Chrome, Firefox, or anything else – are actually mandated by Apple to use the same underlying rendering engine: WebKit, which is essentially Safari's engine. So, yes, even if you're browsing on Chrome on your iPhone, you're still experiencing "Safari under the bonnet," as tim_1 eloquently put it!

This explains why tifholmes saw the same problem across different browsers on their iPhone. The core issue wasn't the browser app itself, but how the Horizon theme's elements were layered on that specific rendering engine.

The Solution: A Quick Custom CSS Snippet

The fix, thankfully, is incredibly simple and comes down to a bit of custom CSS. It's all about adjusting the z-index of the collection card links. Think of z-index as stacking order; sometimes an invisible or non-interactive element might be sitting "on top" of your clickable link, blocking it from being tapped. By increasing the z-index of the link, we bring it to the front of the stack, making it interactive again.

Here's how you can implement this fix for your Horizon theme:

1. Log in to your Shopify Admin: Go to your store's backend.
2. Navigate to Themes: In the left sidebar, click on "Online Store" > "Themes."
3. Customize your Horizon Theme: Find your active Horizon theme and click the "Customize" button.
4. Access Theme Settings: Once in the theme editor, look for the "Theme settings" icon (usually a cogwheel or brush icon) in the bottom-left corner. Click on it.
5. Find Custom CSS: In the Theme Settings menu, scroll down until you find the "Custom CSS" option and click on it.
6. Add the Code: In the Custom CSS box, paste the following code snippet exactly as it appears:

.collection-card__link {
    z-index: 2;
}

7. Save Your Changes: Don't forget to hit the "Save" button in the top right corner of the theme editor.

Why This Works & What to Do Next

Once you've added this small piece of CSS, the .collection-card__link elements in your carousel will have a higher z-index value, ensuring they are positioned "above" any potentially overlapping elements that might have been preventing taps on mobile iOS devices. Tifholmes quickly confirmed that this solution worked perfectly for their store, which is always fantastic to hear!

This little episode highlights a couple of key takeaways: first, the power of custom CSS for fine-tuning your theme when things aren't quite right. And second, the incredible value of the Shopify community. Often, someone else has already bumped into the same wall and found a way around it. So, if you're wrestling with a similar mobile display issue on your Horizon theme's collection carousel, give this simple fix a try. It might just be the magic touch your store needs to get those mobile customers clicking through your beautiful collections!