How to Add a Link in Image or Text in Shopify - NO APP
HTML-код
- Опубликовано: 30 июн 2024
- Unlock the power of dynamic linking in your Shopify store with our comprehensive tutorial. We'll show you the ins and outs of adding dynamic links to images and text, utilizing Shopify's liquid template language. This step-by-step guide is perfect for Shopify store owners looking to enhance navigation and increase user engagement. Dive into topics like Shopify links, dynamic links, and Shopify tutorials, and master the process of embedding dynamic links efficiently. Whether you're a beginner or a seasoned user, this video will equip you with the skills to improve your site's functionality and aesthetic appeal.
💻 For instructions, check my website: tinyurl.com/clickable-image
👍 Like what you see? Like, share, and subscribe for more Shopify design tutorials and tips!
💬 Have Questions or Feedback? Leave a comment below, or connect with us at made4uo.com using "chat with us"
｡. 🎀 ℂℍ𝔼ℂ𝕂 ❁𝕌ℝ 𝕊ℍ💞ℙ 🎀 .｡
🛒 www.youtube.com/@made4uo445/s...
💵 Start earning and create your Shopify store for FREE today!
tinyurl.com/shopify-free-trial
0:00 Intro
0:16 Step 1: Find where to place the href
3:54 Step 2: Open the Shopify code editor
4:12 Step 3: Locate the file for the html
4:58 Step 4: Fint the html inside the file
5:32 Step 5: Add the href code
6:17 Step 6: Add a dynamic link
#shopify_explained
#shopifyforbeginners
#shopifyhowto
#shopify
#shopifydeveloper
#shopifypartners 
Хобби
![How To Add TABS to the Shopify Product Descriptions? [Works on All Themes Free/Paid] in 2024](http://i.ytimg.com/vi/U5VieH88B_0/mqdefault.jpg)
![How To Add TABS to the Shopify Product Descriptions? [Works on All Themes Free/Paid] in 2024](/img/tr.png)
Worked to perfection! Super helpful for a non-coder like myself, Thank you!!
Thank you so much for this! I've been searching for days trying to find a way to make my images clickable and to point to a specific link per image in the column. You explain and demonstrate this so well. You ROCK!!!!!!
Thank you! One really has to be careful of every single input, but it works! Very clear and well paced. I'm a little less scared of coding now!
Thank you so much! This fixed my problem. I have 0 background in this field but was able to achieve clickable images through your step-by-step instructions. I've spent the last week trying to figure out how to reverse my multicolumn section code after copying & pasting something I thought would work from a shopify forum. Mission accomplished after watching your video!
Thank you!!! Your explanation is FANTASTIC! You are a gifted teacher for coding. I've looked and tried different coding multiple times and nothing worked until your recommendations. You totally rock!
Thank you. This is exactly the solution we were looking for on our site. The way you explained it was clear and incredibly easy to follow (for non-coders).👏
May I just suggest that, for non-coders, you leave a text version of the pieces of code in your video which can be copy-pasted. e.g.
" {"type": "url",
"id": "image_link",
"label": "Image Link"
}, "
Thank you, I followed each and every step and now I have this option on my website.
Thanks a lot, you can't even imagine how much this helped. And the way you explained was absolutely fantastic. Thanks again.
Fantastic video . Thank you !
Thanks for this tutorial!, you really saved me, your explanation was very clear and effective, just perfect
thank you so so so so much i was looking it for more than a week. love you and god bless you
Worked like a charm! Thanks!
Great tutorial, worked perfectly in Refresh theme too.
best tuto ever, thank you very much
Amazing tutorial. Really helpful!
SUPERB, working so nicely!!!! Thank youu
Really informative and easy!!! thanks!!!
It was really necessary videos
Thank you
Thank you for the help!
Thank you so much for this great video!
Awesome. Thank you SO much!
Thank you, It Worked
more more more thanks dear 100% right content
thank you so much !!!
Thanks a million !!!!!!!!!!!!!
Thank you for this tutorial. I followed all the steps the field created in the image editing section. But My images are not clickable, even though I have linked them to the collections.
It works!!!!! Super!!
Thank you!
THANK YOU!
Thank you !!!
thanks so much for this
Hello! Thank you for this useful tutorial. I have a question though: How can I do the same thing in the Footer section? I've got 2 images and I need to link them to 2 different websites. How can I link them? Thank you!
best video ever
Let me try. i was looking for it. get back to you soon
MVP!!!
Hi there, this is so helpful, thank you. Is there a way to turn off the links on multicolumn sections on other pages please? At the moment when they are clicked the page jumps back up to the top of the page. I tried using a # to create a deadlink but this didn't work. Any other suggestions please? Thanks
I added the following code around the "a" tag and it solved the issue - without creating another custom section:
{% if block.settings.image_link != blank %}
{% endif %}
[...]
{% if block.settings.image_link != blank %}
{% endif %}
What if some of my images shouldnt have any links in the multi column sektion? What could i do then? Because not all of my multi columns shouldnt have links.
Hello! This helped a lot when I applied it to the collage images! However, the link for the images have also been applied to another block that's directly under it. How do I fix this?
You have to use liquid unfortunately to apply a dynamic link
Would you mind make a similar tutorial for Slideshows?
Adding href before the breaks the slideshow.
Adding it before
did you ever figure it out i’m still lost on how to do it for slideshows
thanks
I am trying to add the code on Image banner but its working over id="Banner the, and i am unable to add custom links to each banner it same link for all banners
You need to edit the section using liquid code to make it dynamic
Please help me if you can. I made it. but I have 2 section of multi columns. and I added links only on one, second column also clickable to homepage. How to delete it
Will this work with 'collections'?
Hey, awesome tutorial! But could you tell us what to do if you're not inside 'for block in section.block' tab. Our href is above that section. Thank you!
You have to use the section instead and use the section settings schema
@@made4uo Thanks for such quick reply! We've tried that but it's still not working. Just to double check, the code we wrote looks like this now:
And then at the very bottom at schema settings we have this:
"settings": [
{
"type": "url",
"id": "about_link",
"label": "about link"
},
Does this look correct to you in this case? Right now when we go back to Shopify customize page and multicolumn tab the ''about link'' section is not there. Not sure where the mistake is. Sorry for all the silly questions we're the worst at coding..
NEVER MIND! Found the mistake. Thank you so much for this tutorial and your help! You're the best.
ur awesome holy shit
when I inspect element basically all of the text is completely different to what is shown in the video
Hi, thanks for sharing this. Everything works for me, but the only problem is that I use multicolumn sections on other pages and without a link, the images redirect to the same page. Is there a way to have the original multicolumn functions work again? Thanks!
The not so complicated option is to create a new section and copy paste the new edited code. Change the name of the section to "custom multicolumn." You can find the name settings at the schema. Then on your default multicolumn section, revert it back to original code.
I added the following code around the "a" tag and it solved the issue - without creating another custom section:
{% if block.settings.image_link != blank %}
{% endif %}
[...]
{% if block.settings.image_link != blank %}
{% endif %}
master of masters, thanks!
@@04serocool
Thank you for this tutorial. I tried it and the only problem is if I want to use the multi columns for another section and I want to use title and description under the image, all the title and description text is underlined (clickable text). Thanks again
Yes. It would adapt whatever CSS code you have for the tag. You can just add next to "
@@made4uo Thank you so much, it works.
@@made4uo Oups because text decoration is none the font color for H3 Heading (description is fine) and slider -counter for mobile are purple-blue. I checked multicolumn.css
and multicolumn-card__info .link {
text-decoration: none;
font-size: inherit;
margin-top: 1.5rem;
Is it possible to have the theme color like the description paragraph is perfect (theme color)
Thanks again
@@kira1039 yes. just add the code next to the "
How do we add link in image in multicolumn?
in my Liquid the container of the image is not inside the for block section, so it does not recognized the block object
What can I do?
It can be a section object. You then have to use section for the link
How can I use this for a banner image, that I want it to be without texts or buttons?
If you have a Dawn or any free themes, you can remove or hide using the eye icon to remove the text and buttons
I was able to put in the links to the images but once I did that, suddenly the gaps bw images in the mobile increased. Do you know how I can fix this?
You need to add some CSS code
This tutorial was very helpful but the only problem i faced is after inserting the link and saving the page on clicking it is redirecting on the same page. Please help me out with this and thank you!!
You have to assign the link. Please go to your Theme editor
@@made4uo thank you for your assistance it worked!!
@@made4uo same problem still not resolved
@@externalfacts7700 Hi. The problem is not the code. You have to provide the link in the theme editor. Please follow the video
@@made4uo For me also if i provide the link, it still goes to homepage
I am running into a snag here. After completing the steps for a dynamic link and hitting "save", it displays "Invalid JSON in tag 'schema'"
had the same thing it ended up being that I didn't put a coma where the arrow is
{
"type": "url",
"id": "image_link", 🡸
"label": "Image Link"
ide suggest copying the code from the schema that you have and pasting it to one of these websites when you search
JSON Formatter and Validator
@@sheigenjonsiah816 same. The A-HA moment that rocketed through my body when I saw the comma! I was overjoyed. Sorry I didn't update that fix here.
holy fuck this awesome thank u
i have still facing the issue
it works but ruins my formatting please help
it makes a bakground behind
why you talk like cardi
Really good Video, it not just what I needed but it also give me a lot of good ideas and it has a lot of applications to it. 😁