Create unique product drawers/size charts with metafields

Steps:

1. We first need to create a new page containing your size chart by heading to Admin > Online store > Pages > Add page > Call this ‘Mens size chart’ or similar.
2. Add content to the page as an image or as a table, using the built in content editing tools.
3. Head to Admin > Settings > Metafields > Products > Add definition > Enter a name of your choice, like “Size charts”
4. Add a description of your choice (used internally, as a reference so you know later on, why you created the metafield). Say something like “Guide to size charts”.
5. Assign a “Content type” which defines the metafield’s purpose. Choose Reference > Page > Save changes. This metafield will now show on all products but will only become active on your storefront for customers to view once it is triggered (on a per-product basis), explained in the next steps.
6. Head to a product that you wish to activate your metafield on: Admin > Products > Choose your product > You should see your new metafield listed at the bottom of the page.
7. Click on your newly created, grey metafield content box which should display a dropdown list where you can choose your page to link to (like ‘Mens size chart’ we created in step 1).
8. Save your changes to apply this to your product. Repeat steps 6-8 for any other products where you wish this to display.
9. Return to your product in your theme editor area.
10. Select the content block called “Size chart” (you may need to add this content block if you do not see it yet).
11. Under Content, click the Connect dynamic source icon and select “Size charts” and save your changes. You should see your size chart page shown when you expand the “Size chart” drawer on the page preview window.