How can I make an image clickable in the Multicolumn block?

Store Design
1

Hi Shopify Peeps!

Is it possible to link an image in the Multicolumn block? I’m using the Refresh theme and I want the image to be clickable instead of having to label it. Here’s an example site https://www.candlelandmiami.com/ . (see attached images)

How do I replicate this???

Example
Example2298×740 152 KB

Here is the link to my site.

https://memorable-candles-co.myshopify.com/

Password: peetso

My Site
My Site2844×1118 355 KB

Thank you in advance!

2

Hi @Shayla_Miguel

I would like to give you the solution to your problem. Please follow these steps:

Step 1: From the admin page, Sale channel → Online Store → Edit code

Step 2: Find file base.css and add this code at the bottom

.slider-mobile-gutter .multicolumn-list .multicolumn-list__item .media--transparent.media--square {
  cursor: pointer 
}

Step 3: Find the file theme.liquid(sometimes the name similar like that) and add this code before or before

Case 1 : (If the block you want to add links has the same links)
*Note: replace Your link is here with the link you want, e.g.:

  1. You want to redirect to the collection, just replace “Your link is here” with “/collections”
  2. You want to redirect to a specific collection(similar Luxe Collections), just replace “Your link is here” with “/collections/luxe”
  3. Similar to the product case (e.g., Birthday Princess | Custom Birthday Soy Candle Product), just replace “Your link is here” with “/products/birthday-princess-custom-soy-candle.”

Case 2 (If the block has a different link) :

The code will be changed:
  • The index here is the numerical order of the block. E.g, if you have 2 blocks and want to add different links for 2 blocks, block position 1 will correspond to index = 0 and block position 2 will have index = 1. Similarly, if you have any blocks to add links, just add more code to this code.
if (index == ????) {
       square.addEventListener("click", ()=>{
        window.location = "Your link is here"
       })
}

The index will be (position block- 1) eg block position 1 → index = 0, block position 2 → index = 1, and block position 3 → index = 2…

Eg: if you have the 3 blocks and you want to add to the different link for 3 blocks, the code will be:

I hope that it will work for you.

3

Thank you BSS-Commerce!
It worked. However, is there a way to get the cursor to change to a hand when I rollover the block to indicate that it is linked and clickable?

4

Hi @Shayla_Miguel

I understand you tried our suggestion, and it worked for you. If yes, please mark it as a solution so that other people can refer to it if they get the issue like you.

Also, we will check your new question and let you know once we have a solution.

5

Hi @Shayla_Miguel

I think you can miss step 1 and step 2 which will help you have “the hand” when the cursor is in the block.

The video test when step 1 and 2 are completed: https://www.loom.com/share/1c20351e84ea41d0891fdeb3ca098885

Please try it and I hope that it will work for you.

1 Like
6

Hi @BSS-Commerce ,

You were right- I did miss step 1 and 2 (sorry!). I went back and completed them and it worked for a little while but now it seems to be broken. The blocks are not responding at all. Please help again.

Thank you!

1 Like
7

Hi @Shayla_Miguel

Please give us a little time. We will check it for you and suggest you a solution again.

8

Hi @Shayla_Miguel

You just add more this code in the block of step 3

It looks like the old code, but the new code has differences in this (document.querySelectorAll(“.slider-mobile-gutter .multicolumn-list .multicolumn-list__item .media–transparent.media–portrait”)) and (document.querySelectorAll(“.slider-mobile-gutter .multicolumn-list .multicolumn-list__item .media–transparent.media–square . media–portrait”)). It will point to the element you want to add link

  • Similar to step 1 and 2, you add more of this code in the below of base.css:
.slider-mobile-gutter .multicolumn-list .multicolumn-list__item .media--transparent.media--portrait {
  cursor: pointer 
}

I hope that it will help you solve the issue.

9

Thank you for your reply… Do I remove the old code and add this new code or should I add this new code to the old code?

10

Hi @Shayla_Miguel

You just add the new code we suggested to the old code.

Let me know if it works for you.

11

Hi @BSS-Commerce

The pointer works now, but when I click it does not go to the link. It just stays on the homepage. Please advise. Thank you.

12

Hi @Shayla_Miguel

I think it’s so difficult to show you the guide. The difference versus with code is “document.querySelectorAll(“the div block to chose will be here”),” so I think I can help you if you can’t “queryselectorAll” exactly. If you have any problems with it, you can contact us, and I will give the code for you.

Regards,

13

@BSS-Commerce I am not understanding what you mean about “queryselectorAll”.

I added the new code to the old code like you instructed. When I did that the pointer started to work but the links do not… Are you giving me new instructions?

Thank you for help.

14

Hi @Shayla_Miguel

Can you please let us know where the position can’t redirect to the other URL? I can check it and will suggest you a clear solution.

15

I actually changed the layout so I won’t be using that multicolumn section anymore. Thank you for the follow up.

1 Like