Slideshow Clickable

New Member
3 0 0

Hi all,

I'm trying to make my slideshow images clickable without a button. I'm using the Debut Theme and tried to look for a solution but all I could find were solutions for other themes. Does anyone have any info on how to do that? 

Thanks, 

JDM Shop

0 Likes
Shopify Partner
1665 51 185

For a debut with sections go to your themes code editor and open slideshow.liquid

Method #1 Find the section that deals with displaying the default button link we'll repurpose that around line 88 the code will be like the following, copy it:

{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
	{%- assign show_link_button = true -%}
{%- endif -%}            
{%- if show_link_button -%}
	<a href="{{ block.settings.button_link }}" class="btn slideshow__btn">
{%- endif -%}

Then find the area that displays image , you'll want to wrap that with an <a> tag to create a link for debut the in slideshow.liquid around 44 you should find code like:

{% else %}
  <div class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
       data-bgset="{% include 'bgset', image: block.settings.image %}"
       data-sizes="auto"
       data-parent-fit="contain"
       style="background-position: {{ block.settings.alignment }};
              background-image: url('{{ block.settings.image | img_url: '300x300' }}');">
    {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
  </div>
{% endif %}

With the copied code from lines ~88+ :

{% else %}

  {%- assign show_link_button = false -%}
  {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
    {%- assign show_link_button = true -%}
  {%- endif -%}            
  {%- if show_link_button -%}
    <a href="{{ block.settings.button_link }}" class="btn slideshow__btn">
 {%- endif -%}
  <div class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
       data-bgset="{% include 'bgset', image: block.settings.image %}"
       data-sizes="auto"
       data-parent-fit="contain"
       style="background-position: {{ block.settings.alignment }};
              background-image: url('{{ block.settings.image | img_url: '300x300' }}');">
    {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
  </div>
  {%- if show_link_button -%}
	</a>
  {%- endif -%}
{% endif %}

Notice the   '{%- if show_link_button -%}    </a>  {%- endif -%}' at the end to close the <a> tag and wrap the image with a link.

Also for this to work you'll still need to enter info into the "button label" and "button link" in the theme customizer.

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
Tourist
4 0 1

It work great on computer version but on mobile version the button doesnt disapear but instead of is blocking the slideshow.

0 Likes
Tourist
4 0 1

Its working now but I had to change the code and delete not just code from 88th line but code for mobile wersion as well.


1 Like
Excursionist
13 0 0

Hi Paul,

 

Is there an updated code? Was trying to use this code but it's not working for the updated Debut theme.

 

–Jackie

0 Likes
Excursionist
11 0 4

Would you happen to have a solution for Brooklyn theme?

My slidshow.liquid look different !

Thanks so much

0 Likes
Shopify Partner
31 0 11

Here it is in a video step by step 

3 Likes
Shopify Partner
86 9 12

Hi @Farahan,

 

Can help you with that, shoot me an email.

Shopify help
denisaksutik@gmail.com
0 Likes
Excursionist
11 0 4

Thank you so much , will give give that a try.

0 Likes
Excursionist
11 0 4

Even though my codes where a bit different but it did worked out well ! 

Thank you so much for this !

Regards

 

0 Likes