How can I make my entire slideshow photo a clickable link in Craft theme?

[emac212]

I’m looking to have my whole slideshow photo be a link. Right now it only allows me to do a button. I have not seen a solution so far for my theme “Craft”

[Zworthkey]

@emac212
Welcome to Shopify community.
You can Make it by the custom code,
and for that you have to hire a developer to Get this.

Thank you.

[emac212]

I have sent an email to you. Please advise further. Thanks

[Cyclops1717]

@emac212 If you are still looking having the image clickable for your Slideshow on the Craft theme, this video is extremely useful: https://www.youtube.com/watch?v=6Jc3bmvI49Q&t=586s

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!

[stellabean]

Hello! I’m so happy to have found your directions. However I did this exactly as you described and the link only works on the top 1/3rd of the slide. It does work and linked the image, but you can only click on the top 1/3rd. Any idea why this might be and how I can fix it?

[Cosymax]

Have you found a solution to this problem?

[Lwilli]

Mine does the same as Stella, only the top part is clickable, and it will only link to the home page

[Lwilli]

I did a days worth of tinkering and finally found a solution, cyclops1717 method only works for me if I have something (I used a period) typed in the button label box, and uncheck use outline button, and show container on desktop, haven’t tested it on mobile yet though. hope this helps.

[Lwilli]

make sure you put a period or something in the button label box or it doesn’t work.