Can you customize image hotspots in Shopify?

Adam_Johan
Visitor
2 0 1

I want to have 1 image with say 5 clickagle spots on the image? Like something this allows -> https://www.image-map.net/

I found one app that provides close to what i want -> https://apps.shopify.com/image-hotspots-by-widgetic

But it doesn't allow hyperlinks and the hotspots aren't customizable.

 

Replies 24 (24)

Mircea_Piturca
Shopify Partner
1547 44 345

Hey @Adam_Johan 

I've made a simple Shopify section that allows you to place hotspots/tooltips on a prset image.

You can have a look at https://sections.design/blogs/shopify/product-tooltips, there is a demo there, installation instructions and also a link to Github where you can get the code.

 

The tooltip content is HTML so you can add links, images...

There are some color options in the theme settings.

 

Hope it helps

 

 

 

Finally—Add variant descriptions to your products
aj007
Excursionist
33 0 71

Hi @Mircea_Piturca - your https://sections.design/blogs/shopify/product-tooltips seems to have great promise, but I can't figure out how to configure my image in Shopify.

 

On a Shopify custom page, do I add something like this?

 

<div id="shopify-section-tooltips" class="shopify-section sd-tooltips" label="Main image"><img src="https://cdn.shopify.com/s/files ... .jpg?v=1000099300"></div>

 

 

Or do I configure the .jpg in tooltips.liquid somehow? I've read your instructions and the code a few times, but Shopify is new to me and I can't figure this out 😞

Mircea_Piturca
Shopify Partner
1547 44 345

Hey @aj007 

On a product page you can include the section using:

 

{% section "tooltips" %}

On homepage, you can select Tooltips" section from the Theme Editor 

 

Make sure you add these files to their respective folders: https://github.com/mirceapiturca/Sections/tree/master/Tooltips

See assets and sections folders.

 

After this, go to theme editor. In the section settings you can select the image to use and all the tooltips content.

Hope it helps

 

Finally—Add variant descriptions to your products
aj007
Excursionist
33 0 71

Hi @Mircea_Piturca 

 

I had already copied tooltips.liquid into sections and tooltips.js into assets - and finally found the UI you're referring to in the Home page Theme Editor now that you explained it (probably should note that in your docs as well).

 

But... I'm actually looking to add this to one of my custom pages (i.e. in '....myshopify.com/admin/pages'), where all I'm given is an HTML editor. Do I have to create a whole new page template in order to add {% section "tooltips" %} or something?

 

Sorry, I'm quite new at all this Shopify stuff 😞

 

 

aj007
Excursionist
33 0 71

Hi again @Mircea_Piturca ... think I figured most of it out on my own.

 

One thing I can't figure out - how to change the color of the ordered list's '.tooltip-title' given that my site's background is (almost) black, as you can see in the following screenshot:

 

Screenshot 2019-07-04 at 08.11.00.png

 

 

Other than that this is working great. Thanks so much!

 

PS. for others' benefit, to get this far I...

  • Copied tooltips.liquid into sections and tooltips.js into assets

  • Created new page template called 'page.tooltips.liquid' and pasted this at the bottom:
    {% section "tooltips" %}

  • Changed my custom page to use this new template: 'page.tooltips'

  • Edited my custom page using the Theme Editor (Online Store | Themes | Customize) to add and position the tooltips (and the image itself)

  • Various tweaks to 'tooltips.liquid' to squish things a bit more for small screens
Mircea_Piturca
Shopify Partner
1547 44 345

Hey,

Happy you got it going.

 

Hopefully with the new Shopify Sections changes the process will me more straightforward. 

Good point, I will try to update the install guide.

 

There are no section settings for what particular case but you can solve it with CSS.

Assuming that your "mobile" breakpoint is at 660px, you can use a mediaquerry to make the title white:

 

@media (max-width: 660px) { 
  .tooltip-title {
    color: white;
  }
}

 

Looking forward to see a link when this goes live!

  

Finally—Add variant descriptions to your products
aj007
Excursionist
33 0 71

Thanks @Mircea_Piturca - I tried the following and it worked for both laptop and mobile. Not sure if this is a better or worse solution for tooltip-title than what you propose above (??)

 

I only half know what I'm doing 🙂

 

Wrapped with <span style="color: #E7E7E7;"> ... </span> ... so:

        <span style="color: #E7E7E7;"><strong class="tooltip-title" role="none">{{ block.settings.title }}</strong></span>
Mircea_Piturca
Shopify Partner
1547 44 345

That will work but CSS it's a better option and will give you more flexibility in the future.

Finally—Add variant descriptions to your products
LynetteS
Visitor
1 0 0

Is it possible to add a hyperlink to the popup?

Mircea_Piturca
Shopify Partner
1547 44 345

Hey @LynetteS 

The tooltip supports HTML, you can add the link in there. Something like this:

<a href="some-link-url">Some link</a>

 

Please see the attachment.

Screen Shot 2021-02-10 at 11.21.47.png 

Finally—Add variant descriptions to your products
Danielpochapski
Explorer
60 0 11

Dear  @Mircea_Piturca

 

 

Do the codes still work in the current version of shopify? I'm using the Dawn theme and I've tried to implement the tooltip options you provided. However, the image is not mouse responsive. I implemented the tooltip on my store's homepage.

My website is: smartcasasshop.com.br

 

Please could you tell me what's going on?

hypnotize
Excursionist
12 0 4

Hi.

 

Can I use this code into Dawn theme? Because I can't those options.

thanks

FakhriAshour
Tourist
7 0 1

Hello

 

Thanks for the app, I've just tried it and it works well, but i cant figure out how to make the main image smaller on desktop, it looks huge 

Mircea_Piturca
Shopify Partner
1547 44 345

@FakhriAshour It is a CSS issue. Your theme is interfering with the section code.

Please post here the URL and we will be able to tell what is wrong.

Finally—Add variant descriptions to your products
FakhriAshour
Tourist
7 0 1
Hello, thanks for the the reply

heres's an example page with the image
https://ashourshoes.com/products/depp-cap-toe-oxford
Mircea_Piturca
Shopify Partner
1547 44 345

@FakhriAshour you need to set a max-width on that sections.

Just add this into your theme CSS file:

 

.tooltips-section {
  max-width: 73.8rem;
  margin: 0 auto;
}
Finally—Add variant descriptions to your products
GabbyElan
Visitor
1 0 0

@Mircea_Piturca is it possible to have customers add their own hotspots to the image? And that data be sent to the checkout for us to see their inputs.

Mircea_Piturca
Shopify Partner
1547 44 345

@GabbyElan The section does not provide this functionality but you could modify the code and pass this data as line items to the order.

It can be complicated but possible.

Finally—Add variant descriptions to your products
Chelseacoats
New Member
6 0 0

fixed

taxak
Shopify Partner
10 0 3

how can i use this as hover and hover out?

haschir
Shopify Partner
2 0 0

Hi, I have used your code in dawn theme and the text is not appearing upon clicking. Kindly help

1631374
Visitor
2 0 0

The same thing happened to me. Did you manage to find a solution?

vmms24
Tourist
17 0 0

Hello, im using your tool and i love it, what code i need to change to show a symbol or letter instead of numbers in the spots? thanks you very much

1631374
Visitor
2 0 0

I am also interested in this possibility. Did you manage to figure it out?