Copy-paste a Liquid snippet for product page - A Size Chart link that opens a zoomable product metafield image in an accessible modal. Adapted from a real storefront build.
Relaxed-fit tee
1{%- comment -%}2 Requires product metafield: custom.size_chart (File > Image).3{%- endcomment -%}4{%- assign chart = product.metafields.custom.size_chart.value -%}5{%- if chart != blank -%}6 <div class="gpl-sizechart" data-gpl-sizechart>7 <button type="button" class="gpl-sizechart__trigger" data-open aria-haspopup="dialog">8 Size Chart <span aria-hidden="true">↗</span>9 </button>10 <div class="gpl-sizechart__overlay" data-overlay role="dialog" aria-modal="true" aria-label="Size Chart" hidden>11 <div class="gpl-sizechart__dialog" data-dialog>12 <button type="button" class="gpl-sizechart__close" data-close aria-label="Close">×</button>13 {{ chart | image_url: width: 1600 | image_tag: loading: 'lazy', class: 'gpl-sizechart__image', alt: 'Size chart' }}14 </div>
Full source is for members
One payment - every snippet, guide and bundle
