Debut Theme: Image with Text Overlay Clickable Image

Highlighted
Excursionist
44 0 7

Hey, im trying to make the image with text overlay clickable so it can link to all my products. I saw other people tell how to do it and they pasted codes and they worked but each time it would mess something up. For example, one time it made my image very large and zoomed in. Could someone give me a guide on how i can achieve this clickable image? Thanks.

1 Like
Highlighted
Shopify Partner
9252 1179 3254

Hello, @filip0801 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
4 0 3

Hey man!  

I had the same problem and I could solve it! 
I just wanna share this because I believe in good karma or whatever haha.

It is kind of simple if you just copy-paste my code

 

1- Open slideshow.liquid

2- Search for  "<div
{% unless block_image.alt == blank %}
role="img"
aria-label="{{ block_image.alt | escape }}"
data-alt="{{ block_image.alt | escape }}"
{% endunless %}
class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
data-bg="{{ block_image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: block_image %}"
data-sizes="auto"
data-parent-fit="contain

 

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 this helps many people as I struggle and got this working!!! 

And also kudos to https://community.shopify.com/c/Shopify-Design/Minimal-theme-How-to-make-slideshow-images-clickable/...

 

One guy shows how to do it in minimal theme. I got the answer from him.


Have a nice day and good luck!!!

 

2 Likes
Highlighted
New Member
2 0 0

Thankyou so much!!!!! I've been trying to figure this out for so long!! You're a lifesaver. Thankyou thankyou thankyou!

0 Likes