Slideshow Clickable

Tourist
10 0 2

Hello guys,

So I managed to remove the navigaton button on the venture theme, but now I want to make my whole slideshow clickable with the link to put on the normal customisation menu from shopify. Any one have done this before?

0 Likes
Shopify Expert
177 0 15

Hello,

There is an option in theme options of venture theme from where you can set the link of slider.

Hope this helps!

0 Likes
Tourist
10 0 2

Well actually I don't want to use their title and subtitle,  I left them blank and removed the navigation button. But now there is nowhere where you can click and get redirected with the link, thats why I need to have the whole picture of the slideshow to redirect to a certain collection depending of the picture. 

0 Likes
Shopify Expert
177 0 15

Ok. You can use code something like this

<a herf="Your link here"><img src="your image url"></a>

Hope this helps!

0 Likes
Tourist
10 0 2

Do you know where I can put this link exactly on my venture them. I am not a big expert on coding.

0 Likes
Shopify Expert
2618 50 614

Hey Tommy, you should have something like this in you slidewhow.liquid, but I guess you've deleted <div call="hero__text-wrap" ... </div>...

  </style>
  <div class="hero__slide">
    {% if block.settings.image != blank %}
      <div class="hero__image hero__image--{{ block.id }}"></div>
    {% else %}
      {% if block.settings.image == blank %}
        <div class="placeholder-background">
          {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% endif %}
    {% endif %}
    <div class="hero__text-wrap">
     ....
    </div>
  </div>

You should wrap your <div class="hero__slide" with <a></a> like so 

{% if block.settings.link != blank %}
  <a href="block.settings.link">
{% endif %}
  <div class="hero__slide">
     ....
  </div>
{% if block.settings.link != blank %}
  </a>
{% endif %}

(replaced lots of code with ... for clarity)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
10 0 2

Great Help, it worked! But you were missing some brackets on the href.

{% if block.settings.link != blank %} 

<a href="{{ block.settings.link }}"> 

{% endif %} 

<div class="hero__slide"> 
.... 

</div> 
{% if block.settings.link != blank %} 

</a> 
{% endif %}

Now maybe do you know guys how I could stop the slideshow from going to next slide when I am clicking it?

0 Likes
Shopify Expert
2618 50 614

Try this:

In your theme.js in function theme.Hero, modify this code. This should be true by default (look on this page), but who knows -- worth trying?

    this.$hero.slick({
      accessibility: true,
      pauseOnHover:true,  //---- add this line 
      arrows: false, // this theme has custom arrows
      draggable: false,
      autoplay: this.$hero.data('autoplay'),
      autoplaySpeed: this.$hero.data('speed')
    });

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Tourist
10 0 2

Yes everything is worth trying! I tried it but it stills goes to next slide before redirecting to the link. 

0 Likes
Shopify Expert
2618 50 614

Well, it could be because you've removed the arrows and the slider now assigns some areas to trigger the slide change? This needs researching. 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes