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

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

Hi,

Same size guide for all products or different size guides? And which position to place size guide button?

Hi @tuanphan,

The same size guide on every page. 🙂

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

<script>
$(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');
	});
</script>

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

Quote

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