Hello,
PFA the below screenshot. I need to hyperlink each icon and redirect each one to a different page. Can someone please help me sort it out!
Thanks in advance. ![]()
website - www.blingfactory.com.au
Hello,
PFA the below screenshot. I need to hyperlink each icon and redirect each one to a different page. Can someone please help me sort it out!
Thanks in advance. ![]()
website - www.blingfactory.com.au
Hi @saachi
You have to add URL option in schema first, after the image,
Then add ahref tag before the img tag
Like this.
If this solution is worked, then please Like this and Mark this as accepted solution!
Laddi
Hello @saachi With no store url, theme name, or code example of the current structure it’s all guesswork.
And it will also really only be sanely doable if each “icon” is an actual separate image and not one big single image.
If they are singular you need to find the template, or setting which the icons are in an wrap each one with anchor tags <img …>.
If it’s one single image you need to use an image map.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image
If you need this customization built then contact me by mail for services.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Contact info in signature.
Hi Paul,
Thanks for the reply!
I mentioned the url but it got pushed at the end after adding the screenshot.
The url is www.blingfactory.com.au
And the current theme is the Dawn.
Each icon is a separate image, so it should be easier I guess?
Hope the info helps ![]()
Hello Dan,
Yes, I saw that. However I do not want the link button visible on the page. I hope that makes sense.
Please add link and button and add this code to Custom CSS of that section to hide button link and make image clickable to open link
.multicolumn-card__info {
position: absolute !important;
top: 0;
bottom: 0;
opacity: 0;
right: 0;
left: 0;
padding: 0;
}
.multicolumn-card__info a.link {
width: 100%;
height: 100%;
margin: 0 !important;
}