How to display collection metafields on product pages?

At the beginning of this year, Shopify has enabled to set up metafields on a collection level. This means that you can create a metafield which applies to a collection and hence to all products in that collection. However, some merchants are struggling with displaying the collection metafield information on a product page. The problem is that you can’t access the collection metafield on product pages as you would do it for a product metafield. In this article, I’ll guide you on how to display a collection metafield on product pages (basically display information which is the same for all products in a specific collection). To understand better what metafields mean, refer to one of my previous article, in which I explain what a metafield is and how you can use it.

An example

To better understand the set up, I’ll give you an example, which we will use in this guide. Imagine you sell furniture on your site. One of the collections you have is called Tables. You would like to enable your customers to download an assembly manual for tables. Since the assembly manual is the same for all tables (the tables differ only in design and slightly in the shape), you can use the collection metafield, upload one file for the Tables collection and display a button for downloading the assembly manual on each product page within the Tables collection.

Set up the metafield

1. From your Shopify admin, go to Settings -> Metafields -> Choose Collections
2. Click Add definition -> name your metafield (e.g.assembly_manual), write description (optional) and choose File metafield type. In the validation section, select Accept all file types!
3. Save the metafield.

Upload the file

1. From your Shopify admin, go to Products -> Collections. Choose Tables collection. Scroll down and you should see the metafield field there.
2. Click the field and upload the file (make sure that the file doesn’t exceed 20 MBs).

Add a new block (applicable to themes 2.0)

1. Go to Shopify admin -> Themes -> Edit themes
2. Find the relevant product.liquid file (not JSON file).

3. Add a new block in schema section – it depends on you how you build the block. I decided to include title (heading), rich text (text body of the block) and button text so that you can change the content directly under Customize instead of making changes in the code every time. The code snippet should look like this:

        { 
          "type": "assembly_manual",
          "name": "Assembly Manual",
          "limit": 1,
          "settings": [
              {
                "type": "text",
                "id": "heading",
                "label":"Heading", 
                "default": "Assembly Manual"
              },
              {
                "type": "richtext",
                "id": "content",
                "label": "Assembly Manual Content",
                "default": "<p>Download the file.</p>"
              },
              {
                "type": "text",
                "id": "buttontext",
                "label":"Button Text", 
                "default": "Get the Manual"
              }
          ]
        },
   
   

4. Then, scroll up and add the block in the code (by using when statement). Use theme’s or custom CSS. In this step, we need to access the file through collection.products. Plus, to render the file correctly, we need to use file_url.

     {%- when 'assembly_manual' -%}
      <div>
        {%- for collection in product.collections -%}
          {%- if collection.metafields.custom.assembly_manual -%}  
            <div class="label">{{ block.settings.heading | escape }}</div>
            <div class="rte cf">{{ block.settings.content }}</div>
            <div class="custom-space-above">
                <a href="{{ collection.metafields.custom.assembly_manual | file_url }}" target="_blank" class="btn btn--secondary">{{ block.settings.buttontext | escape }}</a>
            </div>
          {%- endif -%} 
        {%- endfor -%}
      </div>
   

5. Save the file and go back to Shopify admin.
6. Click Customize and choose Products –> Default product. Add the newly created block (Assembly Manual). By drag&drop move the block along the product page.
7. Provided you have already uploaded the files to your products, you should already see the link for the file download on the page.
8. Rewrite the heading and save it. That’s it!

I hope this guide helps you display the collection metafield on product pages. If anything isn’t working or you need some more help, feel free to get in touch with me! I’ll be happy to help you out.