Making images clickable

Solved
MorganaBevan
Visitor
2 0 0

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? 

Accepted Solution (1)
zarri
Shopify Partner
16 1 3

This is an 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;

Screenshot_50.png

 


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>

 

step 2 (A).png

 

step 2 (B).png

 


Good Luck 🙂

View solution in original post

Replies 3 (3)
zarri
Shopify Partner
16 1 3

This is an 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;

Screenshot_50.png

 


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>

 

step 2 (A).png

 

step 2 (B).png

 


Good Luck 🙂

MorganaBevan
Visitor
2 0 0

That worked perfectly. Thank you.

zarri
Shopify Partner
16 1 3

That's great!
You are Welcome 🙂