How to make slideshow clickable on mobile only

Store Design

Topic summary

A user wants to make their homepage slideshow clickable on mobile devices only, while keeping it non-clickable on desktop. They initially added code that made the slideshow clickable across all devices.

Initial Solutions Proposed:

  • Multiple users suggested using CSS media queries with @media screen and (min-width: 750px) to hide the clickable links on desktop
  • Early solutions used display: none !important on .slideshow__slide a

Complication:
The user reported that hiding all links removed their desktop “VIEW” buttons, which they wanted to preserve.

Refined Solutions:

  • Use :not(.button) selector to exclude buttons: .slideshow__slide a:not(.button) { display: none !important; }
  • Alternative approach using pointer-events: none instead of hiding elements

Most Specific Solution:
Target only the overlay links with position: absolute styling while preserving button functionality:

@media screen and (min-width: 750px) {
  .slideshow__slide > a[style*="position: absolute"] {
    display: none !important;
  }
}

This ensures desktop users can still click VIEW buttons while mobile users can tap anywhere on the slide.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello! I would like to make my slideshow on my homepage clickable, but only on the mobile version. I have entered the following codes:

{
“type”: “url”,
“id”: “image_link”,
“label”: “Image Link”
},

and this worked, but made the desktop version clickable too, and I wouldn’t want that.
Please help me with this.
crescent.hu
Pw: theaba

1 Like
2

Hi @crescenthu,

Please go to Customize > Sections > Slideshow > Custom CSS and add code:

@media screen and (min-width: 750px) {
.slideshow__slide a {
       display: none !important;
}
}
3

Hey @crescenthu,
In order to make the slideshow section clickable for the mobile only then you need to follow these steps.
Go to Shopify Admin >> Online Store >> Edit Code >> base.css.
In the base.css file paste the following provided code below.

@media only screen and (min-width: 767px) {
.slideshow__slide.grid__item.grid--1-col.slider__slide a{
  display: none !important;
}
}
4

For this you need to use Media Query for Mobile setting.

5

this works but I had a button in the desktop version, and with this code it disappears. Is there any way to have the button back, but the image non clickable? Thank you once again

6

Hello @crescenthu,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (min-width: 750px) {
  .slideshow__slide a {
    pointer-events: none;
    cursor: default;
  }
}
7

Hi @crescenthu,

Please change code:

@media screen and (min-width: 750px) {
.slideshow__slide a:not(.button) {
       display: none !important;
}
}
8

Hello @crescenthu

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

@media screen and (min-width: 750px) {
.slideshow__slide a:not(.button) {
       display: none !important;
}
}
9

Hey @crescenthu! Both solutions given are on the right track, but now that I can see your exact slideshow code, let me give you the perfect solution:

Best Solution for Your Specific Slideshow:

Go to your theme editor: Online Store > Themes > Customize > Add custom CSS (or Edit Code > base.css) and add this code:

/* Hide slideshow overlay links on desktop only (750px and above) */
@media screen and (min-width: 750px) {
  .slideshow__slide > a[style*="position: absolute"] {
    display: none !important;
  }
}

Even More Specific (if you want to target just your slideshow):

/* Target your exact slideshow section on desktop only */
@media screen and (min-width: 750px) {
  #shopify-section-template--25175622091100__slideshow_NCGQyr .slideshow__slide > a {
    display: none !important;
  }
}

Why this is the perfect solution for you:

  1. Targets the exact overlay links - Your slideshow has specific overlay links with position: absolute styling that make the entire slide clickable
  2. Preserves your VIEW buttons - The button links inside .banner__buttons will still work on both desktop and mobile
  3. Uses your exact class structure - Based on your actual slideshow HTML: .slideshow__slide > a
  4. Clean and specific - Only affects the full-slide overlay links, nothing else

What will happen:

  • Desktop: Slideshow images won’t be clickable, but VIEW buttons will still work
  • Mobile: Entire slide area will be clickable (including the overlay links)
  • Both: Navigation arrows and VIEW buttons work perfectly

Quick Test:
After adding the code:

  • Desktop: Try clicking on the slide image itself - shouldn’t work
  • Desktop: Try clicking the VIEW button - should still work
  • Mobile: Try clicking anywhere on the slide - should work
  • Clear browser cache if changes don’t appear immediately

This solution is much more precise than the generic approaches because it targets exactly the overlay links in your slideshow structure while preserving all the button functionality you want to keep!

Let me know if you want us to implement this for you, we’d love to.

Cheers!
Shubham | Untechnickle

2 Likes