Include lightbox beside Product option

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

The url doesn't exist

To achieve this, my solution is

1. First, install a Lightbox plugin (If you know an another free plugin, you can also use)
2. Next, add a page in Pages > Not Linked (This page will be Lightbox Content)
3. Next, add a Text Link in Additional Info >> Insert Lightbox Link
4. 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.)

Smashing, I'll get on this now! 

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!

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

I wonder in that case is it possible to create a table in the custom form, to look something like the attached? 

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)

On 1/19/2022 at 2:34 PM, tuanphan said:

The url doesn't exist

To achieve this, my solution is

1. First, install a Lightbox plugin (If you know an another free plugin, you can also use)
2. Next, add a page in Pages > Not Linked (This page will be Lightbox Content)
3. Next, add a Text Link in Additional Info >> Insert Lightbox Link
4. 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

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?! 

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>

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! 

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