Solved

Make all images in a multicolumn section clickable

StephenM88
Excursionist
13 0 6

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!

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7514 1450 1448

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
7514 1450 1448

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

StephenM88
Excursionist
13 0 6

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.

Dan-From-Ryviu
Shopify Partner
7514 1450 1448

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

StephenM88
Excursionist
13 0 6

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
Shopify Partner
7514 1450 1448

Please remove that code of this column to solve it

Screenshot 2024-01-05 at 10.53.08.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

StephenM88
Excursionist
13 0 6

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

Dan-From-Ryviu
Shopify Partner
7514 1450 1448

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

StephenM88
Excursionist
13 0 6

Thank you - perfect!

Dan-From-Ryviu
Shopify Partner
7514 1450 1448

Very welcome, @StephenM88 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now