can I make image banners or slideshows clickable without having the button on them? CRAFT

[BYTHB]

Is there any way I can make image banners or slideshows clickable without having the button on them? I use the CRAFT theme 

[made4Uo]

Hi @BYTHB,

Follow this video tutorial on how. 

[BYTHB]

Hello, do you offer a service where you could do this ? if so how much does it cost

[made4Uo]

Yes I do. You can visit my website noted below so we can talk more in details

[Cyclops1717]

@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:

        <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
          <div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
            {%- if block.settings.heading != blank -%}
              <h2 class="banner__heading {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
            {%- endif -%}
            {%- if block.settings.subheading != blank -%}
              <div class="banner__text" {{ block.shopify_attributes }}>
                <span>{{ block.settings.subheading | escape }}</span>
              </div>
            {%- endif -%}
            {%- if block.settings.button_label != blank -%}
              <div class="banner__buttons">
                <a{% if block.settings.link %} href="{{ block.settings.link }}"{% else %} role="link" aria-disabled="true"{% endif %} class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}">{{ block.settings.button_label | escape }}</a>
              </div>
            {%- endif -%}
          </div>
          </div>

• I added <a href="{{ block.settings.slideshow_image_link }}"> before the <div class... and closed that with  </a> after the last </div> listed above. So my code now looks like this:

<a href="{{ block.settings.slideshow_image_link }}"><div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
          <div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
            {%- if block.settings.heading != blank -%}
              <h2 class="banner__heading {{ block.settings.heading_size }}">{{ block.settings.heading | escape }}</h2>
            {%- endif -%}
            {%- if block.settings.subheading != blank -%}
              <div class="banner__text" {{ block.shopify_attributes }}>
                <span>{{ block.settings.subheading | escape }}</span>
              </div>
            {%- endif -%}
            {%- if block.settings.button_label != blank -%}
              <div class="banner__buttons">
                <a{% if block.settings.link %} href="{{ block.settings.link }}"{% else %} role="link" aria-disabled="true"{% endif %} class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}">{{ block.settings.button_label | escape }}</a>
              </div>
            {%- endif -%}
          </div>
          </div></a>

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!

[Lwilli]

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

[sheri666]

Hi there, 

I used the code but unfortunately it only linking the first slide and not the others. Please help.🙏