How to add a Size Chart button to the #Brooklyn theme. This uses the Magnific Popup plugin that comes with the theme.

Size Chart in Brooklyn.md

What you want

You want a See Size Chart button on the product page:

... that once clicked gives you this:

How to get there

1. Create a page that contains your Size Chart. Set its handle to size-chart.

2. Add a Size Chart button above your Add To cart button in product.liquid:

   {% if product.options contains 'Size' %}
   <a class="btn open-popup" href="#size-chart">See size chart</a>
   {% endif %}

3. At the bottom of product.liquid, add this:

   <div id="size-chart" class="mfp-hide">
     {{ pages.size-chart.content }}
   </div>
   <style>
   #size-chart {
     border: 1px #555 solid;
     background-color: #ffffff;
     padding: 20px;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
   }
   </style>

4. Before </body> tag in theme.liquid, add this:

   {% if settings.product_zoom_enable and template contains 'product' %}
     <script>
       $('.open-popup').magnificPopup({
         type:'inline',
         midClick: true
       });
     </script>
   {% endif %}

Hi,

Thank you very much for the posting, however I cannot get this to work. It may be that I am posting the html into the wrong section.

Would you be able to provide some better guidance

Hey,

I tried doing this and I'm pretty sure it had worked the first time but now it isn't. When I click "See size chart" the url in the address bar gets a #size-chart suffix but the pop-up doesn't show. When I right-click on the size chart button and open it in a new tab, it opens the product page itself. Can you please help.

Cheers!

Make sure you have the Magnific Popup code also loaded. https://github.com/dimsemenov/Magnific-Popup you need to link to query.magnific-popup.min.js' & 'magnific-popup.css'

Just FYI I was just able to add this to a Brooklyn theme just now, and that was all done under 2 minutes, and it all works fine, so the code is still good 👍 . Just make sure that you do have products with a Size option, and that "Enable image zoom" is checked in your theme settings:

  {% if product.options contains 'Size' %}

It doesn't work, I have followed everything to the tee. It says "content not found". I don't know coding so could you pretty please give visual reference of where to put the code in the .liquid file. And yes, my product zoom is enabled.

P.S. Same issues as "SudzTT" and "kbamboo"

@karu23 step 1: “Create a page that contains your Size Chart. Set its handle to size-chart.”

Thanks for posting Caroline, works like a charm for the Brooklyn theme. Was wondering if it would be possible to adjust this to have different size charts per e.g. product type?

yup took literally 2 minutes to have it functional, awesome....i have the same question as above..is it possible to assign a diiferent handle page and btn to individual products?

sorry was the above comment had to redo my account here....so yes it was very simple, and wondering if there is a way to add specific size charts to individual products...i guess there is a way, first would be to make the size-chart1 pages etc...and i guess this could be changed {{ pages.size-chart1.content }} but its how to assign the button to each handle that makes me think,lol....and iam no coder but it seems logical what i just wrote i hope,lol

yes!!!!!...finally after 2 days of learning and headaches i finally figured out how to have a specific size chart/popup for individual products...now i can see why people have so many issues and just end up buying a theme with it built in:)

if you want to know how i got different size charts for products i made a video to help you https://ecommerce.shopify.com/c/ecommerce-design/t/brooklyn-size-chart-324950

@Fightsu, Could you provide more info on how you achieved this? Your link above no longer works. Thanks!

@tderosier

I found the video...

https://www.youtube.com/watch?v=A5-6kgh_lrg

@spookyzoo, Perfect, thanks a ton.

@carolineschnapp I did everything but popup is not working, when I click on See Size Chart button in url adds #size-chart but popup is not appearing
please help

@carolineschnapp Thank you so much for posting this, it worked for me perfectly.

@carolineschnapp How to get this to work in Debut Theme? It is working but is placing the size chart at the bottom of the product page permanently as the popup is not functional.

HI there. This code dosent work on new Brooklyn theme. Please help.

@pratz Here's how I got it working on the new Brooklyn theme.

In theme.js.liquid

look for this:

this.initBreakpoints();
this.stringOverrides();
this.initProductVariant();
this.initStickyProductMeta();
this.initProductImageZoomLarge();

and make it this:

    this.initBreakpoints();
    this.stringOverrides();
    this.initProductVariant();
    this.initProductSizeChart();
    this.initStickyProductMeta();
    this.initProductImageZoomLarge();

Then look for this:

initStickyProductMeta: function() {

And add this just above it:

initProductSizeChart: function() {
  $('.open-popup').magnificPopup({
    type:'inline',
    midClick: true
  });
},

Also:

1. Ignore @carolineschnapp instructions for theme.liquid and do not touch it.
2. Instead of making the changes suggested to product.liquid make them to sections/product-template.liquid
3. If you do it this way you don't need to enable product zoom (which opens the images in a slider in a lightbox and doesn't actually zoom)

Brilliant Thanks!

if product.options contains 'Size'

-this IF statement queries for 'Size' in product options

if product.tags contains '3600'

-taken from the FIGHTSU video, queries product tags for 3600

Can somebody shed some light how i may base my query on Variant SKU?
trying the following with little joy

{% if product.variant.sku contains 'X03' %}

Hi @brandtam / @Vividsquid

I was trying to follow your instructions:

1. I In theme.js.liquid

2. In sections/product-template.liquid, I did this:

First at the top:

And at the bottom:

But still cant see the button, do you think I am doing something wrong?

Thanks
Pulkit

@brandtam
hello,

Thanks for the tip. The only problem is once the code is installed.
Everything works perfectly, but when I put an article in the basket, instead of opening the side page of the basket on the right. it opens a new shopping cart page, which is annoying for the customer shopping
thanks