You want a See Size Chart button on the product page:
... that once clicked gives you this:
-
Create a page that contains your Size Chart. Set its handle to
size-chart
. -
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
-
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>
-
Open the assets/theme.js file and add this to the very bottom:
$('.size-chart-open-popup').magnificPopup({ type:'inline', midClick: true });
-
Open your assets/theme.scss.liquid file (or assets/timber.scss.liquid in some cases) and add this css to the bottom.
-
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.
I tried to add this but still unable to see any "Size Guide" button on the product page?