Text Link for Size Guide to open a Lightbox

Hello!  I've already tried to research this topic on Google and through the Squarespace Forum...I haven't found the exact solution I'm looking for so initiating a new post.

I'm doing a website for a clothing company and they want their size guide to be available in the product page.  They want people to be able to click on Size Guide (text link) and it open a lightbox to each products size chart.

How do I do this without using a plugin?  Or if I have to use a plugin, are there any that are free?

Thank you!
Blayne

1 hour ago, BlayneG87 said:

Hello!  I've already tried to research this topic on Google and through the Squarespace Forum...I haven't found the exact solution I'm looking for so initiating a new post.

I'm doing a website for a clothing company and they want their size guide to be available in the product page.  They want people to be able to click on Size Guide (text link) and it open a lightbox to each products size chart.

How do I do this without using a plugin?  Or if I have to use a plugin, are there any that are free?

Thank you!
Blayne

A paid plugin may have everything you need to set up everything quickly, but incase you want a simply free alternative, follow these steps

1. Upload the size chart image to Asset library

2. Grab the image URL and replace it in the given code below

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/shoelace.js"></script>

<sl-dialog label="Size Chart" class="size-chart-dialog" style="--width: 50vw; --sl-panel-background-color: #fff; --sl-overlay-background-color: #fff9; --sl-spacing-large: 1em;">
  <img src="https://bodyandsoul.mu/media/size_chart/menwebcom.jpg"/>
</sl-dialog>

<a class="size-chart-trigger">📐 Size chart</a>

<script>
  const dialog = document.querySelector('.size-chart-dialog');
  const openButton = document.querySelector('.size-chart-trigger');
  const closeButton = dialog.querySelector('sl-button[slot="footer"]');

  openButton.addEventListener('click', () => dialog.show());
  closeButton.addEventListener('click', () => dialog.hide());
</script>

3. Replace the image URL with your actual size chart (place it inside double quotes)

Your size chart will be like, the dialog feature from Shoelace https://shoelace.style/components/dialog/

Hi Beyondspace - thanks for these instructions.  I'm trying it at the moment.  Where are you adding the code?

Thanks!

2 minutes ago, BlayneG87 said:

Hi Beyondspace - thanks for these instructions.  I'm trying it at the moment.  Where are you adding the code?

Thanks!

 

Open a code block and insert it

Thank you, it is working but it is hiding behind my store image for some reason.  Is there any way to also change the text size of "size guide" to match my other Text?

On 8/28/2024 at 11:42 PM, BlayneG87 said:

Thank you, it is working but it is hiding behind my store image for some reason.  Is there any way to also change the text size of "size guide" to match my other Text?

Can you share link to this product? We can check easier

Hello, here is the link:

https://mouliie.squarespace.com/config/pages/64b8aa863dc9d347ab997165

Thanks!