docs: upadate README

README.md

@@ -38,15 +38,53 @@ To modify the available filter options, you'll need to update two files:
 1. Update the [`getFilterValuesFromUrl`](https://github.com/rylanharper/Nitrogen/blob/4119b6b3edfea0afb87eebba50bcfe77882cfc9a/app/composables/use-collection-helpers.ts#L83) helper function to define your filter options.
 2. Edit the [`filter-menu.vue`](https://github.com/rylanharper/Nitrogen/blob/master/app/components/filter/filter-menu.vue) component to include (or remove) filter mapping functions.
 
+For example, here's how a map function works for `productType` filter options:
+
+```ts
+const productTypeOptions = computed(() => {
+  const allProductTypes = new Set(
+    props.products.map((product) => product.productType)
+  );
+
+  return Array.from(allProductTypes).sort();
+});
+```
+
 ### Metafields
 
 Nitrogen uses the following product metafields to make working with Shopify data easier:
 
-1. `matching_colors`: This is a product reference list metafield that handles product swatch colors on product pages. This metafield allows access to the full data of referenced products, which is ideal for checking availability, option names/values, media, and more.
-2. `details`: This is a richtext metafield that provides additional product information, such as specifications, materials, or care instructions.
-3. `shipping`: This is a richtext metafield used to display shipping-specific details, such as delivery timelines, shipping restrictions, or policies.
+1. `matching_colors`: A product reference list metafield that handles product swatch colors on product pages. This metafield allows access to the full data of referenced products, which is ideal for checking availability, option names/values, media, and more.
+
+```ts
+matching_colors: metafield(namespace: "custom", key: "matching_colors") {
+  references(first: 10) {
+    edges {
+      node {
+        ...Product
+      }
+    }
+  }
+}
+```
+
+2. `details`: A rich-text metafield designed to display additional product details, such as specifications, materials, or care instructions. Perfect for enhancing product descriptions with structured content.
+
+```ts
+details: metafield(namespace: "custom", key: "details") {
+  value
+}
+```
+
+3. `shipping`: A rich-text metafield for sharing shipping-specific information, like delivery timelines, restrictions, or return policies.
+
+```ts
+shipping: metafield(namespace: "custom", key: "shipping") {
+  value
+}
+```
 
-You can create additional product reference metafield lists by copying the [`matching_colors`](https://github.com/rylanharper/Nitrogen/blob/2f39c405ce5d9a707f319e024d2c0b923d2299ce/server/graphql/queries/product.ts#L13) query structure and changing the key name. This enables you to build features like:
+You can create additional reference metafields by copying the [`matching_colors`](https://github.com/rylanharper/Nitrogen/blob/2f39c405ce5d9a707f319e024d2c0b923d2299ce/server/graphql/queries/product.ts#L13) query structure and changing the key name. This enables you to build features like:
 
 - 🏷️ Related products with `related_products`
 - 📸 "Styled with" lists using `styled_with`
@@ -71,7 +109,7 @@ NUXT_SHOPIFY_API_VERSION=your-storefront-access-token
 2. Generate your project types using `pnpm codgen`
 3. Start the development server using `pnpm run dev`
 
-## 🏓 Basic Usage
+## 🐬 Basic Usage
 
 Nitrogen provides a type-safe GraphQL client that seamlessly integrates with Shopify's Storefront API. It uses a server-side proxy to handle API authentication and requests, while offering a typed interface for executing GraphQL operations.