Making A Slideshow Image Clickable in Dawn Theme 15

[Violetacostas]

Hello!

I'm looking for a solution to make my slideshow images clickable in the Dawn theme. By clicking on the image, you will be redirected to the assigned page. Can anyone help me?

I have followed all the tutorials included here, but it seems that version 15.1 is different because none of them work for me. Thank you.

[Tech_Coding]

Hello @Violetacostas 

To make slideshow images clickable in the Dawn theme (version 15.1), you can customize the theme's code to wrap the images in a clickable link. Here’s how to do it:

Step 1: Access the Slideshow Section Code

1. Go to Online Store > Themes > Actions > Edit Code.
2. In the Sections folder, locate the file named slideshow.liquid.

Step 2: Modify the Slideshow Code

1. Open the slideshow.liquid file.

2. Look for the section where the image is being rendered. It will likely look something like this:

   liquid:

   <div class="slideshow__image-wrapper">

       <img src="{{ slide.image | img_url: '2048x2048' }}" alt="{{ slide.image.alt | escape }}" class="slideshow__image">

   </div>

3. To make the image clickable, wrap the <img> tag with an anchor (<a>) tag. Here’s how you can do it:

   liquid:

   <div class="slideshow__image-wrapper">

        <a href="{{ slide.link }}" class="slideshow__link">

           <img src="{{ slide.image | img_url: '2048x2048' }}" alt="{{ slide.image.alt | escape }}"      class="slideshow__image">

       </a>

   </div>

4. Replace {{ slide.link }} with the variable that holds the URL you want to link to. If you don't already have this variable, you might need to add a setting in the slideshow's JSON schema to allow for link inputs.

Step 3: Add Link Settings (If Necessary)

If your slideshow settings don't already include a link field, you'll need to add it:

1. In the same slideshow.liquid file, locate the JSON schema at the bottom of the file.

2. Add a setting for the link like this:

   json

   { "type": "url", "id": "link", "label": "Slide Link" }

3. This will allow you to specify a link for each slide in the theme editor.

Step 4: Save and Test

1. Save the changes.
2. Go back to the theme editor (Online Store > Themes > Customize).
3. Navigate to the slideshow section and input the desired URL for each slide.
4. Preview the changes on your storefront to ensure the images are now clickable and redirect correctly.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Violetacostas]

Hello, thank you for responding so quickly and in such detail.
But the code that I should search for that way does not appear, maybe I am looking in the wrong place?

[Made4uo-Ribe · Accepted solution]

Hi @Violetacostas 

Check this one, it's one by one instruction. 

https://community.shopify.com/c/shopify-design/slideshow-speed-in-the-dawn-theme/m-p/2746078#M719231 

Or visit this post. 

https://community.shopify.com/c/shopify-design/making-a-slideshow-image-clickable-in-dawn-theme/m-p/...

Let me know if you have difficulties I can guid you. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!