Making multicolumn image clickable in theme Refresh

Solved

Making multicolumn image clickable in theme Refresh

JINCHENLONG
Excursionist
12 0 4

Hello! I tried to make the multicolumn image clickable in the theme refresh by using some code from the forum, however that code solve the clickable problem but cannot arrange the size of the column, I only want to add the clickable feature in the multicolumn, how could I make this feature? thanks!

Here's my website: skymobilebk.com

Accepted Solution (1)
made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @JINCHENLONG,

 

Can you add a Link Label?  Do not worry, it will not show

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 11 (11)

JINCHENLONG
Excursionist
12 0 4

Also what's weird is after I change back to the original side, the multicolumn shows 3 per row even I set it to 4.

Anyone who might know how I really appreciate your help, thanks!

JINCHENLONG
Excursionist
12 0 4

forget to attach image

made4Uo
Shopify Partner
3840 716 1177

Hi @JINCHENLONG,

 

Make sure you go back to Original code.

 

To revert Multicolumn to Original code:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, open the multicolumn.liquid
3. Click Current, then Original.  Make sure to click SAVE

made4Uo_0-1668805029041.png

 

 

To make the multicolumn clickable, just add the code below. You are still using the link provided in the multicolumn at your Theme Customization (see image)

made4Uo_1-1668805165048.png

 

To make the Multicolumn Clickable:

1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Asset folder, open the base.css
3. Paste the code below at the very bottom of the file.

 

a.link.animate-arrow:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

a.link.animate-arrow {
    opacity: 0;
    height: 0;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
JINCHENLONG
Excursionist
12 0 4

Hi! thank you for your time! now the column row is solved but as I tried your method it doesn't seem to work, I put the screenshot in the attachment, it's the right way to add code right? thank you for your patience~~!

made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @JINCHENLONG,

 

Can you add a Link Label?  Do not worry, it will not show

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
JINCHENLONG
Excursionist
12 0 4

ok, I add a link lable on the column setting with the website address, on the front page it turn out the picture is unclickable..am I missing something..

JINCHENLONG
Excursionist
12 0 4

It works!! thank you!!

mjdubarr
Pathfinder
109 0 29

It worked when I added the link to "link label" and underneath it where it says "link". Thank you!

toolmonger
Visitor
1 0 0

Hello, I tried this but it made my entire site only go to the sharpening page. What I want to do is to be able to click on the image that looks like a hand and have it take you to the "sharpening page". 

 

festoolsharpening.com

password - trepsy

cya840
Visitor
1 0 0

Hey thank you for the code, works perfectly

 

Mariamenendez
Shopify Partner
1 0 0

Hey thank you for the code it works!! But does anyone know how to get rid of that link label space below the image? When I just add the link on ''link'' the image is not clickable but when i add the link on link label the image is clickable but I'm not sure if it's even possible to remove that space. Thank youScreenshot 2024-03-27 155115.jpg