Slideshow image clickable without button (Craft theme)

[kb338]

Hi there,

I want the whole slideshow image to be clickable but without the button.

I saw the similar tutorial for the Debut theme (link below). I tested and works fine!

https://community.shopify.com/c/shopify-design/tutorial-making-your-slideshow-clickable/m-p/904650/thread-id/227611?utm_campaign=Guru%20Ask&utm_medium=Forums&utm_source=social

However, when I switch to my favourite “Craft” theme and want to apply for the same approach, the coding is however totally different from Debut theme.

Could you kindly advise how to implement the same approach to “Craft” theme?

Gretaly appreciated. Many thanks!

kb

[KetanKumar]

@kb338

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[kb338]

@KetanKumar

Thank you! I just start and nothing ready inside the shop

I have image for the slide show, by default, on the image there is a button to click (and that’s the only area could be clicked).

There’s way to disappear the button, but it would disable hyperlink too. In my mind I would like to make the whole image to be hyperlink clickable.

I am using Craft theme. Many thanks!

kb

[Cyclops1717]

@kb338 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!

[DRTOWNER]

I want this for my slideshow.

‘I’m using dawn theme.

I want no buttons on the images.

I want image to be button to direct to corresponding pages.

‘how do I do that?

[Lwilli]

this 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.