Making multicolumn image clickable in theme Refresh

Store Design
1

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

2

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!

3

forget to attach image

4

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
made4Uo_0-1668805029041.png1887×916 99.3 KB

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
made4Uo_1-1668805165048.png2022×901 219 KB

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;
}
5

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~~!

6

Hi @JINCHENLONG ,

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

7

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..

8

It works!! thank you!!

9

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

10

Hey thank you for the code, works perfectly

11

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”.

password - trepsy

12

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 you

Screenshot 2024-03-27 155115.jpg
Screenshot 2024-03-27 155115.jpg1463×878 188 KB

13

For future Shopify users. Please follow the instructions below instead

This method will only affect the section you are working so you can still use your multi-column for something else.

  1. From Admin page, go to Online Sore > Themes.
  2. Choose the theme you want to edit and click the “Customize” button. This should open the theme editor.
  3. Click your multi-column section. This should open the section settings.
  4. Scroll down and click the “Custom css”
  5. Paste the code below
.multicolumn-card__info {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.multicolumn-card.content-container {
    position: relative;
}