In many situations, we might want to turn the shopify slideshow section into a clickable area, and direct into our promotion landing page, or collection page.

Here is the steps to turn it into clickable slide.

Preparation work

To avoid any mistake ruin our shop, always duplicate the whole theme before editing the code.

Find the target div for modification.

For example, we want to make the whole slidshow grid into a clickable section, we should find the part as below.

	<div class="slideshow__media banner__media media
				{% if block.settings.image == blank %} placeholder{% endif %}
				{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"
          >
	//....//
	</div>

Add <a> tag to wrap the div

This will turn the whole div into a clickable component.

<a class="slide__link" href="{{ block.settings.link }}" target="_blank">
	<div class="slideshow__media banner__media media
				{% if block.settings.image == blank %} placeholder{% endif %}
				{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"
          >
	//....//
	</div>
</a>

Add a style before the <a> tag

We want the <a> tag to be as big as the parent component.

Also, to make sure that wherever you click inside this component, you can trigger the hyperlink, we set the z-index to 9 so that it is above everything.