Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to add a Size Chart button to Debut and other Sectioned themes. This uses the Magnific Popup plugin may need to installed (instructions below).

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 the section file product-template.liquid:

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

    Some themes such as Jumpstart may need items 2. and 3. to be placed inside the templates/product.liquid file

  3. At the bottom of the sections/product-template.liquid file, 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. Open the assets/theme.js file and add this to the very bottom:

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

    If the Size chart isn't appearing yet, extra code may be needed. Since Magnific Popup is required for this to work, some themes (including Debut) will require the following.

  5. Open your assets/theme.scss.liquid file (or assets/timber.scss.liquid in some cases) and add this css to the bottom.

  6. If you have an assets/vendor.js file, open it and add this code to the bottom. If you do not, place this code just above the $('.size-chart-open-popup').magnificPopup code in step 4 in your assets/theme.js file.

@akankshasharma2181

This comment has been minimized.

Copy link

akankshasharma2181 commented Mar 21, 2018

I tried to add this but still unable to see any "Size Guide" button on the product page?

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.