html Adding a lightbox link next to prouct variations.

Site URL: http://caterpillar-magnolia-k23t.squarespace.com

I have lightbox installed and I would like to add a link next to the title of a product varient. I need several so would need to adjust the code. 

For example, I have a varient called 'Chain Length' I would like to add a link called 'Chain Length Guide' at the side which would then pop up when pressed.

How do I do this? It needs to be specific to that varient as I have different products on my page.

I have added an image to show what I am referring too. 

Thanks in advance 

What is access password?

Can you share link to product in screenshot?

You can add a text text link with lightbox in additional info, then we can give the code to move it to screenshot position.

Hi thanks for getting back to me. I have attached a print screen of one of the products and the password is WinnerWinner. I only want the code on selected product pages and variations if that is possible as I have various different ones to be added.

Thanks Eden 🙂 

HI,

Can you share link to product in screenshot? We can check easier

Hello sure, this is one of the listings here: https://caterpillar-magnolia-k23t.squarespace.com/shop/p/guinea-pig-necklace

Thanks Eden 

22 hours ago, Eden87 said:

Hello sure, this is one of the listings here: https://caterpillar-magnolia-k23t.squarespace.com/shop/p/guinea-pig-necklace

Thanks Eden 

You mean

Move Chain Length Guide under variant dropdown? In this position?

Yes that is correct. Thanks

On 4/7/2022 at 12:40 AM, Eden87 said:

Yes that is correct. Thanks

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function() { 
		$('.ProductItem-details-excerpt p a[href*="length-guide"]').appendTo('.product-variants');
	});
</script>
<style>
  div.product-variants>a {
    position: absolute;
    top: calc(50% + 50px);
    width: 50%;
    right: 0;
    text-align: right;
}
</style>