Re: Make all images in a multicolumn section clickable

StephenM88 · ‎01-04-2024

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!

Dan-From-Ryviu · ‎01-04-2024

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 and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎01-04-2024

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 and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

StephenM88 · ‎01-04-2024

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

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

Dan-From-Ryviu · ‎01-04-2024

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 and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

StephenM88 · ‎01-04-2024

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!

Dan-From-Ryviu · ‎01-04-2024

Please remove that code of this column to solve it

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

StephenM88 · ‎01-04-2024

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

Dan-From-Ryviu · ‎01-04-2024

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 and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

StephenM88 · ‎01-04-2024

Thank you - perfect!

Dan-From-Ryviu · ‎01-04-2024

Very welcome, @StephenM88

- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Sinageorgeakers · ‎12-07-2024

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?

Re: Make all images in a multicolumn section clickable

Make all images in a multicolumn section clickable

Community Blog Articles