Each [metafield](/docs/apps/build/custom-data/metafields) and [metafield definition](/docs/apps/build/custom-data/metafields/definitions) has a type, which defines the type of information that it can store. The metafield types have built-in validation and [Liquid](/docs/api/liquid/objects/metafield) support.
## How it works
For metafield definitions, the type is enforced across every instance of the resource that owns the metafield definition. For example, if you create a metafield definition called "Ingredients" with the type `multi_line_text_field` with an owner type of `PRODUCT`, then the metafield's type will be `multi_line_text_field` for every product resource.
<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script data-option="title" data-value="Metafield Types"></script>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"data": {
"product": {
"metafield": {
"namespace": "custom",
"key": "ingredients",
"value": "oat milk,\nsugar,\nchia seeds",
"type": "multi_line_text_field",
"definition": {
"name": "Ingredients",
"ownerType": "PRODUCT"
}
}
}
}
}
END_RAW_MD_CONTENT</script>
</div>
</p>
When using the Admin API to read and write metafields, the value is always entered and stored as a string, regardless of type.
## Metafield type migration
You can change the type of a metafield, with some important considerations:
- Metafields cannot be migrated to type `id`.
- When migrating a metafield between incompatible types (for example, from `date_time` to `money`), the existing values become invalid. To fix this, use the Shopify admin to clear the invalid value, or use the API to clear the value or change the invalid definition to a compatible one.
## Supported types
Metafields and metafield definitions can have any of the types specified in the following table.
| Type | Description | Example value | Value type | [Translatable](/docs/api/admin-graphql/latest/mutations/translationsRegister) | [Market localizable](/docs/api/admin-graphql/latest/mutations/marketLocalizationsRegister) |
|---|---|---|---|---|---|
| `boolean` | A true or false value. | <pre>true</pre> | boolean | no | no |
| `color` | The hexadecimal code for a color. | <pre>#fff123</pre> | string | no | no |
| <a id="date">`date`</a> | A date in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format without a presumed timezone. | <pre>2022-02-02</pre> | string | no | no |
| `date_time` | A date and time in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format without a presumed timezone. Defaults to Greenwich Mean Time (GMT). | <pre>2024-01-01T12:30:00</pre> | string | no | no |
| `dimension` | A value and a unit of length. Valid unit values: `in`, `ft`, `yd`, `mm`, `cm`, `m` | <pre>{ <br> "value": 25.0, <br> "unit": "cm"<br>} </pre> | JSON object | no | no |
| `id` | A unique single-line text field. You can add [validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) for `min`, `max`, and `regex`. | <pre>1234</pre> | string | no | no |
| `json` | A JSON-serializable value. This can be an object, an array, a string, a number, a boolean, or a null value. | <pre>{ <br> "ingredient": "flour", <br> "amount": 0.3<br>} </pre> | JSON data | yes | no |
| `link` | A text and URL pairing that can be used to store link content. | <pre>{ <br> "text": "Learn more", <br> "url": "https://shopify.com"<br>} </pre> | JSON data | yes | no |
| `money` | A numeric amount, with a currency code that matches the store's currency.<br><br>You can [localize money metafields to a market](https://help.shopify.com/manual/markets/languages/translate-adapt-app#create-custom-content-for-a-market), but you can't translate them to a different language or locale. | <pre>{<br> "amount": "5.99", <br> "currency_code": "CAD"<br>}</pre> | JSON object | no | yes |
| <a id="multiLineText">`multi_line_text_field`</a> | A multi-line text field. | <pre>Ingredients<br>Flour<br>Water<br>Milk<br>Eggs</pre> | string | yes | no |
| `number_decimal` | A number with decimal places in the range of +/-9999999999999.999999999. | <pre>10.4</pre> | string | no | no |
| <a id="numberInteger">`number_integer`</a> | A whole number in the range of +/-9,007,199,254,740,991. | <pre>10</pre> | integer | no | no |
| <a id="rating">`rating`</a> | A rating measured on a specified scale. [Validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) are required for ratings and support `min` and `max`. | <pre>{ <br> "value": "3.5", <br> "scale_min": "1.0", <br> "scale_max": "5.0"<br>} </pre> | JSON object | no | no |
| `rich_text_field` | <p>A rich text field supporting headings, lists, links, bold, and italics.</p><p>Learn more about [rich text formatting](#rich-text-formatting).</p> | <pre>{<br> "type": "root",<br> "children": [<br> {<br> "type": "paragraph",<br> "children": [<br> {<br> "type": "text",<br> "value": "Bold text.",<br> "bold": true<br> }<br> ]<br> }<br> ]<br>}</pre> | JSON object | yes | no |
| <a id="singleLineText">`single_line_text_field`</a> | A single-line text field. | <pre>VIP shipping method</pre> | string | yes | no |
| `url` | A URL with one of the allowed schemes: `https`, `http`, `mailto`, `sms`, `tel`. | <pre>https://www.shopify.com</pre> | string | yes | no |
| `volume` | A value and a unit of volume. Valid unit values: `ml`, `cl`, `l`, `m3` (cubic meters), `us_fl_oz`, `us_pt`, `us_qt`, `us_gal`, `imp_fl_oz`, `imp_pt`, `imp_qt`, `imp_gal`. | <pre>{ <br> "value": 20.0, <br> "unit": "ml"<br>} </pre> | JSON object | no | no |
| `weight` | A value and a unit of weight. Valid unit values: `oz`, `lb`, `g`, `kg` | <pre>{ <br> "value": 2.5, <br> "unit": "kg"<br>} </pre> | JSON object | no | no |
> Note:
> For information about character limits for each metafield type, refer to [metafield limits](/docs/apps/build/custom-data/metafields/metafield-limits#metafield-type-character-limits).
### Reference types
Reference metafields enable you to store references to Shopify resources.
| Type | Description | Example value | Value type | [Translatable](/docs/api/admin-graphql/latest/mutations/translationsRegister) | [Market localizable](/docs/api/admin-graphql/latest/mutations/marketLocalizationsRegister) |
|---|---|---|---|---|---|
| `collection_reference` | A reference to a collection on the online store. | <pre>gid://shopify/<br>Collection/1</pre> | string | no | yes |
| `customer_reference` | A reference to a customer on the online store. | <pre>gid://shopify/Customer/1</pre> | string | no | no |
| `file_reference` | A reference to a file on the online store. The default value is `GenericFile`. You can use [validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) to add other file types (for example, `Image`). | <pre>gid://shopify/<br>MediaImage/123</pre> | string | yes | no |
| `metaobject_reference` | A reference to a metaobject entry. You can use [validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) to set which metaobject definition the metaobject must be. | <pre>gid://shopify/Metaobject/123</pre> | string | no | yes |
| `mixed_reference` | A reference to one of many metaobject definitions. Unlike `metaobject_reference` which only allows for a single metaobject definition to be set, mixed references allow for metaobjects that belong to different definitions. | <pre>gid://shopify/Metaobject/123</pre> | string | no | no |
| `page_reference` | A reference to a page on the online store. | <pre>gid://shopify/<br>Page/1</pre> | string | no | yes |
| `product_reference` | A reference to a product on the online store. | <pre>gid://shopify/<br>Product/1</pre> | string | no | yes |
| `product_taxonomy_value_reference` | A reference to a product taxonomy value. You can add [validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) to limit which taxonomy values can be selected. Refer to [Shopify Standard Product Taxonomy](https://shopify.github.io/product-taxonomy) for available values. | <pre>gid://shopify/TaxonomyValue/1</pre> | string | no | no |
| `variant_reference` | A reference to a product variant on the online store. | <pre>gid://shopify/<br>ProductVariant/1</pre> | string | no | yes |
### List types
List metafields enable you to store multiple values in a single metafield. The value must be provided as a JSON array.
You can implement list metafields on the online store [using sections and blocks](/docs/storefronts/themes/best-practices/templates-sections-blocks#metafields). The type of list determines the implementation. For example, you could add a list of product references as a dynamic source to a custom block, or you could add a list of single line text fields to a text or rich text section.
> Note:
> If you delete a product or variant from a store, then the product or variant is automatically removed from all list metafields that reference it.
The following list types are supported:
| Type | Description | Example value | [Translatable](/docs/api/admin-graphql/latest/mutations/translationsRegister) | [Market localizable](/docs/api/admin-graphql/latest/mutations/marketLocalizationsRegister) |
|---|---|---|---|---|
| `list.collection_reference` | A list of collection references. | <pre>[ <br>"gid://shopify/Collection/1", <br>"gid://shopify/Collection/2"<br>] </pre> | no | no |
| `list.color` | A list of hexadecimal color codes. | <pre>[ <br>"#FFF123", <br>"#E6E6FA", <br>"#00FF00"<br>] </pre> | no | no |
| `list.customer_reference` | A comma-separated list of references to customers on the online store. | <pre>[ <br>"gid://shopify/Customer/1", <br>"gid://shopify/Customer/2"<br>] </pre> | no | no |
| `list.date` | A list of dates in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format without presumed timezones. | <pre>[ <br>"2022-01-01", <br>"2022-05-05"<br>] </pre> | no | no |
| `list.date_time` | A list of dates and times in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format without presumed timezones. Defaults to Greenwich Mean Time (GMT). | <pre>[ <br>"2024-01-01T12:30:00", <br>"2024-05-01T12:30:00"<br>] </pre> | no | no |
| `list.dimension` | A list of values and a unit of length. Valid unit values: `in`, `ft`, `yd`, `mm`, `cm`, `m`. | <pre>[ <br> { <br> "value": 25.0, <br> "unit": "cm"<br> },<br> { <br> "value": 35.0, <br> "unit": "cm"<br> } <br>] </pre> | no | no |
| `list.file_reference` | A list reference to a file on the online store. The default value is `GenericFile`. You can use [validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) to add other file types (for example, `Image`) | <pre>[ <br>"gid://shopify/<br>MediaImage/123</pre>", <br><pre>"gid://shopify/<br>MediaImage/456 <br>] </pre> | yes | no |
| `list.id` | A list of unique single-line text fields. You can add [validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) for `min`, `max`, and `regex`. | <pre>[ <br>"1234", <br>"5678"<br>] </pre> | string | no | no |
| `list.link` | A list of text and URL pairings that can be used to store a collection of links. | <pre>[<br> { <br> "text": "Start a business", <br> "url": "https://shopify.com"<br> }, <br> { <br> "text": "Read the docs", <br> "url": "https://shopify.dev/docs" <br> }<br>] </pre> | yes | no |
| `list.metaobject_reference` | A list reference to one or more metaobject entries that belong to a single metaobject definition. Unlike `list.mixed_reference`, all metaobject entries referenced must be of the same definition. | <pre>[ <br>"gid://shopify/Metaobject/123", <br><pre>"gid://shopify/Metaobject/456"<br>]</pre> | no | no |
| `list.mixed_reference` | A list reference to one or more metaobject entries that may belong to different metaobject definitions. | <pre>[ <br>"gid://shopify/Metaobject/123", <br><pre>"gid://shopify/Metaobject/456"<br>] </pre> | no | no |
| `list.number_decimal` | A list of numbers with decimal places in the range of +/-9999999999999.999999999. | <pre>[ <br>"10.4", <br>"20.5",<br>"30.6" <br>] </pre> | no | no |
| `list.number_integer` | A list of whole numbers in the range of +/-9,007,199,254,740,991. | <pre>[ <br>"10", <br>"20", <br>"30"<br>] </pre> | no | no |
| `list.page_reference` | A list of references to pages on the online store. |<pre>[<br>"gid://shopify/<br>Page/1", <br>"gid://shopify/<br>Page/2"<br>]</pre> | no | no |
| `list.product_reference` <a id="listProdRef"></a> | A list of product references. | <pre>[ <br>"gid://shopify/Product/1", <br>"gid://shopify/Product/2"<br>] </pre> | no | no |
| `list.product_taxonomy_value_reference` | A list of references to product taxonomy values. You can add [validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) to limit which taxonomy values can be selected. Refer to [Shopify Standard Product Taxonomy](https://shopify.github.io/product-taxonomy) for available values. | <pre>["gid://shopify/TaxonomyValue/1", "gid://shopify/TaxonomyValue/2"]</pre> | string | no | no |
| `list.rating` | A list of ratings measured on a specified scale. [Validations](/docs/apps/build/custom-data/metafields/list-of-validation-options) are required for ratings and support `min` and `max`.|<pre>[<br> { <br> "value": "3.5", <br> "scale_min": "1.0", <br> "scale_max": "5.0"<br> }, <br> { <br> "value": "4.5", <br> "scale_min": "1.0", <br> "scale_max": "5.0"<br> }<br>] </pre> | no | no |
| `list.single_line_text_field` <a id="listSingleLineText"></a> | A list of single-line text fields. | <pre>[ <br>"VIP shipping method", <br>"Standard shipping method"</pre>] </pre> | yes | no |
| `list.url` | A list of URLs with one of the allowed schemes: `https`, `http`, `mailto`, `sms`, `tel`. | <pre>[ <br>"https://www.shopify.com", <br>"https://www.shopify.dev"<br>] </pre> | yes | no |
| `list.variant_reference` | A list of references to a product variant on the online store. | <pre>[ <br>"gid://shopify/ProductVariant/1",<br>"gid://shopify/ProductVariant/2"<br>]</pre> | no | no |
| `list.volume` | A list of values and a unit of volume. Valid unit values: `ml`, `cl`, `l`, `m3` (cubic meters), `us_fl_oz`, `us_pt`, `us_qt`, `us_gal`, `imp_fl_oz`, `imp_pt`, `imp_qt`, `imp_gal`. | <pre>[ <br> {<br> "value": 20.0, <br> "unit": "ml"<br> }, <br> {<br> "value": 40.0, <br> "unit": "ml"<br> }<br>] </pre> | no | no |
| `list.weight` | A list of values and a unit of weight. Valid unit values: `oz`, `lb`, `g`, `kg` | <pre>[ <br> { <br> "value": 2.5, <br> "unit": "kg"<br> },<br> { <br> "value": 4.5, <br> "unit": "kg"<br> } <br>]</pre> | no | no |
For information about list type limits, refer to [@metafield-limits.md](/docs/apps/build/custom-data/metafields/metafield-limits#lists-type-limits).
### Rich text formatting
The `rich_text_field` metafield type accepts a JSON object that uses the following general structure:
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script type="text/plain" data-language="json">
RAW_MD_CONTENT{
"type": "root",
// The root holds an array of paragraphs and lists. Each paragraph represents a section of text that's separated by a line break.
"children": [
{
"type": "paragraph",
// A paragraph holds an array of formatted text objects and URL objects, where the objects are concatenated to form the text within the paragraph.
"children": [
// Formatted text object
{
"type": "text",
"value": "This is italicized text and ",
"italic": true
},
// URL object
{
"url": "https://example.com",
"title": "Link to example.com",
"type": "link",
"children": [
// Formatted text object that's embedded in the URL object.
{
"type": "text",
"value": "a bolded hyperlink",
"bold": true
}
]
}
]
}
]
}
END_RAW_MD_CONTENT</script>
</div>
</p>
<figure class="figure"><img src="https://cdn.shopify.com/shopifycloud/shopify_dev/assets/apps/custom-data/example-rich-text-formatting-18ef5247078098c71350d2ffa307f18874e1517e19228ad59a98bc911c263011.png" class="lazyload" alt="The rich text editor, showing the words 'This is italicized text and' in italics, and the words 'a bolded hyperlink' as bolded hyperlink to another website." width="641" height="282"></figure>
Refer to the following code samples for examples of the objects that can be used to represent fragments of rich text:
<p>
<div class="react-code-block" data-preset="basic">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar basic-codeblock"></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
</div>
</div>
<script type="text/plain" data-language="json" data-title="Bold and italics">
RAW_MD_CONTENT{
"type": "root",
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": "This text is bolded and italicized.",
// To bold or italicize the text, set the "bold" or "italic" values to true. The default value is false.
"bold": true,
"italic": true
}
]
}
]
}
END_RAW_MD_CONTENT</script>
<script type="text/plain" data-language="json" data-title="Heading">
RAW_MD_CONTENT{
"type": "root",
"children": [
{
"type": "paragraph",
"children": [
{
"type": "heading",
"children": [{
"type": "text",
"value": "This is an H1 heading"
}],
// The heading level
"level": 1
}
]
}
]
}
END_RAW_MD_CONTENT</script>
<script type="text/plain" data-language="json" data-title="Hyperlink">
RAW_MD_CONTENT
{
"type": "root",
"children": [
{
"type": "paragraph",
"children": [
{
"url": "https://example.com",
// The URL title is used for accessibility and SEO purposes.
"title": "Link to example.com",
"type": "link",
// The following array of formatted text represents the text that's visible to the user.
"children": [{
"type": "text",
"value": "This is a hyperlink"
}]
}
]
}
]
}
END_RAW_MD_CONTENT</script>
<script type="text/plain" data-language="json" data-title="Lists">
RAW_MD_CONTENT{
"type": "root",
"children": [
{
// The listType accepts "ordered" or "unordered".
"listType": "ordered",
"type": "list",
"children": [
{
"type": "list-item",
// Each list item holds an array of formatted text.
"children": [{
"type": "text",
"value": "This is the first list item."
}]
},
{
"type": "list-item",
"children": [{
"type": "text",
"value": "This is the second list item."
}]
}
]
}
]
}
END_RAW_MD_CONTENT</script>
</div>
</p>
## Next steps
- Learn how to [manage metafields](/docs/apps/build/custom-data/metafields/manage-metafields) using the GraphQL Admin API.
- Learn how to create [metafield definitions](/docs/apps/build/custom-data/metafields/definitions) to include data validation for metafield values.