Solved

Make Entire Row in Multi-Row Section Clickable

StuKellyMotorsp
Visitor
3 0 0

Hello I am trying to make each individual row in a multi-row section clickable. Each row will go to a new link. 
See picture for example of the area I want clickable. 

Screenshot 2024-04-17 122208clickable.png


Any help would be appreciated, thanks! 


https://562e00-3.myshopify.com/pages/services

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2122 607 471

This is an accepted solution.

Hey @StuKellyMotorsp,

 

I made the button overlay the entire section and made it invisible, so you can click anywhere on that row section and you are technically clicking the button, but you just can't see it. As a user, you shouldn't see any difference.

 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.image-with-text {
    position: relative !important;
}

.image-with-text__content,
.image-with-text .grid__item {
    position: unset !important;
}

.image-with-text__content .image-with-text__text+.button {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    top: -33px !important;
    z-index: 2 !important;
    opacity: 0 !important;
    left: 0 !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713373580801.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
2122 607 471

Hey @StuKellyMotorsp,

 

Can you add three buttons there with the links it should go to? I could do something with that. 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
StuKellyMotorsp
Visitor
3 0 0

I added the buttons, and linked each to the corresponding pages. Let me know if that helps. 

ThePrimeWeb
Shopify Partner
2122 607 471

This is an accepted solution.

Hey @StuKellyMotorsp,

 

I made the button overlay the entire section and made it invisible, so you can click anywhere on that row section and you are technically clicking the button, but you just can't see it. As a user, you shouldn't see any difference.

 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.image-with-text {
    position: relative !important;
}

.image-with-text__content,
.image-with-text .grid__item {
    position: unset !important;
}

.image-with-text__content .image-with-text__text+.button {
    position: absolute !important;
    height: 100% !important;
    width: 100% !important;
    top: -33px !important;
    z-index: 2 !important;
    opacity: 0 !important;
    left: 0 !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713373580801.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
StuKellyMotorsp
Visitor
3 0 0

Works fantastic, thank you very much!!