Presentation hints

Presentation hints allow merchants to define how they want certain metafields to render on their online store and other channels. When a metafield definition includes a presentation hint, you should use it to render the metafield value correctly in your app or on the online store.

Planned presentation options
Type Planned presentation options Example
Number - Decimal Precision (set how many decimal places are shown)
        "presentation": [
          {
            "type": "decimal_places"
            "value": 2
          }
        ]
      
Measurements (Volume, Weight, and Dimension) Precision (set how many decimal places are shown)
        "presentation": [
          {
            "type": "decimal_places"
            "value": 2
          }
        ]
      
Date Supports http://www.strfti.me/
        "presentation": [
          {
            "type": "strftime_format"
            "value": "%B %d, %Y"
          }
        ]
      
Date and time Supports http://www.strfti.me/
        "presentation": [
          {
            "type": "strftime_format"
            "value": "%B %d, %Y, %H:%M"
          }
        ]
      
True / False Labels (allow merchants to associate a label with the values of true and false)
        "presentation": [
          {
            "type": "true"
            "value": "Contains nuts"
          },
          {
            "type": "false"
            "value": "Nut-free"
          }
        ]
      
Color Labels (allow merchants to enter a Hex code and associated label)
        "presentation": [
          {
            "type": "#E3242B"
            "value": "Rose petal red"
          },
          {
            "type": "#1122FF"
            "value": "Ocean blue"
          },
          {
            "type": "#03FF22"
            "value": "Eco green"
          },
          {
            "type": "#050505"
            "value": "Midnight black"
          }
        ]
      
Single line text None None
Multi line text None None
URL None None
Number - Integer None None
File None None
Reference None None
JSON None None

Retrieving presentation hints

In this scenario, you have a product called “Amazing Frozen Pizza” and you've created metafields that store the size of the pizza and the pizza's expiration date. You want to display those values on the storefront according to each metafield's type and presentation hint. The following example shows how to retrieve the value, type, and presentation hint for each metafield using the Storefront API.

POST /api/unstable/graphql.json

JSON response