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

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