With the update, Shopify OS 2.0 so has come direct support with Metafields. Metafields is featured support by Shopify but we wanted to put together some helpful guides that we use in our theme. If you have come looking for a specific guide and have not found it, please reach out to Shopify to see how to create it.
Shopify Metafields guide
Shopify has put together its support page for metafields to help learn and understand what you can do with them. They will continue to make updates to Metafields so always good to check out their documentation.
Coding with Jan Metafields guide
Jan is a long time Shopify expert and we feel he has done a wonderful job at explaining Metafields in a simple easy to understand structure so highly suggest watching Jan’s video along with his channel for great information about Shopify in general.
How to create unique product tabs/size charts with metafields
- 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.
- Add content to the page as an image or as a table, using the built-in content editing tools.
- Head to Admin > Settings > Metafields > Products > Add definition > Enter a name of your choice, like “Size charts”
- 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”.
- Assign a “content-type” that 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.
- 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.
- 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 ‘Men’s size chart’ we created in step 1).
- Save your changes to apply this to your product. Repeat steps 6-8 for any other products where you wish this to display.
- Return to your product in your theme editor area.
- Select the content block called “size charts” (you may need to add this content block if you do not see it yet).
- Under “Tab 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 charts” tab on the page preview window.
How to set up custom filters using metafields
- Admin > Settings > Metafields > Products > Add definition > Add a name of your choice for your reference > Select “content type” – “text” > Click “save”. This creates our metafield.
- Admin > Online store > Navigation > Under “Filters”, “Click “Add filters” > Under “metafields”, you should see your newly created metafield from step one. Select this and save.
- Admin > Products > Find your product which is to have it’s metafield activated > At the bottom of the product settings, you’ll see the new metafield listed. Add your text to this field. Click Save.
- Repeat for any additional products.
- To check all is working as expected, take a look at your storefront and your newly added metafield/s should show in your collection page filter.