How to make the multicolumn images clickable without text?

Store Design

Topic summary

A user wants to make multicolumn section images clickable in Shopify without displaying text labels.

Proposed Solution:
Add link text to images as normal, then use CSS to hide the text while creating an invisible clickable overlay. The CSS includes hover effects and an absolute-positioned pseudo-element covering the entire image area.

Implementation Challenge:
Initially recommended to add CSS via Theme Settings > Custom CSS to preserve theme update compatibility. However, the user encountered a publishing error: “Online editor session can’t be published” when attempting to save the CSS code in this location.

Working Solution:
Add a “Custom Liquid” section and paste the CSS code wrapped in <style> tags. This workaround successfully resolved the issue and made the images clickable without visible text.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

We want to use the multicolumn images only but want to make the images clickable without the need to add text. How can we make that happen?

2

@Rose121994 - you can add the text for all images, then using css hack we can overlap link on all the images and hide the text.

3

Well, while editing theme code may indeed be cleaner, unfortunately it will negatively affect your ease of theme updates.

So, no, editing theme code is not recommended.

Instead, output the link element with text as intended originally, then add CSS to hide this text and add an overlay.

Note that CSS should be added into “Custom CSS” setting under “Theme settings” – this will simplify future theme updates.

Say, for Dawn, the CSS code can be

.multicolumn-card:hover {
  opacity: 0.7;
}

.multicolumn-card .link {
  display: block;
  height: 0;
  overflow: hidden;
}

.multicolumn-card .link:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Clickable Multicolumn Images [Trade theme]
4

It didn’t work, it will not let me save the changes.

Screen Shot 2025-06-14 at 4.38.38 PM.png
Screen Shot 2025-06-14 at 4.38.38 PM.png1706×182 105 KB

5

There was some dubious change in Customizer recently which made some of the codes unaccaptable (for no reason).

You can try Theme settings => Custom CSS.

6

Unfortunately, the saving of the code in the theme settings> under custom css is what is causing the error and giving the “Online editor session can’t be published” message. I will not able to save the changes at all. Is there an additional solution?

7

Pity.

Yes, there is another option – add a “Custom liquid” section and paste the code from above, wrapped with …

8

it worked thank you so much.