Is there any way I can make image banners or slideshows clickable without having the button on them? I use the CRAFT theme
Hello, do you offer a service where you could do this ? if so how much does it cost
Yes I do. You can visit my website noted below so we can talk more in details
@BYTHB If you are still looking for a solution, I might be able to help. I used Made4uo’s video above and though it requires to update your code, it’s not very complicated.
I just ran into the same issue and posted my solution on a few others threads too.
This is what I did:
Keep in mind my solution might not necessarily be an exact match for your site, AND always backup your code before messing with it, unless you are a Code Grand Master ![]()
- Online Store / Action / Edit Code
- Under Templates, find the Slideshow.liquid file
- Row 75, you should see this code:
{%- if block.settings.heading != blank -%}
## {{ block.settings.heading | escape }}
{%- endif -%}
{%- if block.settings.subheading != blank -%}
{{ block.settings.subheading | escape }}
{%- endif -%}
{%- if block.settings.button_label != blank -%}
{%- endif -%}
- I added before the <div class… and closed that with after the last listed above. So my code now looks like this:
{%- if block.settings.heading != blank -%}
## {{ block.settings.heading | escape }}
{%- endif -%}
{%- if block.settings.subheading != blank -%}
{{ block.settings.subheading | escape }}
{%- endif -%}
{%- if block.settings.button_label != blank -%}
{%- endif -%}
Next steps:
- Scroll down to row 250-ish and look for the following:
"blocks": [
{
"type": "slide",
"name": "t:sections.slideshow.blocks.slide.name",
"limit": 5,
"settings": [
Add a line after the [ and add the following code:
{
"type": "url",
"id": "slideshow_image_link",
"label": "Slideshow Image Link"
},
The video on YouTube explains what all of that is for, but high level, you are adding a section in your Slideshow Template so you can specifically call out the link you want (external link, product, collection…) for each image in the Slideshow. (See screenshot below)
Select 1 of the slides from your Slideshow, on the Top, you should see the “Slideshow Image Link” and just below, the option to selection a Product, a Collection, Blog Post, etc…
I hope this helps!
That almost worked for me, it made the top part of the slides clickable, but it just links back to the home page with the 3 slides I use, which all have a different link applied to them. any recomendations?
thanks
Hi there,
I used the code but unfortunately it only linking the first slide and not the others. Please help. ![]()
