How to make entire column clickable for Multicolumns (Refresh theme)

Shopify Discussion

Topic summary

Goal: Make each Multicolumn item in Shopify’s free Refresh theme clickable (not just the image/label), and add a hover color change.

Clickable column solution:

  • Add to Assets > base.css:
    .multicolumn-card.content-container { position: relative; }
    .multicolumn-card a.link.animate-arrow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; margin-top: 0; }
  • This uses the section’s Link field; it overlays the link across the entire card.
  • If it doesn’t work, ensure the original multicolumn.liquid is restored (a prior modification prevented it). After reverting, it worked.

Open/unclear point:

  • The “Link label” text didn’t populate for the user while using the Heading as the link; no confirmation if this is expected behavior.

Hover effect solution:

  • In the Multicolumn section’s Custom CSS, add:
    .multicolumn-list__item:hover .multicolumn-card { background: red; }
  • This changes the card background color on hover.

Status: Resolved. Entire columns are clickable via CSS overlay; hover background change added. One minor question about the Link label field behavior remains unanswered.

Summarized with AI on January 25. AI used: gpt-5.
1

I’m using the free Refresh theme and I would like each column (the whole column) clickable when using Multicolumns. I’ve found code where it makes the image clickable by whatever you choose as your link. However, I would like the whole column clickable and not just the image and/or label.

I would like to still use the link selection to make the entire column clickable. How can I accomplish this? Thanks!

1 Like
2

Hi @Inkhead

This is doable. Please follow the instructions below

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
.multicolumn-card.content-container {
    position: relative;
}

.multicolumn-card a.link.animate-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin-top: 0;
}
1 Like
3

Hi Made4Uo! I tried this code and there was no change.

4

Hi,

Please provide your website? Your base.css is probably corrupted

5

Apologies that did work. However I had to input a Link Label in the text field. I had that removed before and was only using the Heading. This was because I was using a modified multicolumn.liquid file.

I put the original in place now and it works but the Link label text field does not populate. I don’t need it to since I’m using the Heading instead but just wondering if that is normal.

6

One last question.. Can I add a hover color change?

7

Please provide your website so we can provide an appropriate code for you

8

Made4Uo helped me resolve this issue. Here is the solution:

Place this in the Custom CSS when you are in the multicolumn settings:

.multicolumn-list__item:hover .multicolumn-card {
background: red;
}

Thank you Made4Uo!

2 Likes