Jump to content

How to add variant text below product image?

Go to solution Solved by creedon,

Recommended Posts

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 

Screen Shot 2021-02-12 at 1.36.29 PM.png

Link to comment
  • 2 weeks later...
  • Solution

Please see Store Product Detail Slideshow Item Badge Add.

I couldn't find a clean way to add the title per your posted image. I ended up adding it as a badge in the lower left corner of the image.

946214541_ScreenShot2021-03-05at8_39_07PM.png.e3031030578f41996769369a60af893c.png

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 weeks later...
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...

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

Edited by djm1
Link to comment
  • 6 months later...
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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.

42916906_ScreenShot2021-12-22at2_10_20PM.thumb.png.6c8e958b613344df45977e70b0cb2d82.png

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 weeks later...

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

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.