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

Solved

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

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
41 3 4

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 5 (5)

zarri
Shopify Partner
41 3 4

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
41 3 4

That's great!
You are Welcome 🙂

Umniki
Visitor
2 0 0

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)

  

Снимок экрана 2023-12-30 в 07.31.36.png

Снимок экрана 2023-12-30 в 07.32.47.png

  

Umniki
Visitor
2 0 0

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)

Снимок экрана 2023-12-30 в 07.31.36.png

Снимок экрана 2023-12-30 в 07.32.47.png