Skip to content

Instantly share code, notes, and snippets.

Last active November 28, 2018 16:56
Show Gist options
  • Save carolineschnapp/3171663 to your computer and use it in GitHub Desktop.
Save carolineschnapp/3171663 to your computer and use it in GitHub Desktop.
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 %}
Copy link

See here un-minified version of the snippet:

Copy link

Copy link

JamieS commented May 17, 2013

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

Copy link

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?

Copy link

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.

Copy link

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)

Copy link

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.

Copy link

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?

Copy link

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!

Copy link

Hi Caroline,

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

Copy link

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.


Copy link

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!

Copy link

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.

Copy link

It is not working for me. please help

Copy link

I already add the chart size button
but still does not show up the pop-up size chart.
if it helps, I'm working with the theme supply from Shopify
I would really appreciate any help. thank you!

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