FROM CACHE - en_header
Promotion image
What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Make all images in a multicolumn section clickable

Solved

Make all images in a multicolumn section clickable

StephenM88
Excursionist
14 0 6
‎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,074 Views
0 Likes
Report
Accepted Solution (1)
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
10335 2048 2131
‎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 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

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

Dan-From-Ryviu
Shopify Partner
10335 2048 2131
‎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 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.

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

StephenM88
Excursionist
14 0 6
‎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,054 Views
0 Likes
Report
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
10335 2048 2131
‎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 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.

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

StephenM88
Excursionist
14 0 6
‎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,037 Views
0 Likes
Report
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
10335 2048 2131
‎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 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.

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

StephenM88
Excursionist
14 0 6
‎01-04-2024 11:06 PM

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

1,020 Views
0 Likes
Report
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
10335 2048 2131
‎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 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.

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

StephenM88
Excursionist
14 0 6
‎01-04-2024 11:15 PM

Thank you - perfect!

1,015 Views
1 Like
Report
In response to StephenM88

Dan-From-Ryviu
Shopify Partner
10335 2048 2131
‎01-04-2024 11:16 PM

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.

1,013 Views
0 Likes
Report
In response to StephenM88

Sinageorgeakers
Tourist
7 0 4
‎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?

34 Views
0 Likes
Report

Community Blog Articles

top members.webp
Holiday Cheers to Our Community | November '24

Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...

By JasonH Dec 6, 2024
starting.webp
Dropshipping Viral Products to Sell in 2025

Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...

By JasonH Nov 27, 2024
top members.webp
Shining a spotlight on our top members of October 2024!

Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...

By JasonH Nov 14, 2024
Terms of Service Privacy Policy