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

BYTHB
Visitor
2 0 0

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

Replies 6 (6)

made4Uo
Shopify Partner
3805 713 1128

Hi @BYTHB,

 

Follow this video tutorial on how. 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
BYTHB
Visitor
2 0 0

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

made4Uo
Shopify Partner
3805 713 1128

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

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Cyclops1717
Excursionist
33 0 13

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

Cyclops1717_2-1655748331407.png

 

I hope this helps!

Lwilli
New Member
7 0 0

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
New Member
4 0 0

Hi there, 

 

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