FROM CACHE - en_header
Promotion image

Make all images in a multicolumn section clickable

Solved

Make all images in a multicolumn section clickable

StephenM88
Shopify Partner
17 0 8
‎01-04-2024 10:03 PM

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!

Labels:
1,928 Views
0 Likes
Report
Accepted Solution (1)
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
11737 2301 2485
‎01-04-2024 11:10 PM

This is an accepted solution.

Please update code to this 

<style>
.multicolumn__content {
position: relative;
margin-bottom: 24px
}
.multicolumn__content .rte p {
position: unset !important;
}
.multicolumn__content .rte,
.multicolumn__content .rte a {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.multicolumn__content .rte a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -32px;
}
</style>

 

 

 

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

1,871 Views
0 Likes
Report
Replies 10 (10)

Dan-From-Ryviu
Shopify Partner
11737 2301 2485
‎01-04-2024 10:13 PM

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

<style>
.multicolumn__content {
position: relative;
}
.multicolumn__content .rte,
.multicolumn__content .rte a {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.multicolumn__content .rte a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -16px;
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,918 Views
0 Likes
Report
In response to Dan-From-Ryviu

StephenM88
Shopify Partner
17 0 8
‎01-04-2024 10:30 PM

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

StephenM88_0-1704425397028.png

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

1,908 Views
0 Likes
Report
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
11737 2301 2485
‎01-04-2024 10:36 PM

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

<style>
.multicolumn__content {
position: relative;
margin-bottom: 24px
}
.multicolumn__content .rte,
.multicolumn__content .rte a {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.multicolumn__content .rte a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -32px;
}
</style>

 

 

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,899 Views
0 Likes
Report
In response to Dan-From-Ryviu

StephenM88
Shopify Partner
17 0 8
‎01-04-2024 10:49 PM

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!

1,891 Views
0 Likes
Report
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
11737 2301 2485
‎01-04-2024 10:54 PM

Please remove that code of this column to solve it

Screenshot 2024-01-05 at 10.53.08.png

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,887 Views
0 Likes
Report
In response to Dan-From-Ryviu

StephenM88
Shopify Partner
17 0 8
‎01-04-2024 11:06 PM

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

1,874 Views
0 Likes
Report
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
11737 2301 2485
‎01-04-2024 11:10 PM

This is an accepted solution.

Please update code to this 

<style>
.multicolumn__content {
position: relative;
margin-bottom: 24px
}
.multicolumn__content .rte p {
position: unset !important;
}
.multicolumn__content .rte,
.multicolumn__content .rte a {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.multicolumn__content .rte a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -32px;
}
</style>

 

 

 

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,872 Views
0 Likes
Report
In response to Dan-From-Ryviu

StephenM88
Shopify Partner
17 0 8
‎01-04-2024 11:15 PM

Thank you - perfect!

1,869 Views
1 Like
Report
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
11737 2301 2485
‎01-04-2024 11:16 PM

Very welcome, @StephenM88 

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,867 Views
0 Likes
Report
In response to StephenM88

Sinageorgeakers
Tourist
8 0 5
‎12-07-2024 04:47 PM

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?

888 Views
0 Likes
Report

Community Blog Articles

441285313-63bbef53-3fbe-4e8b-a706-5b37afa90468.png
Automate store operations with Shopify Academy & Coding with Jan

Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...

By Jacqui May 7, 2025
April.jpg
Highlighting our Members of April '25

Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...

By JasonH May 2, 2025
page_thumb_partner.jpg
Enhance a brand’s visibility with Shopify Academy's new SEO resources

Discover opportunities to improve SEO with new guidance available from Shopify’s growth...

By Jacqui May 1, 2025
Terms of Service Privacy Policy