How can I hyperlink individual icons on my website?

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. :grinning_face_with_smiling_eyes:

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

Hi @saachi

It has option to add button link in Column of that Multicolumn section

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