Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to add a Size Chart button to the #Brooklyn theme. This uses the Magnific Popup plugin that comes with the theme.

What you want

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

Alt text

... that once clicked gives you this:

Alt text

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

This comment has been minimized.

Copy link

commented May 30, 2015

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

@kbamboo

This comment has been minimized.

Copy link

commented Jun 25, 2015

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!

@peterbrunton

This comment has been minimized.

Copy link

commented Jul 19, 2015

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'

@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

commented Oct 8, 2015

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

Alt text

@karu23

This comment has been minimized.

Copy link

commented Dec 14, 2015

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"

@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

commented Jan 11, 2016

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

@haraldvan

This comment has been minimized.

Copy link

commented Feb 12, 2016

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?

@ghost

This comment has been minimized.

Copy link

commented Feb 21, 2016

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?

@Fightsu

This comment has been minimized.

Copy link

commented Feb 21, 2016

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

@Fightsu

This comment has been minimized.

Copy link

commented Feb 23, 2016

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:)

@Fightsu

This comment has been minimized.

Copy link

commented Feb 23, 2016

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

@tderosier

This comment has been minimized.

Copy link

commented May 20, 2016

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

@spookyzoo

This comment has been minimized.

Copy link

commented May 21, 2016

@tderosier

This comment has been minimized.

Copy link

commented May 21, 2016

@spookyzoo, Perfect, thanks a ton.

@farrukhali

This comment has been minimized.

Copy link

commented Oct 20, 2016

@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

@cymr84

This comment has been minimized.

Copy link

commented Nov 13, 2016

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

@norabean

This comment has been minimized.

Copy link

commented Nov 30, 2016

@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.

@pratzs

This comment has been minimized.

Copy link

commented Dec 8, 2016

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

@brandtam

This comment has been minimized.

Copy link

commented Dec 9, 2016

@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)
@Vividsquid

This comment has been minimized.

Copy link

commented Mar 27, 2017

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

@pulkit5454

This comment has been minimized.

Copy link

commented Apr 2, 2017

Hi @brandtam / @Vividsquid

I was trying to follow your instructions:

  1. I In theme.js.liquid

1

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

First at the top:

image

And at the bottom:

image

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

Thanks
Pulkit

@tricepad

This comment has been minimized.

Copy link

commented Nov 18, 2017

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.