Shopify themes, liquid, logos, and UX
Hi!
I am looking for a solution to make my Slideshow Images Clickable in Dawn Theme. On clicking the image, it should be redirected to the assigned page. Can someone help me out here?
Thank you.
Solved! Go to the solution
This is an accepted solution.
Hello, here is the solution:
1. Open your theme,
2. Open slideshow.liquid
3. search for <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }}
4. Place the following code above it:
<a href="{{ block.settings.image_link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>
After that, search for image_picker and paste this piece of code just after it:
{
"type": "url",
"id": "image_link",
"label": "Image Link"
},
As you've mentioned, after copying and pasting the code onto the banner, the links on the dropdown menu, which appears above the banner, are not working correctly. The problem is that when the dropdown menu items are clicked, the banner's link is being selected instead of the dropdown menu. To address this issue, please provide me with the specific code you're using, particularly related to the banner and the dropdown menu. This will allow me to provide more accurate guidance on how to resolve the problem.
Hey there!
I tried using this code and while the images are clickable on the slideshow, when i click on the image it gets redirected to the home page and not the product collection page as i desired.
Kindly help me with this
Thankyou 🙂
Hey Jess,
This is a great solution, thank you.
I'm wondering if you could help me develop it a step further - could I potentially set the image click to open a modal. In order to do so, I would need to put a selector in to set the data-target and data-toggle so each image opened a different modal. Do you think this would be possible?
Hi; this didn't work for me. It made the slideshow clickable, but it took me to the homepage rather than the button URL.
It almost works except that the banner clicks to the home page. Any ideas on what I did wrong?
04/04/2024 and your solution works perfectly. Thank you!!
Hi Jess-Macedo!
Could you please help me with this image_picker thing? Where can I get it? Sorry I am new to shopify.
Hi,
I am currently using Dawn version 14.0.0 and cannot find what you mentioned on point 3 <div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }}
I understand the theme has gone through many changes since 2022 and wanted to know if you can help me do the same so that I can make the whole image clickable?
inves desse codigo abaixo:
<a href="{{ block.settings.image_link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>
Trocar por esse:
<a href="{{ block.settings.image_link }}" style="position: absolute; bottom: 0; right: 0; left: 0;top: 0;">
Hi, I have just tried the code with the Refresh theme and it has made the slideshow image clickable, but when clicked it doesn't go to the collection link I chose in the Shopify Editor... am I doing something wrong? thanks
This is not working when we open/ click on Auto-rotate slides option. You have any solution for it?
Works great with one caveat:
When I have 2 or more images in my slideshow and I only want to make one clickable (enter a link), the rest of the images are still clickable and take the user to the homepage (no link entered). Is there a way to prevent images that I haven't entered a link for to become clickable?
Oh, that was actually very simple to solve:
Just wrap the href argument into an if statement:
{%- if block.settings.image_link != blank -%}
<a href="{{ block.settings.image_link }}" style="display: block;position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 999;"></a>
{%- endif -%}
Where to find image_picker?
It really works!!
Guys, here is the updated version for dropdown menus, I noticed a lot of you had this issue before, so here it goes:
"type": "url",
"id": "image_link",
"label": "Image Link"
},
Hi there!
I updated to this new version, and now my drop down menu is working again, but my slideshow is not clickable any more.
How do I have both my slideshow clickable and my drop down menu working?
still didn't work 😞
Hi folks,
I've come across an issue with the provided code, and it's not performing as expected. I'm always looking to optimize and improve code efficiency. You can find my website for context at https://www.bckpods.com/.
If anyone has insights on how to enhance the code, I'd greatly appreciate your assistance. Your expertise would be invaluable.
If some one looking for a video solution to this feature:
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024