How To Make Slideshow Images Clickable On Shopify
Vložit
- čas přidán 31. 05. 2023
- Today i will show you how to make slideshow images clickable on Shopify store and set a link to banner images for dawn theme or any Shopify theme for customer to click on them.
Making slideshow and banner images clickable on Shopify can encourages users to interact with your store, this can lead to increased engagement and ultimately more sales for your Shopify store.
Also clickable slideshow images allow users to easily navigate to specific products or collections, improving their overall experience on your Shopify store and making it easier for users to find and purchase products, clickable slideshow and banner images can lead to higher conversion rates and increased revenue for your business.
It can also provide valuable data on user behavior and preferences for your Shopify store by tracking clicks and engagement on the clickable images, you can gain insights into what products and collections are most popular with your audience.
Code : pastebin.com/VHESjvAy
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this CZcams channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#images #clickable #shopify
I tried to figure this out for a while before coming across your tutorial and I had it working before the video was even over! Thank you for helping and making it so easy!
bro in image banner it work but slideshow not working
Yes it's confusing. The code doesn't work on slideshow, only image banner.
This was the easiest video and worked for the refresh theme 10.0.0 . thank you so much!
You're welcome, glad i could help.
Cheers
Huge respect for you. Thank you so much for making these videos!
Thank you and You're welcome, glad i could help.
Cheers
It worked, thank you!! I'm wondering if the "missing translation" text that comes after banner and height and also shows on color scheme options would create any problems?
These videos are always so helpful just a easy and simple tutorial!
Thanks and You're welcome.
Cheers
hi, this is another great idea i can actualy use on my store, thank you
Hey, glad to hear that.
Happy to help.
Cheers
Extremely helpful! Thank you so much!
You're very welcome, glad it was helpful.
Cheers
i learned a lot from you
Thaaank you
This helped a lot, I am wondering how to do this same thing with the slideshows though. I would love it if you could show us how that is done!
I want to know also I’m having problems doing so
@@barbeedbeebee7970me three. I really want this feature for a slideshow
YOU are AMAZING! Thanks for this
You're very welcome
Hi, thank you for making videos and providing free code, is there a way to do this for the collage section images? can it be done in the custom css section? I’m not a coder lol, thanks for any help
Thanks for tips. Can you explain how i can have a carroussel image for collection in my HomePage ?
Hello, thank you for this video. How can we remove the dots/counter/arrows below the slideshow images? I have been trying to do it for a month but I haven't been able to do it.
You can simply style them to display none it worked for me
I just one question , this white background around button “Shop all” how to get rid of it. That it’s attached to image banner ?
Thank you very much for your video, it is great. Just have a little question: Now that my Image Banner is clickable, I have problems with my Menu. My header is transparent, and my Image Banner is set to the top, the menu is visible above it. SO, now I can not select the Menu, because always select the Image Banner link. Can you help me with that?
slides with 2 or more images can also be placed so that the entire image is clicked?
Can you also make a vid for making "Image-With-Text" Clickable (refresh version 11.0.0)
is it worked in down team theme only "?
Hey can you make video on how to add shop now button label to mobile because I can only see it on my desktop for some reason
please can you make a video explaning how we make our list product smaller please
keep up
I noted your request and i'll work on it.
Cheers
thanks bro it work +1
You're welcome.
Thanks for making this. Have you tested this on Studio 13.0 for the slideshow? I don't get the link option above the image within the theme editor > slideshow > slide.
Also, when I add Image banner, I am getting a missing translation error within the customization bar on the right.
Banner height
>Adapt to first image
For best results, use an image with a 3:2 aspect ratio. Learn more
missing translation: "t:sections.image-banner.settings.adapt_height_first_image.label" is not present in any of the ["en"] schema locale files
missing translation: "t:sections.image-banner.settings.adapt_height_first_image.info" is not present in any of the ["en"] schema locale files
Color scheme
missing translation: "t:sections.all.colors.background_1.label" is not present in any of the ["en"] schema locale files
missing translation: "t:sections.all.colors.background_1.label" is not present in any of the ["en"] schema locale files
missing translation: "t:sections.image-banner.settings.color_scheme.info" is not present in any of the ["en"] schema locale files
I'm getting the same errors. What's the fix?
Can you please make a video on how we can also make the multi column and other ones clickable too
I got that video recorded, i just didn't edit it yet.
It might take a week or so to be posted.
Cheers
Hi, very useful video. I am using a Dawn theme 7.0.1 . If I want to make a clickable image, but not the first image of the site but a couple down below that, how can I do it? I created a custom liquid for this image banner and when I try to apply the code you provide into that custom liquid box, it does not work. so I am so confused...
Hey, thanks glad you think so.
I just recorded a video about that actually but it might take a while to be posted as i didn't edit it yet and im super busy these days.
It should be posted soon.
Cheers
Just use the same section twice.
Bro thank you ! PLease can you help me with the website. I have made the video banner as it was done in one of yours videos, but when I switch on mobile it becomes small, can you please help me how to make it full screen on a mobile?
You're welcome, Which one ? is it the banner video ?
also what theme are you using ?
bro please help out with the code pastebin its not opening i need it urgently
how did you make the slideshow full size/ i want my header to be in the slideshow, i set the opacity to lower but i dont know how to do it.
What theme are you using ?
I think there is an option to do that for every theme from the theme customizer.
Cheers
@@OnHOWGuy refresh ofc
hello. The link shows butI received the following error it is not clickable. Please assist:
missing translation: "t:sections.image-banner.settings.header.content" is not present in any of the ["en-US", "en"] schema locale files
Currently getting the same issue
Thanks
You're welcome.
Cheers
How to resize the image in the slideshow section though?
This is what I’m having problems with also 😢 I don’t know how to and I really want my Slideshow picture to fit
Is there already a video to make multi column pictures clickable too?
Yeah i did made that video and it will be posted soon
Cheers
tnky anas i have one qs fach kankteb description f store shopify o kandir save mnin kanmchi theam makanl9ahach fmra wakha jarebt bzef dyal theams awel mera ntih fehad lprb ila 3ndk kifach n7al had prb 9olo li hna wela dir lih video pleas tnkyyy
You're welcome, you mean product description ?
thats strange, use different browser or private window to view the store instead.
Cheers
But how do you make a multi collum clickable?
amigo son muy buenos sus videos podria incluir subtitulos
Anyway you can do it for the section slideshow.liquid?
my slideshow images go very thin when I add a link
I'm unable to change this setting.Nothing has changed since the new code was implemented in terms of adding links.kindly assist
Are you sure you did the steps correctly ? you cant find the option where to set a link ?
i followed exact steps yet its not working, im using the Taste Theme
it did not work on my shopify dawn theme version 13.0.1
Anas, I tried this but it doesn't make my slideshow images clickable. I am not using Dawn. Do you have any other fixes?
Hey, Its hard to tell if you are not using dawn theme and also im working on an update for this video.
Which theme/version are you using ?
Let me know in a new comment please as its difficult for me now to see replies.
Cheers
make video on owl image carousel
Me again. I use Studio for my theme and I’m using the latest version which is 15.
I see, i have an update on this on the way and will be posted soon.
Shopify updates changes things for some themes so its difficult to keep up.
Cheers
when you just hover nav menu at header, menu items is opening, how to do that?
I made a video about that
I'm setting my slideshow on desktop view but on mobile view it's just a mess
w mans make me some money
😊
i tried it , it worked, the image is clickable but it became very small, i can't see the whole image banner only a part of it
Hey, did you re-set the picture again from the theme customizer ?
also what theme are you using ?
Cheers
Incorrect code provided as this code only work with clickable image banner nd it does not work with sildeshow banner. Both have different code. If possible then make a video proper sildeshow banner wherein sildeshow banner will be clickable.
it worked on Image banner not on the slideshow images as you mentioned.
its May 2024 its working in banner but not slideshow
Unfortunately it doesn't work for me. Maybe is it because I'm using the refresh theme?
Hey, i tested it on refresh theme as well, which version you have ?
Cheers
@@OnHOWGuy it works on image banner but not on slideshows!
this code only for image banner template
@@pzudemp
Great tutorial, but please stay on topic.
Yes, this is for image banner. Not for the slideshow.
this was misleading it didn't do anything for my slideshow images like the title said
hello bro
WHY EVERY ONE WORKS ON DAWN THEME!!!! WHYYYY :( i need it for the studio theme
Because its the most used theme in Shopify.
le lien ne fonction plus tu peut m'aider
Try with vpn
This is great info but I don't find image-banner.liquid on my theme. What is the alternative?
this is for a banner image not a slideshow as described in the title!
did you find video?
Didnt work for me
The link isn't working
it is working just fine, try with vpn.
Cheers
My images disappeared bruh
A
Your title says Slideshow .. and you did it on a banner .... it is not the same and it does not work for slideshow .... bad
Its called a Slideshow Banner -__-
This is not suitable for the slideshow banner, only the image banner.
Great Video!!! Can you please make a video about paypal smart buttons? they are really hard to use
Did not work. Sorry
that was completely shit
I found you only need to add this code at the start of the schema code in the original code of the section-image-banner.css that shopify provide. if you do ctrl f and type schema in and then scroll down to setting[ paste this in and save it and it works and stills lets you chnage colours and dosent come up with any odd stuff
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "checkbox",
"id": "new_tab",
"default": false,
"label": "Open in new tab?"
},
missing translation: "t:sections.image-banner.settings.adapt_height_first_image.label" is not present in any of the ["en-US", "en"] schema locale files
missing translation: "t:sections.image-banner.settings.adapt_height_first_image.info" is not present in any of the ["en-US", "en"] schema locale files
its giving this error
it did not work on my shopify dawn theme version 13.0.1
same