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

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
3839 716 1177

Hi @BYTHB,

 

Follow this video tutorial on how. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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
3839 716 1177

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
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.🙏