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">
{
"data": {
"product": {
"metafield": {
"namespace": "custom",
"key": "ingredients",
"value": "oat milk,\nsugar,\nchia seeds",
"type": "multi_line_text_field",
"definition": {
"name": "Ingredients",
"ownerType": "PRODUCT"
}
}
}
}
}
</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.
## 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">
{
"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
}
]
}
]
}
]
}
</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">
{
"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
}
]
}
]
}
</script>
<script type="text/plain" data-language="json" data-title="Heading">
{
"type": "root",
"children": [
{
"type": "paragraph",
"children": [
{
"type": "heading",
"children": [{
"type": "text",
"value": "This is an H1 heading"
}],
// The heading level
"level": 1
}
]
}
]
}
</script>
<script type="text/plain" data-language="json" data-title="Hyperlink">
{
"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"
}]
}
]
}
]
}
</script>
<script type="text/plain" data-language="json" data-title="Lists">
{
"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."
}]
}
]
}
]
}
</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.