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 product.liquid:
{% if product.options contains 'Size' %} <a class="btn open-popup" href="#size-chart">See size chart</a> {% endif %}
-
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>
-
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 %}
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"