Shopify themes, liquid, logos, and UX
One customization request that our team has seen a lot of demand for is making the slideshow of a theme clickable. In this guide, we will go through the necessary steps to achieve this by adding some code to the Slideshow theme file. The result will have your slideshow going from this:
To this:
Step One: Edit Your Theme Code:
Go to Online Store > Current Theme > Actions > Edit Code.
Debut:
<div id="slickSlide-{{ block.id }}"
On older versions of Debut it may be <div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}>
3. Add this snippet of code right below it:
<style>
.slide__link {
width: 100%;
height: 100%;
position: absolute;
z-index: 9;
}
</style>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>
4 Click Save.
Narrative:
<style>
.slide__link {
width: 100%;
height: 100%;
position: absolute;
z-index: 9;
}
{% if cta == blank %}
.slideshow__heading-cta.btn {
display: none;
}
{% endif %}
</style>
<a href="{{ block.settings.cta_link }}" class="slide__link"></a>
3. Click Save.
Minimal:
<style>
.slide__link {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
</style>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>
3. Click Save.
Brooklyn, Boundless, and Simple:
<style>
.slide__link {
width: 100%;
height: 100%;
position: absolute;
z-index: 9;
}
</style>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>
Venture:
<style>
.slide__link {
width: 100%;
height: 100%;
position: absolute;
z-index: 999999;
}
.hero-content__controls {
width: fit-content;
}
</style>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>
<a class="slide__link" href="{{ block.settings.button_link }}"></a>
Step 2: Add your link to your slideshow:
Once you have finished editing your code you will be ready to add your link to your slideshow. To do so, go to Online Store > Themes > Customize > Slideshow and click on an image block. You will then be able to add the link under ‘Button link’.
Click Save.
If you have any questions regarding this tutorial, feel free to comment on this thread. Please note that this tutorial is for Shopify Supported themes only and that we will be unable to assist with any third-party themes.
To learn more visit the Shopify Help Center or the Community Blog.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024