Add a size chart in the product page
If you are using an older version of
Split theme (before 4.0 update) and you're after adding a size chart for your site product pages, please follow these instructions:
Create a size chart page
Create a simple Shopify page ( Online Store > Pages) named "Size chart" where you can add either a table or an image with the size chart you want to use.
Add the size chart to your theme
- From your Shopify admin, go to Online Store > Themes and select Actions > Edit code in the theme.
- In the Sections directory, click to open your theme main-product.liquid file.
- Add a Size chart button by pasting the following code above the Add to cart button (see this for assistance):
<!-- custom size chart [start] --> <a id="size-chart-open" href="#size-chart" class="button outline dark" style="padding-left: 0;">See size chart</a> <div id="size-chart" aria-hidden="true" class="hide" style="display: none;"> <div class="size-popup" style=" background: #fff; padding: 30px 40px 10px; max-height: calc(100vh - 100px); overflow: scroll; "> {{ pages.size-chart.content }} <div class="basicLightboxClose" style="color: #000">×</div> </div> </div> <!-- custom size chart [end] -->
- Click Save.
- Then open the templates/theme.liquid file and add this code just before the closing </body> tag - screenshot:
<script> window.addEventListener('load', function(){ const sizeModal = basicLightbox.create(document.getElementById('size-chart')); document.getElementById('size-chart-open').addEventListener('click', function(e){ sizeModal.show(function(){ document.querySelector('.size-popup .basicLightboxClose').addEventListener('click', function(){ sizeModal.close(); }); }); }); }) </script>
Again, save the file and you're done.