Jump to content

Commerce site product pop up window from link - how can I do this for a Size Guide?

Recommended Posts

Site URL: https://www.collaclothing.com/

Hi all,

Site link above. Password is colla2022

This is for a client site. My client would like a size guide (PNG file) to be available on each product page. Ultimately, I envision this to be a button on each product page that says 'Size Guide', in which the user would click the link and pop-up window with the size guide would appear. This would be on every single product page.

Is there some code I can add to make this happen for every product page? Or potentially a solution that's different to having the PNG image sitting awkwardly under the product images on each page, which I know I can already do through each product page's additional information?

Appreciate anyone's advice in regards to size guide layout. Thanks! 🙂

Link to comment
  • Replies 3
  • Views 295
  • Created
  • Last Reply

Top Posters In This Topic

On 6/11/2022 at 11:33 AM, hayleyclark103 said:

Hi @tuanphan,

The same size guide on every page. 🙂

2 options to do this

O1. Place Size Guide image under Product Image

Add this code to Last Line in Code Injection > Footer

$(document).ready(function() { 
		$('<img src="https://cdn.pixabay.com/photo/2021/11/30/08/24/strawberries-6834750__480.jpg" class="tp-size-guide"/>').appendTo('.ProductItem-additional');

O2. Use Lightbox

To add Lightbox Feature, first you need to use Lightbox Plugin, then add Size Guide Lightbox Page & Content (Follow Plugin Instructions).

When you've add it, let me know. We will give the code to add Size Guide Link


(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.)


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

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.