Make all images in a multicolumn section clickable

Shopify Discussion

Topic summary

Main issue: Make images in a multicolumn “Find Your Flavor” section (Whisk theme) clickable, not just the text links.

What was tried: Code was added in theme.liquid under the to make images clickable. This initially worked but caused text positioning issues, especially on mobile, with labels overlaying images.

Iterations and fixes: The code was updated to both preserve clickability and move/add links for the text at the top of images, resolving most items. One column (“Sundae Funday”) still had overlay and non-clickable image due to conflicting column-specific code.

Resolution: Removing the conflicting code for that specific column and applying the updated code fixed the issue. The original poster confirmed everything worked.

Notes: Code changes in theme.liquid and section-specific adjustments were central. Screenshots were used to identify the conflicting code.

Status: Resolved for the original poster. A later participant asked where to input the link within the column section to enable image clickability; this question remains unanswered.

Summarized with AI on December 12. AI used: gpt-5.
1

Hi all - I recently redesigned my website using the Whisk theme and am 99% happy, but struggling with a few things. Primarily, I’m looking to make all of the images in a section of multicolumn clickable. Currently, the words beneath each image are clickable links but I would like the picture to function that way as well. Does anyone have any advice for how to solve this in the code?

URL: www.UdderlyNuts.com

Section: “Find Your Flavor” on the home page.

Please let me know what details you need to help!

2

Go to Online store > Themes > Edit code > open theme.liquid file, add this code below under element
3

That worked great! Thank you! Only issue is, it messed up a few of the text positions (see photo)

StephenM88_0-1704425397028.png
StephenM88_0-1704425397028.png1648×826 334 KB

It’s a little worse on mobile, as the texts show up on top of the photos now.

4

Please update the code to this and add links for texts at the top of the images to solve the issue.
5

That worked great to fix “Sample Pack” but for some reason “Sundae Funday” is still not functioning despite the product being linked. It is still showing the text on top and the image for that flavor isn’t clickable. Thanks!

6

Please remove that code of this column to solve it

Screenshot 2024-01-05 at 10.53.08.png
Screenshot 2024-01-05 at 10.53.08.png1278×893 292 KB

7

I see that when I Inspect Element, but how do you delete that from the code?

8

Please update code to this
9

Thank you - perfect!

1 Like
10

Very welcome, @StephenM88

11

Hi! I am also wanting to make my images clickable. But where are you typing in the link originally within the column section to make this happen?