Guest Posted February 12, 2021 Share Posted February 12, 2021 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 Link to comment
tuanphan Posted February 16, 2021 Share Posted February 16, 2021 Hi. All variant dropdowns on all products, or some specific products? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
cat5934 Posted February 27, 2021 Share Posted February 27, 2021 id like to know this too please for all images. Link to comment
tuanphan Posted March 4, 2021 Share Posted March 4, 2021 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Guest Posted March 5, 2021 Share Posted March 5, 2021 https://www.cecilssheshed.com/handcrafted-ring-dishes/p/the-easter-collection Link to comment
Solution creedon Posted March 6, 2021 Solution Share Posted March 6, 2021 (edited) 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. Let us know how it goes. Edited December 29, 2021 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
Guest Posted March 22, 2021 Share Posted March 22, 2021 I wish I saw this earlier! You rock, thanks @creedon! Link to comment
Guest Posted March 22, 2021 Share Posted March 22, 2021 (edited) 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 Edited March 22, 2021 by JDisney Link to comment
creedon Posted March 23, 2021 Share Posted March 23, 2021 (edited) 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 March 23, 2021 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
creedon Posted March 23, 2021 Share Posted March 23, 2021 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. tuanphan 1 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
Guest Posted March 28, 2021 Share Posted March 28, 2021 (edited) I'm more than happy with what you provided and can't thank you enough! This is perfect! @creedon Edited March 28, 2021 by JDisney Link to comment
djm1 Posted May 24, 2021 Share Posted May 24, 2021 (edited) 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 May 24, 2021 by djm1 Link to comment
Proudfoot Posted December 22, 2021 Share Posted December 22, 2021 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 Link to comment
creedon Posted December 22, 2021 Share Posted December 22, 2021 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 Posted December 22, 2021 Share Posted December 22, 2021 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. Link to comment
creedon Posted December 22, 2021 Share Posted December 22, 2021 (edited) @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. Edited December 22, 2021 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
Proudfoot Posted December 22, 2021 Share Posted December 22, 2021 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! Link to comment
creedon Posted December 22, 2021 Share Posted December 22, 2021 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. 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 Posted December 22, 2021 Share Posted December 22, 2021 21 minutes ago, creedon said: Give me a shout when you are done. That's me done! Thanks again, creedon creedon 1 Link to comment
creedon Posted December 23, 2021 Share Posted December 23, 2021 (edited) @Proudfoot I have updated my code cited in my March 5th 2021 post. Let us know how it goes. Edited December 23, 2021 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
Proudfoot Posted December 24, 2021 Share Posted December 24, 2021 Many thanks @creedon, I'll get a chance to try it out next week creedon 1 Link to comment
Proudfoot Posted December 29, 2021 Share Posted December 29, 2021 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 Link to comment
creedon Posted December 29, 2021 Share Posted December 29, 2021 @Proudfoot Please give the link in my post another try. I updated it. 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 Posted January 21, 2022 Share Posted January 21, 2022 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
creedon Posted January 21, 2022 Share Posted January 21, 2022 @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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment