Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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
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: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
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:void(0) {% endif %}">
Hi @Sadea, It has Gallery section so you can add links without need to code
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
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
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: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
I'm sorry, I didn't see that it is not a gallery but rather a CUSTOM CONTENT section with images:
Yes, then follow my given instruction.
@Jasoliya, Thank you very much, this worked for me!
Have a wonderful day.
Also thank you @Dan-From-Ryviu for the help!
Hi @Sadea, i mean add new gallery sections and add images and image links to replace custom content section
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.
Thank you very much!
This worked out for me.
@Jasoliya, can you please add some code so that it opens in A NEW TAB instead of replacing the existing tab? 😉
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:void(0) {% endif %}">
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
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025