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 %}

@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