Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save aaliyan111/1c9437c98bc5d7ec9b3b7fb01bde4dc9 to your computer and use it in GitHub Desktop.
Save aaliyan111/1c9437c98bc5d7ec9b3b7fb01bde4dc9 to your computer and use it in GitHub Desktop.
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 %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment