Jump to content

Adding a lightbox link next to prouct variations.

Recommended Posts

Posted

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 

1021605494_Screenshot2022-01-18at18_01_09.thumb.png.e07d9781b9be1fb4439dafa9692588e3.png

  • Replies 7
  • Views 302
  • Created
  • Last Reply

Top Posters In This Topic

Posted

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 🙂 

Size Guide.png

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

Size Guide.png

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

Posted
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>

image.thumb.png.bef1c0ee0f95b3645468b76c10162aea.png

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

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.