productOptionsReorder - admin-graphql - MUTATION

Version: 2024-07

Description:

Reorders options and option values on a product, causing product variants to alter their position. Options order take precedence over option values order. Depending on the existing product variants, some input orders might not be achieved. Example: Existing product variants: ["Red / Small", "Green / Medium", "Blue / Small"]. New order: [ { name: "Size", values: [{ name: "Small" }, { name: "Medium" }], name: "Color", values: [{ name: "Green" }, { name: "Red" }, { name: "Blue" }] } ]. Description: Variants with "Green" value are expected to appear before variants with "Red" and "Blue" values. However, "Size" option appears before "Color". Therefore, output will be: ["Small / "Red", "Small / Blue", "Medium / Green"].

Access Scopes

`write_products` access scope. Also: The user must have a permission to update product variants.

Arguments

• options: OptionReorderInput! - Options to reorder on the product.
• productId: ID! - The ID of the product to update.

Returns

• product: Product The updated product object.
• userErrors: ProductOptionsReorderUserError! The list of errors that occurred from executing the mutation.

Examples

• Reorder options and change the order of option values

          Curl example: "curl -X POST \\\nhttps://your-development-store.myshopify.com/admin/api/2024-07/graphql.json \\\n-H 'Content-Type: application/json' \\\n-H 'X-Shopify-Access-Token: {access_token}' \\\n-d '{\n\"query\": \"mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) { productOptionsReorder(options: $options, productId: $productId) { userErrors { field message code } product { id options { id name values position optionValues { id name hasVariants } } variants(first: 5) { nodes { id title selectedOptions { name value } } } } } }\",\n \"variables\": {\n    \"productId\": \"gid://shopify/Product/1072481054\",\n    \"options\": [\n      {\n        \"name\": \"Color\",\n        \"values\": [\n          {\n            \"name\": \"Green\"\n          },\n          {\n            \"name\": \"Blue\"\n          },\n          {\n            \"name\": \"Red\"\n          }\n        ]\n      },\n      {\n        \"name\": \"Size\"\n      }\n    ]\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n      productOptionsReorder(options: $options, productId: $productId) {\n        userErrors {\n          field\n          message\n          code\n        }\n        product {\n          id\n          options {\n            id\n            name\n            values\n            position\n            optionValues {\n              id\n              name\n              hasVariants\n            }\n          }\n          variants(first: 5) {\n            nodes {\n              id\n              title\n              selectedOptions {\n                name\n                value\n              }\n            }\n          }\n        }\n      }\n    }`,\n    \"variables\": {\n      \"productId\": \"gid://shopify/Product/1072481054\",\n      \"options\": [\n        {\n          \"name\": \"Color\",\n          \"values\": [\n            {\n              \"name\": \"Green\"\n            },\n            {\n              \"name\": \"Blue\"\n            },\n            {\n              \"name\": \"Red\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Size\"\n        }\n      ]\n    },\n  },\n});\n"
          Ruby example: "session = ShopifyAPI::Auth::Session.new(\n  shop: \"your-development-store.myshopify.com\",\n  access_token: access_token\n)\nclient = ShopifyAPI::Clients::Graphql::Admin.new(\n  session: session\n)\n\nquery = <<~QUERY\n  mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n    productOptionsReorder(options: $options, productId: $productId) {\n      userErrors {\n        field\n        message\n        code\n      }\n      product {\n        id\n        options {\n          id\n          name\n          values\n          position\n          optionValues {\n            id\n            name\n            hasVariants\n          }\n        }\n        variants(first: 5) {\n          nodes {\n            id\n            title\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"productId\": \"gid://shopify/Product/1072481054\",\n  \"options\": [{\"name\"=>\"Color\", \"values\"=>[{\"name\"=>\"Green\"}, {\"name\"=>\"Blue\"}, {\"name\"=>\"Red\"}]}, {\"name\"=>\"Size\"}]\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = <<<QUERY\n  mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n    productOptionsReorder(options: $options, productId: $productId) {\n      userErrors {\n        field\n        message\n        code\n      }\n      product {\n        id\n        options {\n          id\n          name\n          values\n          position\n          optionValues {\n            id\n            name\n            hasVariants\n          }\n        }\n        variants(first: 5) {\n          nodes {\n            id\n            title\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\nQUERY;\n\n$variables = [\n  \"productId\" => \"gid://shopify/Product/1072481054\",\n  \"options\" => [{\"name\"=>\"Color\", \"values\"=>[{\"name\"=>\"Green\"}, {\"name\"=>\"Blue\"}, {\"name\"=>\"Red\"}]}, {\"name\"=>\"Size\"}],\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n    productOptionsReorder(options: $options, productId: $productId) {\n      userErrors {\n        field\n        message\n        code\n      }\n      product {\n        id\n        options {\n          id\n          name\n          values\n          position\n          optionValues {\n            id\n            name\n            hasVariants\n          }\n        }\n        variants(first: 5) {\n          nodes {\n            id\n            title\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"productId\": \"gid://shopify/Product/1072481054\",\n      \"options\": [\n        {\n          \"name\": \"Color\",\n          \"values\": [\n            {\n              \"name\": \"Green\"\n            },\n            {\n              \"name\": \"Blue\"\n            },\n            {\n              \"name\": \"Red\"\n            }\n          ]\n        },\n        {\n          \"name\": \"Size\"\n        }\n      ]\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n  productOptionsReorder(options: $options, productId: $productId) {\n    userErrors {\n      field\n      message\n      code\n    }\n    product {\n      id\n      options {\n        id\n        name\n        values\n        position\n        optionValues {\n          id\n          name\n          hasVariants\n        }\n      }\n      variants(first: 5) {\n        nodes {\n          id\n          title\n          selectedOptions {\n            name\n            value\n          }\n        }\n      }\n    }\n  }\n}"
        

  input: {
    "productId": "gid://shopify/Product/1072481054",
    "options": [
      {
        "name": "Color",
        "values": [
          {
            "name": "Green"
          },
          {
            "name": "Blue"
          },
          {
            "name": "Red"
          }
        ]
      },
      {
        "name": "Size"
      }
    ]
  }

  response: {
    "data": {
      "productOptionsReorder": {
        "userErrors": [],
        "product": {
          "id": "gid://shopify/Product/1072481054",
          "options": [
            {
              "id": "gid://shopify/ProductOption/1064576509",
              "name": "Color",
              "values": [
                "Green",
                "Blue",
                "Red"
              ],
              "position": 1,
              "optionValues": [
                {
                  "name": "Green",
                  "hasVariants": true
                },
                {
                  "name": "Blue",
                  "hasVariants": true
                },
                {
                  "name": "Red",
                  "hasVariants": true
                }
              ]
            },
            {
              "id": "gid://shopify/ProductOption/1064576508",
              "name": "Size",
              "values": [
                "L",
                "S",
                "M"
              ],
              "position": 2,
              "optionValues": [
                {
                  "name": "L",
                  "hasVariants": true
                },
                {
                  "name": "S",
                  "hasVariants": true
                },
                {
                  "name": "M",
                  "hasVariants": true
                }
              ]
            }
          ],
          "variants": {
            "nodes": [
              {
                "id": "gid://shopify/ProductVariant/1070325063",
                "title": "Green / L",
                "selectedOptions": [
                  {
                    "name": "Color",
                    "value": "Green"
                  },
                  {
                    "name": "Size",
                    "value": "L"
                  }
                ]
              },
              {
                "id": "gid://shopify/ProductVariant/1070325061",
                "title": "Blue / S",
                "selectedOptions": [
                  {
                    "name": "Color",
                    "value": "Blue"
                  },
                  {
                    "name": "Size",
                    "value": "S"
                  }
                ]
              },
              {
                "id": "gid://shopify/ProductVariant/1070325062",
                "title": "Red / M",
                "selectedOptions": [
                  {
                    "name": "Color",
                    "value": "Red"
                  },
                  {
                    "name": "Size",
                    "value": "M"
                  }
                ]
              }
            ]
          }
        }
      }
    }
  }

  Trying to reorder option values with any value missing in the input returns an error

          Curl example: "curl -X POST \\\nhttps://your-development-store.myshopify.com/admin/api/2024-07/graphql.json \\\n-H 'Content-Type: application/json' \\\n-H 'X-Shopify-Access-Token: {access_token}' \\\n-d '{\n\"query\": \"mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) { productOptionsReorder(options: $options, productId: $productId) { userErrors { field message code } product { id options { id name values position optionValues { id name hasVariants } } variants(first: 5) { nodes { id title selectedOptions { name value } } } } } }\",\n \"variables\": {\n    \"productId\": \"gid://shopify/Product/20995642\",\n    \"options\": [\n      {\n        \"name\": \"Title\",\n        \"values\": [\n          {\n            \"name\": \"158cm\"\n          },\n          {\n            \"name\": \"151cm\"\n          }\n        ]\n      }\n    ]\n  }\n}'\n"
          Node example: "const client = new shopify.clients.Graphql({session});\nconst data = await client.query({\n  data: {\n    \"query\": `mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n      productOptionsReorder(options: $options, productId: $productId) {\n        userErrors {\n          field\n          message\n          code\n        }\n        product {\n          id\n          options {\n            id\n            name\n            values\n            position\n            optionValues {\n              id\n              name\n              hasVariants\n            }\n          }\n          variants(first: 5) {\n            nodes {\n              id\n              title\n              selectedOptions {\n                name\n                value\n              }\n            }\n          }\n        }\n      }\n    }`,\n    \"variables\": {\n      \"productId\": \"gid://shopify/Product/20995642\",\n      \"options\": [\n        {\n          \"name\": \"Title\",\n          \"values\": [\n            {\n              \"name\": \"158cm\"\n            },\n            {\n              \"name\": \"151cm\"\n            }\n          ]\n        }\n      ]\n    },\n  },\n});\n"
          Ruby example: "session = ShopifyAPI::Auth::Session.new(\n  shop: \"your-development-store.myshopify.com\",\n  access_token: access_token\n)\nclient = ShopifyAPI::Clients::Graphql::Admin.new(\n  session: session\n)\n\nquery = <<~QUERY\n  mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n    productOptionsReorder(options: $options, productId: $productId) {\n      userErrors {\n        field\n        message\n        code\n      }\n      product {\n        id\n        options {\n          id\n          name\n          values\n          position\n          optionValues {\n            id\n            name\n            hasVariants\n          }\n        }\n        variants(first: 5) {\n          nodes {\n            id\n            title\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\nQUERY\n\nvariables = {\n  \"productId\": \"gid://shopify/Product/20995642\",\n  \"options\": [{\"name\"=>\"Title\", \"values\"=>[{\"name\"=>\"158cm\"}, {\"name\"=>\"151cm\"}]}]\n}\n\nresponse = client.query(query: query, variables: variables)\n"
          PHP example: "use Shopify\\Clients\\Graphql;\n\n$client = new Graphql(\"your-development-store.myshopify.com\", $accessToken);\n$query = <<<QUERY\n  mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n    productOptionsReorder(options: $options, productId: $productId) {\n      userErrors {\n        field\n        message\n        code\n      }\n      product {\n        id\n        options {\n          id\n          name\n          values\n          position\n          optionValues {\n            id\n            name\n            hasVariants\n          }\n        }\n        variants(first: 5) {\n          nodes {\n            id\n            title\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\nQUERY;\n\n$variables = [\n  \"productId\" => \"gid://shopify/Product/20995642\",\n  \"options\" => [{\"name\"=>\"Title\", \"values\"=>[{\"name\"=>\"158cm\"}, {\"name\"=>\"151cm\"}]}],\n];\n\n$response = $client->query([\"query\" => $query, \"variables\" => $variables]);\n"
          Remix example: "const { admin } = await authenticate.admin(request);\n\nconst response = await admin.graphql(\n  `#graphql\n  mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n    productOptionsReorder(options: $options, productId: $productId) {\n      userErrors {\n        field\n        message\n        code\n      }\n      product {\n        id\n        options {\n          id\n          name\n          values\n          position\n          optionValues {\n            id\n            name\n            hasVariants\n          }\n        }\n        variants(first: 5) {\n          nodes {\n            id\n            title\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }`,\n  {\n    variables: {\n      \"productId\": \"gid://shopify/Product/20995642\",\n      \"options\": [\n        {\n          \"name\": \"Title\",\n          \"values\": [\n            {\n              \"name\": \"158cm\"\n            },\n            {\n              \"name\": \"151cm\"\n            }\n          ]\n        }\n      ]\n    },\n  },\n);\n\nconst data = await response.json();\n"
          Graphql query: "mutation reorderOptions($options: [OptionReorderInput!]!, $productId: ID!) {\n  productOptionsReorder(options: $options, productId: $productId) {\n    userErrors {\n      field\n      message\n      code\n    }\n    product {\n      id\n      options {\n        id\n        name\n        values\n        position\n        optionValues {\n          id\n          name\n          hasVariants\n        }\n      }\n      variants(first: 5) {\n        nodes {\n          id\n          title\n          selectedOptions {\n            name\n            value\n          }\n        }\n      }\n    }\n  }\n}"
        

  input: {
    "productId": "gid://shopify/Product/20995642",
    "options": [
      {
        "name": "Title",
        "values": [
          {
            "name": "158cm"
          },
          {
            "name": "151cm"
          }
        ]
      }
    ]
  }

  response: {
    "data": {
      "productOptionsReorder": {
        "userErrors": [
          {
            "field": [
              "options"
            ],
            "message": "Missing option value '155cm'.",
            "code": "MISSING_OPTION_VALUE"
          }
        ],
        "product": {
          "id": "gid://shopify/Product/20995642",
          "options": [
            {
              "id": "gid://shopify/ProductOption/328272167",
              "name": "Title",
              "values": [
                "151cm",
                "155cm",
                "158cm"
              ],
              "position": 1,
              "optionValues": [
                {
                  "id": "gid://shopify/ProductOptionValue/141051426",
                  "name": "151cm",
                  "hasVariants": true
                },
                {
                  "id": "gid://shopify/ProductOptionValue/258076414",
                  "name": "155cm",
                  "hasVariants": true
                },
                {
                  "id": "gid://shopify/ProductOptionValue/129596849",
                  "name": "158cm",
                  "hasVariants": true
                }
              ]
            }
          ],
          "variants": {
            "nodes": [
              {
                "id": "gid://shopify/ProductVariant/30322695",
                "title": "151cm",
                "selectedOptions": [
                  {
                    "name": "Title",
                    "value": "151cm"
                  }
                ]
              },
              {
                "id": "gid://shopify/ProductVariant/113711323",
                "title": "155cm",
                "selectedOptions": [
                  {
                    "name": "Title",
                    "value": "155cm"
                  }
                ]
              },
              {
                "id": "gid://shopify/ProductVariant/236948360",
                "title": "158cm",
                "selectedOptions": [
                  {
                    "name": "Title",
                    "value": "158cm"
                  }
                ]
              }
            ]
          }
        }
      }
    }
  }