How to add variant text below product image?

Site URL: https://cecilssheshed.squarespace.com/handcrafted-ring-dishes/p/valentines-collection

Hello! In a store page, for a product with variants, I see I can add a variant thumbnail image. When a customer views the product images (gallery), how do I add a title for that variant?

I want the customer to know what variant they are looking at when viewing the image vs having to select the drop downs to trigger the picture to change.
Example: See Red arrow 

Hi. All variant dropdowns on all products, or some specific products?

id like to know this too please for all images.

On 2/27/2021 at 8:03 AM, cat5934 said:

id like to know this too please for all images.

Can you share link to a variant product? Above link doesn't exist.

https://www.cecilssheshed.com/handcrafted-ring-dishes/p/the-easter-collection

I wish I saw this earlier! You rock, thanks @creedon!

Hey @creedon, how do I move the variant text up or down? I want to use your code for every product and when I use it here: https://www.cecilssheshed.com/handmade-gilded-oyster-shell-napkin-rings/p/handmade-gilded-oyster-shell-napkin-rings

see how it's between the image and background?

On mobile it looks fine, just on desktop

3 hours ago, JDisney said:

how do I move the variant text up or down?

You can move it up but not down.

It's going to be a little tricky getting things pixel perfect in that area. I have updated my code post. The badge will not be perfectly in the corner but hopefully will ride pretty close to the bottom. You can change the percentage for bottom or you can even use other units such as px.

You can push it to the right, if you want with the left property I added.

left : 15px;

The reason for the changing position of the banner in different situations is SS, probably, handles the CSS/Javascript a little differently between desktop and mobile.

Let us know how it goes.

Yikes looking at another of your questions I discovered another issue with the code. When you have tall/narrow images mixed with short/wide images in the same gallery the badge is not in a good place for tall/narrow images.  Makes perfect sense now that I see it! 🙂 Doh! I'll need to cogitate on this one a bit.

I'm more than happy with what you provided and can't thank you enough! This is perfect! @creedon

Trying to use this (just what I was looking for) code but not getting anything displayed.

Here's an example page:
https://shop.hopeindustrial.com/products/p/15-panel-mount-monitor

• ajax js added to site header & confirmed
• script added to product page header & confirmed
• variant image assigned to each possible variant (the kid on the bike for testing)

Still nothing.  Any idea?  Maybe does not work with compound/complex variants?

Edit:  I think this has something to do with the text to be displayed ("title" mentioned above) - don't have this on my variants but not seeing where to add it.

Edit Edit:  Its the image title, duh! 

thanks!

djm

Hi @creedon, that's exactly the fix I was looking for too. However, I'm on 7.0.

Do you know if the same/similar thing is possible on 7.0?

Thanks in advance

39 minutes ago, Proudfoot said:

Do you know if the same/similar thing is possible on 7.0?

v7.0 has different templates so I won't know until I can see your site.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks for getting back to me

Here's an example - https://www.karlinanderson.com/freedom/skinny-gem-ring

We've had customers feed back that they'd like to know the names of the gems from the thumbnails, and the number of thumbnails pushes the variant selection menus quite far down the page on mobile.

@Proudfoot

I think I could adapt my code.

However. You would need to edit each of your thumbnail image meta data to change the tile to something human friendly.

This is an example. I'm using the classic editor.

Is that something you are prepared to do? If so I suggest doing it for all the thumbnails for one product (the one you pointed me to).

Then I can test against that product. It would take me several days to get to adapting the code. It's the holidays here and time is tight and fragmented.

Wow, thanks for the offer. If you're prepared to help, I'll certainly edit the image titles!

I'll get on it just now!

44 minutes ago, Proudfoot said:

If you're prepared to help, I'll certainly edit the image titles!

Give me a shout when you are done.

21 minutes ago, creedon said:

Give me a shout when you are done.

That's me done! Thanks again, creedon

@Proudfoot

I have updated my code cited in my March 5th 2021 post.

Let us know how it goes.

Many thanks @creedon, I'll get a chance to try it out next week

On 3/6/2021 at 4:40 AM, creedon said:

Please see Store Product Detail Slideshow Item Badge Add.

Hi @creedon. The link is giving me a 404

@Proudfoot

Please give the link in my post another try. I updated it.

Hi @creedon, I tried adding the code to Design > Custom CSS as per your instructions on GitHub but got syntax errors. I removed the <!-- comment --> and <style> tags as I figured the code would work without them, but I'm stumped with the <script> tag.

So I tried the code in Settings > Advanced > Code Injection (header, and then footer) but it didn't seem to work

Then I tried adding the <style> code to Custom CSS and <script> code to Code Injection without success. 

I've checked the meta data for the images, and that seems to be all there.

Is there something I'm missing?

Thanks in advance for your help

@Proudfoot

You didn't miss anything. My instructions were messed up. My apologies. I've updated them. Please try again removing any previous install attempts.

Let us know how it goes.