clickable banner images

[paul148]

Hello! I've been reading many posts in the Shopify community about how to create clickable banner images, but I'm not sure where to make the changes or what code to enter. I'd like to make the main image on the landing page and the three images below it clickable, so that no matter where customers click on the images, they will be directed to the product page. I have attached the web page address and password. Please help me.

podwordup.myshopify.com

0809

[saim007]

@paul148 If you have a section for adding this image so there will be an option for linking if not than you have to create an option for adding link in section with the help of schema code. for creating link you have to add below code in schema.

{
"type": "url",
"id": "banner_product_link",
"label": "Add Product Link"
}

and then you have to fetch the link and set over the image for this have to use this code -

<a href="{{ section.settings.banner_product_link }}"><img src="image url"></a>

It is a technical part I hope you will do it!

[paul148]

thank you!

where can I add code in schema? sorry. l do not know well coding

[saim007 · Accepted solution]

You added this section with the help of customization > add section so just get the section name from the customization and then search that section in your code files and then add schema code. if you are non-techy than I should suggest expert for this.

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @paul148 For this issue there are many ways to solve the problem:
1: Please see if there is an option to click to url in your theme editor. If so, you can use it.
2: If there is no such option, it means your theme does not support it, you need to write code for it. You need to use the html/liquid tag in the theme. and add the image design code and the image position in that code will have the tag <a href="/url" /> which will help you link to another url when clicked. Please try this.

You can add code here to test:

<div class="image-container">
  <a href="https://www.example.com/image1" target="_blank">
    <img src="image1.jpg" alt="Image 1">
  </a>
</div>

<div class="image-container">
  <a href="https://www.example.com/image2" target="_blank">
    <img src="image2.jpg" alt="Image 2">
  </a>
</div>

<div class="image-container">
  <a href="https://www.example.com/image3" target="_blank">
    <img src="image3.jpg" alt="Image 3">
  </a>
</div>

Best regards,

Noah | PageFly

[PageFly-Noah]

Hi   @paul148 , Please change link url in tag <a> and change url image, Thank you.

[paul148]

Thank you so much, but l can not solve my proble. 

So I will consult with coding expert.

[saim007]

I will be happy to help you!