Adding Click Link To Custom Content Image

Solved
Safesprayer
Excursionist
54 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
4753 617 1199

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Expert
4753 617 1199

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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
5502 1008 1035

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Jasoliya
Shopify Expert
4753 617 1199

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Safesprayer
Excursionist
54 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
4753 617 1199

  Yes, then follow my given instruction.   

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Safesprayer
Excursionist
54 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
5502 1008 1035

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

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Safesprayer
Excursionist
54 0 5

Thank you very much!

 

This worked out for me.

Safesprayer
Excursionist
54 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
4753 617 1199

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 are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
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