Adding Click Link To Custom Content Image

[Sadea]

Hello everyone,

My page url is: minisanitizersprayer.myshopify.com

My theme is: Narrative Theme.

I would like to add links to CUSTOM CONTENT images on my frontpage.

There should be added some code so that i can type in an URL address directly on the Shopify Editor.

I saw a different thread with this problem which was solved, but the code does not work on my theme.

Can anyone help me?

Thank you in advance!

[Jasoliya · Accepted solution]

Hi @Sadea 

Yes you can follow @Dan-From-Ryviu's answer or follow this if want to keep existing section.

1. open custom-content.liquid section and find "type": "image_picker" , it will look like this

2. Now add below code just above " { "type": "image_picker", so it will look like below image 

 {
   "type": "url",
    "id": "img_link",
    "label": "Image link"
},

3. Now find below line of code: 

{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

and add this code just below it 

<a href="{% if block.settings.img_link != blank %} {{ block.settings.img_link }} {% else %} javascript&colon;void(0) {% endif %}">

and add </a> after img tag close. it mean you have to add image tag withing this <a> tag. it will look like below 

Now save it and open theme editor where you can see Link box to add link image wise

Best regard 

[Dan-From-Ryviu]

Hi @Sadea, It has Gallery section so you can add links without need to code

[Jasoliya · Accepted solution]

Hi @Sadea 

Yes you can follow @Dan-From-Ryviu's answer or follow this if want to keep existing section.

1. open custom-content.liquid section and find "type": "image_picker" , it will look like this

2. Now add below code just above " { "type": "image_picker", so it will look like below image 

 {
   "type": "url",
    "id": "img_link",
    "label": "Image link"
},

3. Now find below line of code: 

{% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

and add this code just below it 

<a href="{% if block.settings.img_link != blank %} {{ block.settings.img_link }} {% else %} javascript&colon;void(0) {% endif %}">

and add </a> after img tag close. it mean you have to add image tag withing this <a> tag. it will look like below 

Now save it and open theme editor where you can see Link box to add link image wise

Best regard 

[Sadea]

@Jasoliya @Dan-From-Ryviu 

I'm sorry, I didn't see that it is not a gallery but rather a CUSTOM CONTENT section with images:

[Jasoliya]

  Yes, then follow my given instruction.   

[Sadea]

@Jasoliya, Thank you very much, this worked for me!

Have a wonderful day.

Also thank you @Dan-From-Ryviu for the help!

[Dan-From-Ryviu]

Hi @Sadea, i mean add new gallery sections and add images and image links to replace custom content section

[Sadea]

Thank you very much!

This worked out for me.

[Sadea]

@Jasoliya, can you please add some code so that it opens in A NEW TAB instead of replacing the existing tab? 😉

[Jasoliya · Accepted solution]

add this (target="_blank") attribute in <a> 

so it will look like this 

<a target="_blank" href="{% if block.settings.img_link != blank %} {{ block.settings.img_link }} {% else %} javascript&colon;void(0) {% endif %}">

[ludo_z]

Thanx you very much, it works great. When the link is empty, the cursor changes on mouse on (but OK, no link after), but is it possible to disable this ?

Regards,

Ludovic