how to add link to image slide on homepage

Store Design

Topic summary

A user wants to make homepage slideshow images fully clickable while hiding the navigation buttons. Currently, only the button works for advancing slides, not the image itself.

Proposed Solution:

  • Add links and labels to slides in the Slideshow section
  • Insert custom CSS code in Online Store > Themes > Customize > Theme settings

CSS Modifications:
The provided code snippet adjusts:

  • .slideshow__text-wrapper padding to zero
  • .banner__buttons positioning to absolute with zero padding
  • .slideshow__text opacity to 0 and dimensions to 100%
  • Width settings to make the entire image area clickable

Status: Solution provided but not yet confirmed as implemented or tested by the original poster.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

the slide image allows to click the button to turn the next page but not the image, now I want to hide the button and make the image clickble, what should I do that? My website is https://jonvidesign.com

1 Like
2

It won’t work if I clicked other places except the button

3

Hi @momo110

Please add link and label for your slides in Slideshow section then add this code to Custom CSS in Online Store > Themes > Customize > Theme settings to make your images clickable.

.slideshow__text-wrapper {
padding: 0 !important;
max-width: 100% !important; }
.slideshow__text { height: 100% !important;
width: 100% !important;
opacity: 0;
max-width: 100% !important; }
.banner__buttons .button {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0; }