Adding Click Link To Custom Content Image

Solved

Adding Click Link To Custom Content Image

Sadea
Excursionist
56 0 5

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!

 

Skærmbillede 2023-04-26 kl. 08.50.36.png

Accepted Solutions (2)
Jasoliya
Shopify Partner
4820 625 1224

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

image pickur.PNG

 

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"
},

link.PNG

 

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 

image tag -codifyinfotech.PNG

 

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

 

Best regard 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Partner
4820 625 1224

This is an 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 %}">

 

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 10 (10)

Dan-From-Ryviu
Shopify Partner
8450 1664 1675

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

Screenshot 2023-04-26 at 14.05.34.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Jasoliya
Shopify Partner
4820 625 1224

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

image pickur.PNG

 

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"
},

link.PNG

 

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 

image tag -codifyinfotech.PNG

 

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

 

Best regard 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Sadea
Excursionist
56 0 5

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

 

Safesprayer_0-1682493609575.png

 

Jasoliya
Shopify Partner
4820 625 1224

  Yes, then follow my given instruction.   

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Sadea
Excursionist
56 0 5

@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
Shopify Partner
8450 1664 1675

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

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Sadea
Excursionist
56 0 5

Thank you very much!

 

This worked out for me.

Sadea
Excursionist
56 0 5

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

Jasoliya
Shopify Partner
4820 625 1224

This is an 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 %}">

 

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ludo_z
Visitor
1 0 0

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