How to make multicolumn images clickable in Reformation theme?

[jkjcreative]

Hi,

I'm trying to make each image in my multicolumn section clickable to a link, in Reformation default theme. 

Note, my code currently doesn't have a base.css file.

Currently, when I input a link in the 'link' section, it only makes the 'link label' clickable but I don't want a link label, just the image linked. 

Thanks!

[Dan-From-Ryviu]

Hi @jkjcreative 

Please click the link label and then send me your store URL so I can give you the code to make your section clickable without displaying link label.

[jkjcreative]

Hi @Dan-From-Ryviu 

Here's the link label url https://admin.shopify.com/store/89896a-d5/themes/142704279781/editor?section=template--1798864997603...

and my store url https://89896a-d5.myshopify.com/ 

Thank you!

[Huptech-Web]

Hi @jkjcreative , to accomplish this, you can use an anchor tag before the multicolumn__image div in your code. Simply place the anchor tag before the multicolumn__image div and close the anchor tag after the div is closed. Also, I have removed the link label from the backend as per your requirement, and please ensure that you have used a for loop for that.

See the code provided below.

<a href="{{ block.settings.link}}">
  <figure class="multicolumn__image" style="width: 100px;">
    <div class="multicolumn__image--inner aspect-ratio aspect-ratio--square" style="--ratio-percent: 100%;">
      <img
        class="retina_size lazyautosizes lazyloaded"
        width="100"
        height="100"
        data-sizes="auto"
        src="//89896a-d5.myshopify.com/cdn/shop/files/fresh_spring_icon_226841c5-09c5-4c5d-ab1d-beb482b1c80b_20x_crop_center.png?v=1721261820"
        data-srcset="//89896a-d5.myshopify.com/cdn/shop/files/fresh_spring_icon_226841c5-09c5-4c5d-ab1d-beb482b1c80b_407x_crop_center.png?v=1721261820 407w,//89896a-d5.myshopify.com/cdn/shop/files/fresh_spring_icon_226841c5-09c5-4c5d-ab1d-beb482b1c80b_814x_crop_center.png?v=1721261820 814w"
        fetchpriority="auto"
        alt=""
        style="object-position: 50.0% 50.0%;"
        sizes="100px"
        srcset="//89896a-d5.myshopify.com/cdn/shop/files/fresh_spring_icon_226841c5-09c5-4c5d-ab1d-beb482b1c80b_407x_crop_center.png?v=1721261820 407w,//89896a-d5.myshopify.com/cdn/shop/files/fresh_spring_icon_226841c5-09c5-4c5d-ab1d-beb482b1c80b_814x_crop_center.png?v=1721261820 814w"
      >
    </div>
  </figure>
</a>

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

[jkjcreative]

I haven't got to try this yet, but I will let you know ASAP. Thanks!