How to add multiple hyperlinks to one image in Sense theme?

Store Design
, , , ,
1

Hi,

I hope you are well. I was wondering if anyone knew the code for
‘Adding Multiple Hyperlinks In One Image’ for the sense theme? I found one solution in the community but its for a different theme.

I have tried different things but nothing has worked please help if you can.

Below is an example of what I mean.

Any help appreciated thank you.

2

HI,

Can you share your store url

3

Hi @zaczee ,

Thank you for the reply.

Sure the store URL is below, however I am using a practice version of it which isn’t live to test the code on first.

https://a51e05-2.myshopify.com/

Thanks

4

Hi,

Can you share your storefront password ?

5

Hi @zaczee

unfortunately I am unable to share the password sorry.

6

Hi @kshuvam0011

I am good thank you how are you ? Thank you for your reply.

I have provided the store URL but unfortunately I am unable to provide the password.

URL below;

https://a51e05-2.myshopify.com/

I am familiar with code, I was just trying to look for a code solution that worked with the sense theme.

With regards,

Maria

7

@kshuvam0011

Thank you for the reply, that is useful. I am aware that this could be a solution do you know how I can apply it to my own website on the Sense theme?

I found the below link yesterday

https://community.shopify.com/c/technical-q-a/add-multiple-hyperlinks-in-one-image/m-p/1104283

however I was struggling to find where to apply it for the sense theme.

Thanks

8

@kshuvam0011 it would be great if I could get an answer with instructions or step by step guide just for this element as I am not quite sure how to apply it and so it helps other community users as well please.

I appreciate any help so far.

Thanks you.

9

@zaczee thank you for your reply, it would be great if you could post a step by step solution without having access to the password as this would also be of help for other community users to.

I appreciate any help so far.

Thank you.

10

hello @Printatme it needs to modify the code of theme youc an see similar feature i have created open below URL and go to map section on bottom

https://thatsoundgame.com/pages/wholesale-order-form?preview_theme_id=136871182577

11

Hello @niraj_patel

Thank you for your reply. Yes that is similar to what I am trying to do.

Its the code I am not sure about where to put it for the sense them and what it is.

Thank you

12

hello @Printatme it needs to create a section on sense theme to get this feature done.
it is custom coded on different theme now

13

Hello @niraj_patel

Thank you for your reply. Yes I understand that.

this is the code I think it is

Image Maps

Click on the artistic canvas , the lanscape, or the portrait to go to a new page and read more about the product:

img src=“Banner size-icon images for hyperlink.png” usemap=“image-map”>

I am putting the code after in theme.liquid

anyone any advice please ?

Thank you.

14

hello @Printatme this is code but this is static how you put links dynamically on different places of image?

15

@niraj_patel

thank you for your reply but I am not really sure what you mean?

16

hello @Printatme it means you can check URL shared by me have 5 urls in a single image on small icons

17

Hello @niraj_patel thank you for your reply.

I think I understand you have to have icons within the image. Would you be able to write instructions or the code you used to create the 5 urls on an image ?

Thanks.

18

hi @zaczee

Is there anyway you would be able to help with this ? or would you need the store password ?

Thanks

19

hello @Printatme
please create a new section and put the below code on that to work 5 urls..you can change image + URL + position of URL from css and html

Sales Sheets & RRP Guide

Select your region to download our Sales Sheet

.map_wrapper a{ color:#000000; } .container { max-width: 1340px; margin: auto; padding:50px 20px; } .map_wrapper img { width: 100%; height: 100%; object-fit: cover; } .img_container { position: relative; } .map_mob { display: none; } @media(max-width:768px) { .map_desk { display: none; } .map_mob { display: block; } } .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_64834485-f87d-4564-bbf6-cbb5eaf96703 { position: absolute; display: block !important; width: 70px; height: 75px; left:13%; top:36%; } @media(max-width:768px) { .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_64834485-f87d-4564-bbf6-cbb5eaf96703 { position: absolute; display: block !important; width: 30px; height: 30px; left:11%; top:40%; } } .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_dcb22ee0-0ce7-4789-8b7f-e82c7339e20f { position: absolute; display: block !important; width: 70px; height: 75px; left:44%; top:34%; } @media(max-width:768px) { .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_dcb22ee0-0ce7-4789-8b7f-e82c7339e20f { position: absolute; display: block !important; width: 30px; height: 30px; left:43%; top:41%; } } .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_e53a39f9-e2f5-4d11-8a7d-42a3435b1aeb { position: absolute; display: block !important; width: 70px; height: 75px; left:59%; top:39%; } @media(max-width:768px) { .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_e53a39f9-e2f5-4d11-8a7d-42a3435b1aeb { position: absolute; display: block !important; width: 30px; height: 30px; left:61%; top:44%; } } .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_7c4c3a8e-ee6d-4cd6-99f8-f26e6daf4158 { position: absolute; display: block !important; width: 70px; height: 75px; left:15%; top:48%; } @media(max-width:768px) { .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_7c4c3a8e-ee6d-4cd6-99f8-f26e6daf4158 { position: absolute; display: block !important; width: 30px; height: 30px; left:12%; top:51%; } } .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_23465cf9-0375-4a4e-bd00-aaf72735c77f { position: absolute; display: block !important; width: 70px; height: 75px; left:72%; top:50%; } @media(max-width:768px) { .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_23465cf9-0375-4a4e-bd00-aaf72735c77f { position: absolute; display: block !important; width: 30px; height: 30px; left:76%; top:52%; } } .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_2fcc21a5-7736-45ca-964c-d021fd43aca8 { position: absolute; display: block !important; width: 70px; height: 75px; left:75%; top:69%; } @media(max-width:768px) { .link_template--16801998635249__6cf74929-69bd-432c-8e15-77f561d3c6bb_2fcc21a5-7736-45ca-964c-d021fd43aca8 { position: absolute; display: block !important; width: 30px; height: 30px; left:79%; top:64%; } }
2 Likes
20

@niraj_patel thank you so much for your help with a little tweaking this works.

One more question do you know what to change if I want to move where the hyperlink clicks are ?

Thanks