Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
size-chart.liquid snippet
{% if template contains 'product' %}
{% assign size_options = 'size,taille' | split: ',' %}
{% assign size_chart_text_link = 'Size chart' %}
{% assign has_size = false %}
{% assign size_index = 0 %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if has_size == false and size_options contains downcased_option %}
{% assign has_size = true %}
{% assign size_index = forloop.index0 %}
{% endif %}
{% endfor %}
{% if has_size %}
* $ lightbox_me
* By: Buck Wilson
* Version : 2.3
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* See the License for the specific language governing permissions and
* limitations under the License.
(function(a){a.fn.lightbox_me=function(b){return this.each(function(){var e=a.extend({},a.fn.lightbox_me.defaults,b),l=a(),k=a(this),m=a('<iframe id="foo" style="z-index: '+(e.zIndex+1)+';border: none; margin: 0; padding: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; filter: mask();"/>'),g=/MSIE 6/.test(navigator.userAgent)&&!window.opera;if(e.showOverlay){var f=a(".js_lb_overlay:visible");if(f.length>0){l=a('<div class="lb_overlay_clear js_lb_overlay"/>')}else{l=a('<div class="'+e.classPrefix+'_overlay js_lb_overlay"/>')}}if(g){var d=/^https/i.test(window.location.href||"")?"javascript:false":"about:blank";m.attr("src",d);a("body").append(m)}a("body").append(k.hide()).append(l);if(e.showOverlay){h();l.css({position:"absolute",width:"100%",top:0,left:0,right:0,bottom:0,zIndex:(e.zIndex+2),display:"none"});if(!l.hasClass("lb_overlay_clear")){l.css(e.overlayCSS)}}if(e.showOverlay){l.fadeIn(e.overlaySpeed,function(){c();k[e.appearEffect](e.lightboxSpeed,function(){h();c();e.onLoad()})})}else{c();k[e.appearEffect](e.lightboxSpeed,function(){e.onLoad()})}if(e.parentLightbox){e.parentLightbox.fadeOut(200)}a(window).resize(h).resize(c).scroll(c).keyup(j);if(e.closeClick){{i();n.preventDefault})}k.delegate(e.closeSelector,"click",function(n){i();n.preventDefault()});k.bind("close",i);k.bind("reposition",c);function i(){var n=k[0].style;if(e.destroyOnClose){k.add(l).remove()}else{k.add(l).hide()}if(e.parentLightbox){e.parentLightbox.fadeIn(200)}m.remove();k.undelegate(e.closeSelector,"click");a(window).unbind("reposition",h);a(window).unbind("reposition",c);a(window).unbind("scroll",c);a(document).unbind("keyup",j);if(g){n.removeExpression("top")}e.onClose()}function j(n){if((n.keyCode==27||(n.DOM_VK_ESCAPE==27&&n.which==0))&&e.closeEsc){i()}}function h(){if(a(window).height()<a(document).height()){l.css({height:a(document).height()+"px"});m.css({height:a(document).height()+"px"})}else{l.css({height:"100%"});if(g){a("html,body").css("height","100%");m.css("height","100%")}}}function c(){var o=k[0].style;k.css({left:"50%",marginLeft:(k.outerWidth()/2)*-1,zIndex:(e.zIndex+3)});if((k.height()+80>=a(window).height())&&(k.css("position")!="absolute"||g)){var n=a(document).scrollTop()+40;k.css({position:"absolute",top:n+"px",marginTop:0});if(g){o.removeExpression("top")}}else{if(k.height()+80<a(window).height()){if(g){o.position="absolute";if(e.centered){o.setExpression("top",'(document.documentElement.clientHeight || document.body.clientHeight) / 2 - (this.offsetHeight / 2) + (blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "px"');o.marginTop=0}else{var p=(e.modalCSS&&;o.setExpression("top","((blah = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + "+p+') + "px"')}}else{if(e.centered){k.css({position:"fixed",top:"50%",marginTop:(k.outerHeight()/2)*-1})}else{k.css({position:"fixed"}).css(e.modalCSS)}}}}}})};a.fn.lightbox_me.defaults={appearEffect:"fadeIn",appearEase:"",overlaySpeed:250,lightboxSpeed:300,closeSelector:".close",closeClick:true,closeEsc:true,destroyOnClose:false,showOverlay:true,parentLightbox:false,onLoad:function(){},onClose:function(){},classPrefix:"lb",zIndex:999,centered:false,modalCSS:{top:"40px"},overlayCSS:{background:"black",opacity:0.3}}})(jQuery);
Shopify.OptionSelectors.prototype.buildSelectors=function(){for(var c=0;c<this.product.optionNames().length;c++){var e=new Shopify.SingleOptionSelector(this,c,this.product.optionNames()[c],this.product.optionValues(c));e.element.disabled=false;this.selectors.push(e)}var b=this.selectorDivClass;var a=this.product.optionNames();var,function(f){var i=document.createElement("div");i.setAttribute("class",b);if(a.length>1){var h=document.createElement("label");;;i.appendChild(h)}i.appendChild(f.element);if(f.index==={{ size_index }}){var g=jQuery('<a id="size-chart-trigger" href="#size-chart">'+{{ size_chart_text_link | json }}+"</a>");{jQuery("#size-chart").lightbox_me({centered: true});return false});jQuery(f.element).after(g)}return i});return d};
<div id="size-chart" style="display:none" class="rte">{{ pages.size-chart.content }}</div>
.single-option-selector {
display: inline-block;
margin-right: 10px;
width: auto !important;
#size-chart { background:white; padding:25px; text-align:center; z-index:10000 !important; }
{% endif %}
{% endif %}

carolineschnapp commented Jul 25, 2012

See here un-minified version of the snippet:

JamieS commented May 17, 2013

You're the bestest of the best, you know that?

otasi commented Nov 7, 2013

How to I re-position the 'Size Chart' on my product's page to be above the Size option drop down field?

cubeice commented Jun 7, 2014

hey caroline,

used size-chart.liquid on Couture theme
everything work as it should


links from below are visible and click on the popup :-(

Please help.

micah-j commented Aug 25, 2014

Hi carolineschnapp,
Thanks so much for your work - but I've been having some trouble with you size-chart link. It seems to move the "single-option-selector" element away from the slect box and sits it on top of the size-chart link, so that it is difficult to tell what to click on. Any ideas how I might fix this? - its at for example (pw: thabra)

Hi Caroline,
May you please help with with this, i'm a novice.

  1. I need the 'size-chart' function to be available for option other than 'size' and for multiple (more than one ) options. ( i understand that this can be achieved by changing the word 'size' with the other 'option' on the instructions at this link , but don't know exactly where to change )
  2. For some option, i need a storewide chart, and for some option i need product-type specific chart.

May you please plesse help with this.

Hi Caroline,
Thank you for this, very helpful. By any chance how do i move the "Size Chart" link text to the bottom of my product page?

gennadit commented Apr 8, 2015

Hi Caroline,
how can I add a close button/text to the size chart. I guess many people are confused that there is no option to close the lightbox.
Thank you!

Hi Caroline,

How to make the lightbox mobile responsive.
The lightbox opens in an expanded form in mobile browsers (Chrome)
Please reply

Hi Caroline,
I have been following this page

Adding a snippet, it shows up on the product detail but its not really works.
Please see it here

Can you please help me fix this.


Hi Caroline, like what gennadit ask, how can I add a close button/text to the size chart. I guess many people are confused that there is no option to close the lightbox. Also, how to add the scrolling bar? Example like this:

Thank you!

Hello I would like to add the size chart link manually in my description text and not have it display automatically next to the variant selector. Is this possible? Thank you for your help.

It is not working for me. please help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment