ProductSet and sorting of option values

GraphQL Admin API Troubleshooting
1

Hi

Using the mutation productSet for the creation of a product, I can define the attribute names and their values within productOptions through a JSONArray. Unfortunately, however, the order of the declared values is not maintained in the frontend.

{
    "input": {
        "productType": "Snowboard",
        "title": "My super product",
        "productOptions": [
            {
                "name": "Color",
                "values": [
                    {
                        "name": "Black"
                    },
                    {
                        "name": "Yellow"
                    },
                    {
                        "name": "Orange"
                    },
                    {
                        "name": "Red"
                    }
                ]
            },
            {
                "name": "Size",
                "values": [
                    {
                        "name": "Large"
                    },
                    {
                        "name": "Medium"
                    },
                    {
                        "name": "Small"
                    }
                ]
            }
        ],
        "variants": [
            {
                "optionValues": [
                    {
                        "name": "Black",
                        "optionName": "Color"
                    },
                    {
                        "name": "Small",
                        "optionName": "Size"
                    }
                ],
                "price": "6.00",
                "sku": "000001"
            },
            {
                "optionValues": [
                    {
                        "name": "Red",
                        "optionName": "Color"
                    },
                    {
                        "name": "Large",
                        "optionName": "Size"
                    }
                ],
                "price": "4.00",
                "sku": "000002"
            },
            {
                "optionValues": [
                    {
                        "name": "Yellow",
                        "optionName": "Color"
                    },
                    {
                        "name": "Small",
                        "optionName": "Size"
                    }
                ],
                "price": "8.00",
                "sku": "000003"
            },
            {
                "optionValues": [
                    {
                        "name": "Orange",
                        "optionName": "Color"
                    },
                    {
                        "name": "Medium",
                        "optionName": "Size"
                    }
                ],
                "price": "9.00",
                "sku": "000004"
            }
        ],
        "vendor": "My Vendor"
    },
    "synchronous": false
}

I tried using the mutation productOptionsReorder, which affects the backend arrangement, but not the frontend, where the order remains alphabetical.

Any ideas or advice on how to solve this issue?

All the best.

1 Like
2

Could you please try using the position field in the productOptions and variants to manage the order of options and variants?

screenshot_01_24-11-18_14:57:04
screenshot_01_24-11-18_14:57:04547×505 31 KB

For more details, please refer to the following link: Shopify API Documentation - OptionSetInput Position Field.

3

Hi @AMaL

With position, we can manage the order of attributes, not their values.

4

I tried the product option values reorder API, and it worked for me. Please see the steps I followed.

Step 1: Create a product using the below Query.

mutation createProductAsynchronous($productSet: ProductSetInput!, $synchronous: Boolean!) {
  productSet(synchronous: $synchronous, input: $productSet) {
    product {
      id
    }
    productSetOperation {
      id
      status
      userErrors {
        code
        field
        message
      }
    }
    userErrors {
      code
      field
      message
    }
  }
}

Variables:

{
    "productSet": {
        "productType": "Snowboard",
        "title": "Demo Product",
        "productOptions": [
            {
                "name": "Color",
                "values": [
                    {
                        "name": "Black"
                    },
                    {
                        "name": "Yellow"
                    },
                    {
                        "name": "Orange"
                    },
                    {
                        "name": "Red"
                    }
                ]
            },
            {
                "name": "Size",
                "values": [
                    {
                        "name": "Large"
                    },
                    {
                        "name": "Medium"
                    },
                    {
                        "name": "Small"
                    }
                ]
            }
        ],
        "variants": [
            {
                "optionValues": [
                    {
                        "name": "Black",
                        "optionName": "Color"
                    },
                    {
                        "name": "Small",
                        "optionName": "Size"
                    }
                ],
                "price": "6.00",
                "sku": "000001"
            },
            {
                "optionValues": [
                    {
                        "name": "Red",
                        "optionName": "Color"
                    },
                    {
                        "name": "Large",
                        "optionName": "Size"
                    }
                ],
                "price": "4.00",
                "sku": "000002"
            },
            {
                "optionValues": [
                    {
                        "name": "Yellow",
                        "optionName": "Color"
                    },
                    {
                        "name": "Small",
                        "optionName": "Size"
                    }
                ],
                "price": "8.00",
                "sku": "000003"
            },
            {
                "optionValues": [
                    {
                        "name": "Orange",
                        "optionName": "Color"
                    },
                    {
                        "name": "Medium",
                        "optionName": "Size"
                    }
                ],
                "price": "9.00",
                "sku": "000004"
            }
        ],
        "vendor": "My Vendor"
    },
    "synchronous": false
}

Output Screenshot:

screenshot_01_24-11-19_07:22:11
screenshot_01_24-11-19_07:22:11718×397 7.21 KB

Step 2: Reorder the option values

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
          }
        }
      }
    }
  }
}

Variables:

{
  "productId": "gid://shopify/Product/7851949162556",
  "options": [
    {
      "name": "Color",
      "values": [
        {
          "name": "Orange"
        },
        {
          "name": "Yellow"
        },
        {
          "name": "Red"
        },
        {
          "name": "Black"
        }
      ]
    },
    {
      "name": "Size",
      "values": [
        {
          "name": "Medium"
        },
      {
          "name": "Large"
      },
      {
          "name": "Small"
        }]
    }
  ]
}

Product ID: Id of the created product.

Output Screenshot:

screenshot_01_24-11-19_07:27:20
screenshot_01_24-11-19_07:27:20625×387 7.09 KB

Note: The reorder reflected in the front-end theme may take a few seconds.

5

Hi, the productSet mutation is used not only to create products but also to keep them updated. What happens if, after performing the reordering, I need to execute a new productSet?

During testing, I noticed that with each productSet, I was once again losing control of the values, so I was forced to always execute the reordering mutation as well. Ideally, it would be best to have only the productSet to execute.

1 Like
6

Using productSet, we can sort option values when creating the product. To achieve this, each variant should include the option values in the desired order, like this:

Product Create Query:

{
  "productSet": {
    "productType": "Snowboard",
    "title": "Demo Product 6",
    "productOptions": [
      {
        "name": "Color",
        "values": [
          {
            "name": "Orange"
          },
          {
            "name": "Red"
          },
          {
            "name": "Yellow"
          },
          {
            "name": "Black"
          }
        ]
      },
      {
        "name": "Size",
        "values": [
          {
            "name": "Medium"
          },
          {
            "name": "Small"
          },
          {
            "name": "Large"
          }
        ]
      }
    ],
    "metafields": [
      {
        "key": "title_tag",
        "namespace": "global",
        "type": "single_line_text_field",
        "value": "My super Title"
      }
    ],
    "variants": [
      {
        "optionValues": [
          {
            "name": "Red",
            "optionName": "Color"
          },
          {
            "name": "Large",
            "optionName": "Size"
          }
        ],
        "price": "6.00",
        "sku": "000001"
      },
      {
        "optionValues": [
          {
            "name": "Black",
            "optionName": "Color"
          },
          {
            "name": "Medium",
            "optionName": "Size"
          }
        ],
        "price": "4.00",
        "sku": "000002"
      },
      {
        "optionValues": [
          {
            "name": "Yellow",
            "optionName": "Color"
          },
          {
            "name": "Small",
            "optionName": "Size"
          }
        ],
        "price": "8.00",
        "sku": "000003"
      },
      {
        "optionValues": [
          {
            "name": "Orange",
            "optionName": "Color"
          },
          {
            "name": "Medium",
            "optionName": "Size"
          }
        ],
        "price": "9.00",
        "sku": "000004"
      }
    ],
    "vendor": "My Vendor"
  },
  "synchronous": false
}

This should allow the option values to be sorted according to the specified order during product creation.

For testing, change the option values, create multiple products, and compare the orders.

Variant section from productSet Query:

"variants": [
      {
        "optionValues": [
          {
            "name": "Red",
            "optionName": "Color"
          },
          {
            "name": "Large",
            "optionName": "Size"
          }
        ],
        "price": "6.00",
        "sku": "000001"
      },
      {
        "optionValues": [
          {
            "name": "Black",
            "optionName": "Color"
          },
          {
            "name": "Medium",
            "optionName": "Size"
          }
        ],
        "price": "4.00",
        "sku": "000002"
      },
      {
        "optionValues": [
          {
            "name": "Yellow",
            "optionName": "Color"
          },
          {
            "name": "Small",
            "optionName": "Size"
          }
        ],
        "price": "8.00",
        "sku": "000003"
      },
      {
        "optionValues": [
          {
            "name": "Orange",
            "optionName": "Color"
          },
          {
            "name": "Medium",
            "optionName": "Size"
          }
        ],
        "price": "9.00",
        "sku": "000004"
      }
    ],

Output:

screenshot_01_24-11-19_11:58:16
screenshot_01_24-11-19_11:58:16655×387 14.2 KB

7

I tried as instructed, but I cannot achieve the following sorting:
Color: Black, Orange, Red and Yellow
Size: Small, Medium, Large

8

@Mario_Nee Can you share the graphQL queries and variables?

9

@AMaL here the query

mutation productSet($input: ProductSetInput!, $synchronous: Boolean!) {
  productSet(synchronous: $synchronous, input: $input) {
    userErrors {
      field
      message
    }
  }
}

and variables

{
    "input": {
        "productOptions": [
            {
                "name": "Color",
                "values": [
                    {
                        "name": "Black"
                    },
                    {
                        "name": "Orange"
                    },
                    {
                        "name": "Red"
                    },
                    {
                        "name": "Yellow"
                    }
                ]
            },
            {
                "name": "Size",
                "values": [
                    {
                        "name": "Small"
                    },
                    {
                        "name": "Medium"
                    },
                    {
                        "name": "Large"
                    }
                ]
            }
        ],
        "productType": "Snowboard",
        "title": "Demo Product",
        "variants": [
            {
                "optionValues": [
                    {
                        "name": "Red",
                        "optionName": "Color"
                    },
                    {
                        "name": "Large",
                        "optionName": "Size"
                    }
                ],
                "price": "6.00",
                "sku": "000001"
            },
            {
                "optionValues": [
                    {
                        "name": "Black",
                        "optionName": "Color"
                    },
                    {
                        "name": "Medium",
                        "optionName": "Size"
                    }
                ],
                "price": "4.00",
                "sku": "000002"
            },
            {
                "optionValues": [
                    {
                        "name": "Yellow",
                        "optionName": "Color"
                    },
                    {
                        "name": "Small",
                        "optionName": "Size"
                    }
                ],
                "price": "8.00",
                "sku": "000003"
            },
            {
                "optionValues": [
                    {
                        "name": "Orange",
                        "optionName": "Color"
                    },
                    {
                        "name": "Medium",
                        "optionName": "Size"
                    }
                ],
                "price": "9.00",
                "sku": "000004"
            }
        ],
        "vendor": "My Vendor"
    },
    "synchronous": false
}