Clickable Multicolumn Image in Refresh Theme without hiding Link Label

Store Design
, ,
1

I followed the instructions found here

It almost solved my problem but if you look at the last response on the thread by @Mariamendez, it creates a space below the image.

This space is simply the link label hidden, but it ruins the proportions of the website.

Please help.

1 Like
2

Hey @CarGuruGeek98

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi @CarGuruGeek98

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

4

https://874f23-3c.myshopify.com/

pass: theush

1 Like
5

Hey @CarGuruGeek98

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1728674573572.png
Moeed_0-1728674573572.png1407Ă—535 238 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

It did not work. When you asked for the website, I had just reverted it back to original code. I have updated it to the correct code now. Can you check again?

7

https://874f23-3c.myshopify.com/

pass: theush

8

Thanks for the info, try this one.

  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:
.section-template--18316348326117__multicolumn_HCgtHQ-padding .multicolumn-card__info {
    display: none !important;
}

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

9

It did not work. The image is no longer clickable once I place that code.

10

Hi @CarGuruGeek98

Please follow the steps below. 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;
}
1 Like
11

That worked perfectly, thank you!

12

Nice!