Size chart popup on product pages
What the client asked
Shoppers keep emailing to ask about sizes. Add a size chart to product pages. Some products need a different chart.
How I solved it
I created a product metafield called custom.size_chart. Its type is page reference, so each chart is a normal store page the client can edit.
A theme block shows a "Size chart" button only when the product has a chart. The button opens a <dialog> with the page content. The Escape key closes it and focus goes back to the button.
The client now picks a chart for each product in the admin. New charts need no code.
Tech
- Liquid
- Metafields
- Theme blocks
- HTML dialog