Clickable/Link entire slideshow image in "Rise" theme

Store Design
, , ,
1

Hello, I’m currently building a new Shopify site using the “Rise” theme as a basis and would like to make the slideshow clickable without having to use any buttons, just so that the image itself can link to another page.

I’ve looked up other solutions but they all seem to be theme-specific.

Is there an expert that could help me out with this element of my shop? Thank you so much!

2

Hello @bitfinity,

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

3

@bitfinity Thanks for reaching out to Shopify community with your concern. You need to make changes in your theme code. Edit theme code under sections > slideshow.liquid file to wrap the anchor tag on the whole banner instead of just button.

4

Right, that’s what I’m looking for help on as I am not a coder

6

@bitfinity ,
Open your theme,

Open slideshow.liquid

search for <div class="slideshow__text-wrapper banner__content banner__content–{{ block.settings.box_align }}

Place the following code above it:

  1. image

After that, search for image_picker and paste this piece of code just after it:

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

7

@bitfinity Open slideshow.liquid

search for <div class="slideshow__text-wrapper banner__content banner__content–{{ block.settings.box_align }}

Place the following code above it:

<a href="{{ block.settings.image_link }}" style="display:block; position:absolute; height:100%; width:100%;left:0; top:0; z-index:99"></a>

After that, search for image_picker and paste this piece of code just after it:

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

8

Thank you for this!

I got the first part I believe, but having issues with the second part with “image_picker” section.
Screenshot attached. I don’t think what I did is right. When I tried the section after “image_picker” or directly after (line 398), both give me an error

Screenshot 2026-02-12 at 5.20.27 PM
Screenshot 2026-02-12 at 5.20.27 PM1548×1330 230 KB

9

PW: “rafoff”

10

Hi @bitfinity

Your settings array should look like this exact format:

“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.slideshow.blocks.slide.settings.image.label”
},
{
“type”: “url”,
“id”: “image_link”,
“label”: “Image Link”
}
]

11

@bitfinity This is due the inverted commas. Please delete the inverted commas and manually write it again in that last code. Sometimes the inverted commas get converted into special characters which couldn’t be recognized. Once you do that you will be able to save it. Also remove white space from above and below the curly brackets.

12

Ah, got it – I see what’s going on.
After that fix, it worked! Thank you so much!!