Canopy theme support

Metafields FAQ

All stores using our OS 2.0 compatible theme versions are able to take advantage of metafields. The metafields concept may seem quite complicated, so to help simplify things, we have put together this page to help merchants who may need further insight as to how it all works.

Remember, metafields are primarily controlled by the Shopify platform, so if you do need assistance with any specific topics not mentioned below, please reach out directly to Shopify Support here.

Shopify’s metafields guide

Firstly, Shopify has their own Support page explaining metafields and should be your first place to head. Shopify will continue to make updates to metafields and their accompanying support documentation in the coming months, so it’s always good to check out their documentation as it is the main source of reliable information on this.

Metafields video guide – ‘Coding with Jan’

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 manner so we highly recommend watching Jan’s video, along with his channel for great information about metafields and Shopify in general:

How do I create unique product tabs/size charts with metafields? (Video guide)

Please note that this video talks about using ‘Collapsible tabs’ – not all our themes has this block built-in. Our themes Expression and Masonry, do not have tabs. However, you can still use metafields on the product page.

Steps mentioned in the above guide

  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” 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.
  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 ‘Men’s 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 charts” (you may need to add this content block if you do not see it yet).
  11. 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 do I set up custom filters using metafields? (Video guide)

Steps mentioned in the above guide

  1. 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.
  2. 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.
  3. 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.
  4. Repeat for any additional products.
  5. 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.

How to group multiple variants into 1 filter on collection page

How do I show unique videos in sections with metafields?

How do I show unique images in sections with metafields?

Steps mentioned in the above guide

  1. Our aim for this guide is to have different images appear in a slideshow section of our product pages, depending on which specific product we are viewing. We’ll use a slideshow section’s image as an example: Admin > Online store > Customise theme > Choose your “Slideshow” section.
  2. Click on your individual slideshow slide (content block). Notice you have the option to upload an image in this block, for both mobile and desktop, so that’s images per slide if you wish.
  3. Next to one of your image upload buttons, click “connect dynamic source”.
  4. Select “Add metafield” > “Add definition” > Name this “Slide 1 desktop” or “Slide 1 mobile” depending on how you wish to differentiate things.
  5. Click “select content type” > Choose “File” > Make sure “Only accepts images” is chosen. > Click “Save”.
  6. Repeat this process for your other mobile or other slide images if you wish.
  7. At the top left of your theme editor window, under “Preview”, click the name of your product and this will take you to your product settings.
  8. Scroll to the bottom of this product page in the admin area and you’ll see your newly added metafields: “Slide 1 desktop” and “Slide 1 mobile” etc. depending on what you called these previously.
  9. If you click in any of these boxes you have created previously, you will be asked to add an image. Go ahead and apply one of your choice. Repeat this for any other of your newly added metafields that display on this page.
  10. Save your changes and return to your theme editor area and refresh your page.
  11. Go back to your slide and click the “connect dynamic source” icon. Choose from your newly listed metafields and save your changes once done.
  12. Repeat for each slide and metafield you wish to link up.
  13. Save changes

Why do some areas not support metafield link-ups?

Some areas of your theme settings provide metafield ‘dynamic source’ linking and others do not. This is actually dictated by the broader Shopify platform rather than by our themes (or any other themes for that matter). The availability of metafield ‘dynamic source’ linking is determined by whether the type of setting matches the specific type of metafield. So, this is a ‘limitation’ in a sense, of this platform feature by Shopify. We will always provide Support wherever able for functionality controlled by our themes but in this particular area, it’s something Shopify Support would need to provide deeper guidance on if you require this. You can contact them directly here:

How do I bulk edit my metafields? (Video guide)

Eduard Fastovski explains this perfectly in the video below, which is a ‘hack’ (or workaround), until this is supported natively by the Shopify platform: