How can I make images clickable in Dawn without disrupting appearance?

[MorganaBevan]

Could someone help me figure out what code I need to use and where to make images clickable in Dawn? 

A few weeks ago, all of my images (not header banner or image banners) were clickable. Support tell me that's impossible and refuse to actually help. 

I've done a bunch of searches online but everything is fixated on the sliders and banners. It's a normal image I need to be clickable. I've added the links already to those images but without adding a label they don't work. 

For example, I want all of the images on this page to be clickable to Spotify. The links for each are already inputted, I just need them to trigger without a label messing up the apperance on the page. 

https://shop.morganabevan.com/pages/book-playlist

Or the row of four book covers here on the main page https://shop.morganabevan.com/ 

They are meant to link to their respective product pages but without adding a label again they won't work.

Any ideas? 

[zarri · Accepted solution]

Hi @MorganaBevan,
Please try this solution.
step 1.
Add following css to  ""Custom CSS" block in "Multicolumn" section at the bottom. This will hide arrow and label

.animate-arrow {
display: none;
} 

Step 2. Go to edit theme and search for "multicolumn" in left panel.

There a div having class name ""multicolumn-card__image-wrapper multicolumn-card__image-wrapper"

you have to put that whole div inside following code (see attached images)

<a href="{{block.settings.link }}">

</a>

Good Luck 🙂

[MorganaBevan]

That worked perfectly. Thank you.

[zarri]

That's great!
You are Welcome 🙂

[Umniki]

I had the same problem and your method worked fine, but there was one glitch. Code : <a href="{{block.settings.link }}">
</a>
somehow it started affecting all the blocks I place under the "Multicolumn" block.
You can see on the screen.
If you could tell me how to fix it, I would be very happy)

  

  

[Umniki]

Hi @zarri 

I had the same problem and your method worked fine, but there was one glitch. Code : <a href="{{block.settings.link }}">
</a>
Somehow it started affecting all the blocks I place under the "Multicolumn" block.
You can see on the screen.
If you could tell me how to fix it, I would be very happy)

  

[zarri]

Hi, sorry I was away, I just checked your query. Please share your store link, so I can check it. Thanks! 

[benidesign]

Hi @zarri 

I could use some help with a similar issue — trying to make the images in this section clickable. I'm on the Prestige theme.

Thankful for any pointers. 

https://www.mauifruitjewels.com

[zarri]

Hi, sorry I was away, I just checked your query. Actually I don't have access to Prestige theme at the moment. I'll check if I can access, would definitely love to assist you 🙂