(Minimal theme) How to make slideshow images clickable

New Member
2 0 2

Hi,

 

I'm creating a store ( https://castlekeystore.com/ )

How do you make all of the slideshow images clickable without a button link.

 

Thank you in advance!

 

 

1 Like
New Member
2 0 0
@Castle wrote:

Hi,

 

I'm creating a store ( https://castlekeystore.com/ )

How do you make all of the slideshow images clickable without a button link.

 

Thank you in advance!

 

 


@Castle 
How did you do it if you don't mind me asking?

0 Likes
New Member
2 0 2

I e-mailed the Shopify support team and they added some code to the theme.

Now it's clickable in the customizer on my site which is pretty awesome!

 

I'll try to add the code below but i'm no HTML pro. Hope it helps :)

---------------------------------------------------------------------------------------------------

They added it to the Slider.liquid and theme.scss.liquid. 

 

theme.scss.liquid:

 

2697 - 2703 ( position within the Code)

 

/* Added by Matt C, Shopify Theme Support March 22 2019 */
.slide__link {
z-index: 999;
position: absolute;
width: 100%;
height: 100%;
}

-----------------------------------------------------------------------------------------------

Slider.liquid:

 

I'm not sure exactly where this code starts.

 

90 - 112 ( position within the code)

 

<li id="slide--{{ block.id }}" class="slides__slide slide-hide" data-slider-item data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{%- if block.settings.image != blank -%}
{% comment %} Added by Matt C, Shopify Theme Support March 22 2019 {% endcomment %}
{%- if block.settings.slide_as_link -%}
<a class="slide__link" href="{{ block.settings.button_link }}"></a>
{%- endif -%}
<img class="slides__image lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ block.settings.alignment }};"
alt="{{ block.settings.image.alt | escape }}">
{%- else -%}
<span>
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>

1 Like
New Member
2 0 0

Brilliant, thank you so much @Castle 

 

That's a real help, might just need a bit above and below it on the slider.liquid page if you would be so kind as to send that too?

0 Likes
New Member
1 0 0

Where do I insert the link may I ask?

 

Nothing seems to be appearing in my customizer.

0 Likes
New Member
2 0 0

This is great @Castle ! I did the edits you put here but I don't see it in my customizer. Where do you see it in your customizer exactly? Under the "Home page > Slideshow"? Or somewhere else?

0 Likes
Shopify Partner
26 0 2

Can someone post the complete instructions?

Thanks

Darleen

0 Likes
New Member
1 0 1

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.

 

1 Like
Tourist
7 0 2

I followed VitorASV's instructions, and was able to get the Image Link field to appear in my Slideshow settings, under my product. However, when I save the theme, I am still not able to click on the image to take me to the product that I linked it to.

0 Likes
Tourist
6 0 2

Hi Vitor, thanks for putting this together! I would like your help, in your instruction #4,#5 you say:

 

4 - Search for "image_picker"

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

 

I'm confused as to which closing tag. I have included a screen shot, can you let me know if it's the red or blue labeled closing tag you are referencing or is it one I am missing all together?

 

Close 1 or close 2.png

 

Thanks!

0 Likes