Create a gist now

Instantly share code, notes, and snippets.

Embed
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 %}
<script>
/*
* $ 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
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* 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){l.click(function(n){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&&e.modalCSS.top)?parseInt(e.modalCSS.top):0;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 d=Shopify.map(this.selectors,function(f){var i=document.createElement("div");i.setAttribute("class",b);if(a.length>1){var h=document.createElement("label");h.htmlFor=f.element.id;h.innerHTML=f.name;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>");g.click(function(){jQuery("#size-chart").lightbox_me({centered: true});return false});jQuery(f.element).after(g)}return i});return d};
</script>
<div id="size-chart" style="display:none" class="rte">{{ pages.size-chart.content }}</div>
<style>
.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; }
</style>
{% endif %}
{% endif %}
@carolineschnapp

This comment has been minimized.

Show comment
Hide comment
@carolineschnapp

carolineschnapp Jul 25, 2012

See here un-minified version of the snippet: https://gist.github.com/3173581

Owner

carolineschnapp commented Jul 25, 2012

See here un-minified version of the snippet: https://gist.github.com/3173581

@carolineschnapp

This comment has been minimized.

Show comment
Hide comment
@JamieS

This comment has been minimized.

Show comment
Hide comment
@JamieS

JamieS May 17, 2013

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

JamieS commented May 17, 2013

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

@otasi

This comment has been minimized.

Show comment
Hide comment
@otasi

otasi 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?

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

This comment has been minimized.

Show comment
Hide comment
@cubeice

cubeice Jun 7, 2014

hey caroline,

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

but

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

Please help.

cubeice commented Jun 7, 2014

hey caroline,

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

but

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

Please help.

@micah-j

This comment has been minimized.

Show comment
Hide comment
@micah-j

micah-j 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 https://bashful-garter-2.myshopify.com/products/bam-bam-top-arnley for example (pw: thabra)

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 https://bashful-garter-2.myshopify.com/products/bam-bam-top-arnley for example (pw: thabra)

@Raghu-insaraf

This comment has been minimized.

Show comment
Hide comment
@Raghu-insaraf

Raghu-insaraf Nov 21, 2014

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 http://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/add-size-chart , 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,
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 http://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/add-size-chart , 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.

@satquiel

This comment has been minimized.

Show comment
Hide comment
@satquiel

satquiel Feb 17, 2015

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?

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

This comment has been minimized.

Show comment
Hide comment
@gennadit

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

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!

@GrandyAndy

This comment has been minimized.

Show comment
Hide comment
@GrandyAndy

GrandyAndy May 27, 2015

Hi Caroline,

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

Hi Caroline,

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

@rnagulapalle

This comment has been minimized.

Show comment
Hide comment
@rnagulapalle

rnagulapalle Jun 1, 2016

Hi Caroline,
I have been following this page
https://help.shopify.com/themes/customization/products/add-size-chart

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

https://allmydibs.com/products/crossover-full-skirt-dress-iron

Can you please help me fix this.

-raj

Hi Caroline,
I have been following this page
https://help.shopify.com/themes/customization/products/add-size-chart

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

https://allmydibs.com/products/crossover-full-skirt-dress-iron

Can you please help me fix this.

-raj

@garyng174

This comment has been minimized.

Show comment
Hide comment
@garyng174

garyng174 Jul 16, 2016

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:

https://teeshirtgalaxy.com/collections/specials/products/grillmaster

Thank you!

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:

https://teeshirtgalaxy.com/collections/specials/products/grillmaster

Thank you!

@HelloIamheike

This comment has been minimized.

Show comment
Hide comment
@HelloIamheike

HelloIamheike Sep 2, 2016

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.

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.

@gincegeorge

This comment has been minimized.

Show comment
Hide comment
@gincegeorge

gincegeorge Nov 9, 2017

It is not working for me. please help snake-gully.myshopify.com/products/yin-yang-tee-1

It is not working for me. please help snake-gully.myshopify.com/products/yin-yang-tee-1

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