DreamrW Posted January 18, 2022 Share Posted January 18, 2022 Site URL: https://point-manatee-dntb.squarespace.com/shop/p/wedding-album I'd like to add a lightbox link on the product page as illustrated in the screen shot below. Is this possible? Many thanks in advance Site: https://point-manatee-dntb.squarespace.com/shop/p/wedding-album Password: Albums2021 Link to comment
tuanphan Posted January 19, 2022 Share Posted January 19, 2022 The url doesn't exist To achieve this, my solution is First, install a Lightbox plugin (If you know an another free plugin, you can also use) Next, add a page in Pages > Not Linked (This page will be Lightbox Content) Next, add a Text Link in Additional Info >> Insert Lightbox Link Share link to product where you added text link, we will test Script code to move it to position in screenshot (The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.) DreamrW 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DreamrW Posted January 19, 2022 Author Share Posted January 19, 2022 Smashing, I'll get on this now! Link to comment
DreamrW Posted January 19, 2022 Author Share Posted January 19, 2022 (edited) So I've spent the evening thinking about the ideal solution, and before I purchase the plugin I want to make sure it will resolve another issue. As well as doing the lightbox as outlined above, I also want to include colour swatches on the checkout custom form (lightbox) which will replace the checkboxes. See screen shot attached. Can this be done? A table of some sort is also required I guess, and it would be ideal if only one option is selectable. I've attached a screen shot of the form in it's current (poor) form! Thanks in advance! Edited January 19, 2022 by DreamrW More info Link to comment
tuanphan Posted January 21, 2022 Share Posted January 21, 2022 On 1/20/2022 at 4:47 AM, DreamrW said: So I've spent the evening thinking about the ideal solution, and before I purchase the plugin I want to make sure it will resolve another issue. As well as doing the lightbox as outlined above, I also want to include colour swatches on the checkout custom form (lightbox) which will replace the checkboxes. See screen shot attached. Can this be done? A table of some sort is also required I guess, and it would be ideal if only one option is selectable. I've attached a screen shot of the form in it's current (poor) form! Thanks in advance! I guess this is not possible. You can also post to Squarespace Customization Resource on Facebook, maybe someone has a good suggestion DreamrW 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DreamrW Posted January 24, 2022 Author Share Posted January 24, 2022 I wonder in that case is it possible to create a table in the custom form, to look something like the attached? Link to comment
tuanphan Posted January 25, 2022 Share Posted January 25, 2022 22 hours ago, DreamrW said: I wonder in that case is it possible to create a table in the custom form, to look something like the attached? I think you can add a list of options, then we will try some code to split them to 4 columns & make bold & remove some square to make 3 titles (Linen, Velvet, Suede) DreamrW 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DreamrW Posted February 1, 2022 Author Share Posted February 1, 2022 On 1/19/2022 at 2:34 PM, tuanphan said: The url doesn't exist To achieve this, my solution is First, install a Lightbox plugin (If you know an another free plugin, you can also use) Next, add a page in Pages > Not Linked (This page will be Lightbox Content) Next, add a Text Link in Additional Info >> Insert Lightbox Link Share link to product where you added text link, we will test Script code to move it to position in screenshot (The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.) I've included the lightbox as outlined. Now I'd like to move the lightbox link 'Colour options' to sit beside the 'Cover Material' variant drop down like illustrated on the attached. https://point-manatee-dntb.squarespace.com/shop/p/wedding-albums Albums2021 Link to comment
DreamrW Posted February 1, 2022 Author Share Posted February 1, 2022 31 minutes ago, DreamrW said: I've included the lightbox as outlined. Now I'd like to move the lightbox link 'Colour options' to sit beside the 'Cover Material' variant drop down like illustrated on the attached. https://point-manatee-dntb.squarespace.com/shop/p/wedding-albums Albums2021 I've just tried to create another lightbox link for 'Font options' but the text link option isn't available under Additional Info - have Squarespace changed this within the last 24 hours or am I losing my mind?! Link to comment
tuanphan Posted February 7, 2022 Share Posted February 7, 2022 On 2/1/2022 at 11:28 PM, DreamrW said: I've included the lightbox as outlined. Now I'd like to move the lightbox link 'Colour options' to sit beside the 'Cover Material' variant drop down like illustrated on the attached. https://point-manatee-dntb.squarespace.com/shop/p/wedding-albums Albums2021 Add this code to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('section.ProductItem-additional a.lightbox-link').appendTo('.variant-option:first-child .variant-option-title'); }); </script> <style> .variant-option-title a { float: right; color: blue; text-decoration: underline; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
DreamrW Posted February 7, 2022 Author Share Posted February 7, 2022 47 minutes ago, tuanphan said: Add this code to Settings > Advanced > Code Injection > Footer <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('section.ProductItem-additional a.lightbox-link').appendTo('.variant-option:first-child .variant-option-title'); }); </script> <style> .variant-option-title a { float: right; color: blue; text-decoration: underline; } </style> Incredible, thank you! Can you walk me through how to add another link for Font options - I'm unable to replicate what I did first time round, I can't add a hyperlink into the text box in Advanced Info for some reason! Link to comment
tuanphan Posted February 12, 2022 Share Posted February 12, 2022 On 2/7/2022 at 6:45 PM, DreamrW said: Incredible, thank you! Can you walk me through how to add another link for Font options - I'm unable to replicate what I did first time round, I can't add a hyperlink into the text box in Advanced Info for some reason! Sorry for the delay. Repairing the room Which font option? I don't see font dropdown Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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