nevermind I managed to get it to work with your code thank you!
Topic summary
Goal: add a size-chart pop-up to product pages (Shopify Debut) using Shopify’s tutorial. Initial issue: clicking “See size chart” opened a blank modal.
Key findings and fixes:
- The pop-up pulls content from a Page via Liquid: pages.[handle].content (Liquid is Shopify’s templating language; a handle is the page’s URL identifier). The code expected the page handle “size-chart”.
- The store’s actual page was at /pages/size-conversion-charts, so the snippet needed updating from {{ pages.size-chart.content }} to {{ pages.size-conversion-charts.content }}, or creating a page with the exact “size-chart” handle.
- Ensure the page exists, is published (not draft), and has content. A screenshot suggested missing HTML in the modal content area, but the primary issue was the handle mismatch.
Styling/UX adjustments:
- To constrain pop-up and enable scrolling (desktop/mobile), add CSS: max-width: 90%, max-height: 90%, overflow: auto. Consider transposing tables to reduce horizontal scroll. Outcome: mobile scroll resolved.
Other developments:
- Additional users reported errors inserting the “See size chart” button but provided few details; one was advised to contact Shopify Support for free theme design time. A YouTube tutorial link was shared. Status: OP resolved; others’ issues remain open.