Add Metafields to collection

Let's say you want to get the collection metafields data in the collection page. You can do this with the help if fieldsHelper.

Lets say you have a collection metafield with the key mobile_banner , namespace custom and you want to get this in the collection page.

You can add this in a helper file, src/helper.js

import { fieldsHelper } from '@appmaker-xyz/shopify';

export function addProductCollection() {
    fieldsHelper.addFieldsToCollection({
    fields: {
      // add any fields in the required format
      collectionBanner: {
        __aliasFor: 'metafield',
        __args: {
          key: 'mobile_banner',
          namespace: 'custom',
        },
        value: true,
        reference: {
          __on: [
            {
              __typeName: 'MediaImage',
              image: {
                url: true,
              },
            },
          ],
        },
      },
      //  allProductsCount: true,
      // templateSuffix: true,
    },
  });
}

And import it in your theme index.js file and call the function inside the activate function.

import { addProductCollection } from './collection';

addProductCollection();

How to use this in the collection page?

const CollectionBanner = (props) => {
    const collectionBanner = props?blockData?.collection?.collectionBanner?.reference?.image?.url;
}