I have a custom liquid and I want to be able to link the image to send it to a url link

[Mitch23]

Hi, 

I have a custom liquid (on my home page) and I want to be able to link the image to send it to a url link when image is clicked. I am no expert with this stuff but if you could please help that would be amazing. Please see custom liquid below:

Custom Liquid: 

<div class="image-container">
<div class="image image1">
<img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Neon_Art_5ca8cd3b-d561-4dbd-9cd6-349ad79c5d69...">
</div>
<div class="image image2">
<img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Bulbed_Sign_2_d34490a4-9449-46f1-99a3-239bdd5...">
</div>
<div class="image image3">
<img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Festoon_Lighting_6b04ccbe-b0e1-4030-9b84-c665...">
</div>
</div>

Custom CSS:

* {
box-sizing: border-box;
}
body {
margin: 0;
}
.image-container {
display: flex;
width: 100%;
}
.image {
width: 50%;
}
.image img {
width: 100%;
}
@media (max-width: 767px) {
.image-container {
flex-direction: column;
align-items: center;
}
.image {
width: 100%;
}
}

[Dan-From-Ryviu · Accepted solution]

Hi @Mitch23 

Please update your HTML code: 

<div class="image-container">
  <div class="image image1">
    <a href="your link of image 1 goes here" >
      <img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Neon_Art_5ca8cd3b-d561-4dbd-9cd6-349ad79c5d69...">
    </a>
  </div>
  <div class="image image2">
    <a href="your link of image 2 goes here" >
      <img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Bulbed_Sign_2_d34490a4-9449-46f1-99a3-239bdd5...">
    </a>
  </div>
  <div class="image image3">
    <a href="your link of image 1 goes here">
      <img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Festoon_Lighting_6b04ccbe-b0e1-4030-9b84-c665...">
    </a>
  </div>
</div>

[niraj_patel]

Hello @Mitch23 
<div class="image-container">
  <div class="image image1">
     <a href="https://your-url-link-1.com">
         <img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Neon_Art_5ca8cd3b-d561-4dbd-9cd6-349ad79c5d69...">
     </a>
   </div>
   <div class="image image2">
      <a href="https://your-url-link-2.com">
        <img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Bulbed_Sign_2_d34490a4-9449-46f1-99a3-239bdd5...">
      </a>
   </div>
   <div class="image image3">
      <a href="https://your-url-link-3.com">
        <img src="https://cdn.shopify.com/s/files/1/0555/7085/8102/files/Festoon_Lighting_6b04ccbe-b0e1-4030-9b84-c665...">
      </a>
    </div>
 </div>
CSS:

 * {
     box-sizing: border-box;
  }
  body {
    margin: 0;
  }
 .image-container {
    display: flex;
    width: 100%;
 }
 .image {
   width: 50%;
 }
 .image img {
   width: 100%;
 }
@media (max-width: 767px) {
  .image-container {
    flex-direction: column;
    align-items: center;
  }
  .image {
    width: 100%;
  }
}

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.