Solved

clickable banner images

paul148
Shopify Partner
3 0 0

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

Accepted Solution (1)
saim007
Shopify Partner
496 64 82

This is an 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.

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂

View solution in original post

Replies 7 (7)

saim007
Shopify Partner
496 64 82

@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!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂
paul148
Shopify Partner
3 0 0

thank you!

 

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

saim007
Shopify Partner
496 64 82

This is an 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.

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂

PageFly-Noah
Astronaut
1107 199 218

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.

PageFlyNoah_0-1715584849151.png

PageFlyNoah_1-1715584908715.png

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Noah
Astronaut
1107 199 218

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

paul148
Shopify Partner
3 0 0

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

 

So I will consult with coding expert.

saim007
Shopify Partner
496 64 82

I will be happy to help you!

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂