(Minimal theme) How to make slideshow images clickable

New Member
1 0 0

The info is very helpful and it worked, thanks!!!

0 Likes
Excursionist
19 1 5

@VitorASV wrote:

Hello friends,

 

Thanks to Castle's code, I could figure out how to do it. Here goes the tutorial for Minimal:

 

1 - Open slider.liquid

2 - Search for "<img class="slides__image"

3 - Right above it, paste the following code:

{%- if block.settings.image_link != blank -%}
<a class="slide__link" href="{{ block.settings.image_link }}"></a>
{%- endif -%}

 

4 - Search for "image_picker"

5 - Right below it's closing tag }, paste the following code:

{
"type": "url",
"id": "image_link",
"label": "Image Link"
},

 

---Position for pasting the last code shown----

"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},

[PASTE IT HERE]

 

6 - Save your work

7 - Go to theme.scss.liquid and after to its last line of code

8 - Post the following code there:

/* CSS Trick for clickable slide */
.slide__link {
z-index: 999;
position: absolute;
width: 100%;
height: 100%;
}

 

9 - Save it

 

What should happen is the addition of a field on your slide configuration called "Image Link". Your can browse your store's page and make it the clickable link of the slide selected.

 

I hope it works with everybody. It took me some hours of research to figure it all out.


 Can someone PLEASE accept this as the answer!
I have been looking for so long how to anchor link my image slider images to sections in my homepage and this guy came through!!!!!
A billion kudos to you @VitorASV and @Castle 

1 Like
New Member
2 0 0

I followed complete instructions and got the new field to show up but the image is not actually clickable. Is this happening to anyone else? Also, is theme.liquid an ok substitute for theme.scss.liquid? (I cant find this). Im also using Minimal theme.

0 Likes
Highlighted
New Member
1 0 0


0 Likes
Tourist
10 0 4

Hi @VitorASV, would it be possible for you to take screen shots of the code you are using? We have tried it several times but keep getting a json error and think being able to see the steps on your screen would help.

 

 

clickable rotator - json error.png

 

Thank you so much for your help!

0 Likes
New Member
2 0 0

For those of you that cant get this to work on the minimal theme... I just paid someone on fiverr $15 (plus tip) to do this for me. It took him less than a day, and now my slideshow is clickable. I cant exactly see what he did when I go into my code.. but now if I put a link in "button" link, it makes the slide go to that link. 
Here's the link to the gig: https://www.fiverr.com/awais_javed8/do-custom-shopify-coding-for-your-store He was very nice and professional. Highly recommend if you cant figure it out on your own.

 
0 Likes
New Member
2 0 0

You should not paste this in too: (It was just an explanation on which position you should paste the code, I did it first too - and had the same message :))

---Position for pasting the last code shown----

"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"nl": "Afbeelding",
"pt-BR": "Imagem",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},

[PASTE IT HERE]

 

 

0 Likes
New Member
2 0 0

THANK YOU SO MUCH - PERFECT! 

0 Likes