Solved

Adding Click Link To Custom Content Image

Safesprayer
Excursionist
55 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 Expert
4807 621 1213

This is an accepted solution.

Hi @Safesprayer 

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
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4807 621 1213

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
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
6894 1302 1329

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

Screenshot 2023-04-26 at 14.05.34.png

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Jasoliya
Shopify Expert
4807 621 1213

This is an accepted solution.

Hi @Safesprayer 

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
Want to get Free review and advice for sale on store ?? just text me here
Safesprayer
Excursionist
55 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 Expert
4807 621 1213

  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
Want to get Free review and advice for sale on store ?? just text me here
Safesprayer
Excursionist
55 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
6894 1302 1329

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Safesprayer
Excursionist
55 0 5

Thank you very much!

 

This worked out for me.

Safesprayer
Excursionist
55 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 Expert
4807 621 1213

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