Multicolumn section icon into a button

Store Design
, , ,

Topic summary

A user wants to make multicolumn section icons clickable without displaying button labels, as the labels negatively impact the site’s aesthetic. They prefer clean, clickable icons over visible button text.

Solution Provided:
A CSS code snippet was shared that:

  • Makes the entire multicolumn card clickable
  • Hides the button label by setting opacity to 0
  • Maintains pointer events for functionality
  • Uses absolute positioning to overlay the hidden label

Implementation:
The code should be added to the theme’s CSS file (base.css, style.css, or theme.css).

Issue & Resolution:
Initially, the solution caused multicolumn reviews to stop displaying. The user resolved this by placing the CSS code directly in the section’s CSS box rather than the main stylesheet, then adding a link label.

Follow-up Question:
Another user asked if this approach can be adapted for images that already have buttons, but this remains unanswered.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi!

Store: https://qtupb6-n1.myshopify.com/

Is there a way to make the multicolumn images/icons into a button? I have links to all the columns but I don’t want to add a label as it is an eye sore unfortunately, completely ruins the aesthetic of the site.

I want it to look like this and be clickable:

Screenshot 2024-11-16 100441.png
Screenshot 2024-11-16 100441.png1182×173 36.9 KB

Not like this:

Screenshot 2024-11-16 100941.png
Screenshot 2024-11-16 100941.png1089×280 34.3 KB

I appreciate any help! :sob:

2 Likes
2

Hello @VicBrew1

Can you share the collaborator request code with me so I will check it.

1 Like
3

Yes! Thank you! I will message you directly.

1 Like
4

Hi @VicBrew1

Try this one, this make the logo clickable the label will be hidden.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.multicolumn-card.content-container {
    position: relative; 
}

.multicolumn-card.content-container .multicolumn-card__info {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    text-align: center; 
    width: 80%;
    opacity: 0; 
    pointer-events: all;
}

.multicolumn-card.content-container {
    cursor: pointer;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
5

Thank you so freaking much! :heart_eyes: This worked! How would I do this for the top row? may I repurpose?

6

Issue: It made the multicolumn clickable but now the multicolumn reviews won’t sow. Any ideas for this?

Screenshot 2024-11-16 153804.png
Screenshot 2024-11-16 153804.png1295×640 126 KB

7

FIGURED IT OUT! So I put the code in the CSS box after clicking the section and then added a link label. Works perfectly! THANK YOU!

1 Like
8

Is there a way to do this but for an image that has a button?