Product Modifier Options
Using the Catalog features of the Admin API, you can set and query information about a product modifier options, for example, option name and values.
You can perform the following:
- Set global modifier option information for the catalog. Channels inherit these by default.
- Create overrides for a channel locale using the
overridesForLocalemutation. - Remove overrides for a channel locale
- Query modifier option information, those set at the global level and the overrides.
You can also set and remove information for shared modifiers (opens in a new tab). The changes affect all products that you assign to the shared modifier. Querying modifier options returns all modifiers, including shared ones.
For a full schema, see the GraphQL Admin API reference (opens in a new tab).
Input fields
Setting or removing information requires that you specify ID fields in the input. For more information on how to specify ID fields, see Input fields.
Set product modifier options
Set information about a product modifier option for a store or a locale within a storefront channel.
The following mutations let you set the name and values for existing modifier options. You must first create the modifier option for the product through the control panel or the REST Create a product modifier endpoint.
The responses may include all modifier options, including those that are shared. However, to set shared modifier options, use the mutations in Set shared modifier options.
Set product modifier options at the global level
The following example sets global product modifier information for the store, from which channels inherit by default. You can set the modifier name and values.
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
mutation ($input: SetProductModifiersInformationInput!) {
product {
setProductModifiersInformation (input: $input) {
product {
id
modifiers {
edges {
node {
id
displayName
isRequired
isShared
... on CheckboxProductModifier {
checkedByDefault
fieldValue
}
... on TextFieldProductModifier {
defaultValue
}
... on MultilineTextFieldProductModifier {
defaultValue
}
... on NumbersOnlyTextFieldProductModifier {
defaultValueFloat: defaultValue
}
... on DropdownProductModifier {
values {
id
label
isDefault
}
}
... on RadioButtonsProductModifier {
values {
id
label
isDefault
}
}
... on RectangleListProductModifier {
values {
id
label
isDefault
}
}
... on SwatchProductModifier {
values {
id
label
isDefault
}
}
}
}
}
}
}
}
}{
"input": {
"productId": "bc/store/product/111",
"data": {
"modifiers": [
{
"modifierId": "bc/store/productModifier/121",
"data": {
"rectangleList": {
"displayName": "Holiday Theme",
"values": [
{
"valueId": "bc/store/productModifierValue/113",
"label": "Birthday"
},
{
"valueId": "bc/store/productModifierValue/114",
"label": "Christmas"
}
]
}
}
}
]
}
}
}Set product modifier options for a locale
The following example sets product modifier option information for the locale within the specified storefront channel. These will override global store information. You can set the modifier option name and values.
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
mutation ($input: SetProductModifiersInformationInput!) {
product {
setProductModifiersInformation (input: $input) {
product {
id
modifiers {
edges {
node {
id
displayName
... on CheckboxProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
fieldValue
}
}
... on TextFieldProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
defaultValue
}
}
... on MultilineTextFieldProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
defaultValue
}
}
... on NumbersOnlyTextFieldProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
defaultValueFloat: defaultValue
}
}
... on DropdownProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
values {
id
label
}
}
}
... on RadioButtonsProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
values {
id
label
}
}
}
... on RectangleListProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
values {
id
label
}
}
}
... on SwatchProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
values {
id
label
}
}
}
... on FileUploadProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
}
}
... on DateFieldProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr"}) {
displayName
}
}
}
}
}
}
}
}
}{
"input": {
"productId": "bc/store/product/111",
"localeContext": {
"channelId": "bc/store/channel/2",
"locale": "fr"
},
"data": {
"modifiers": [
{
"modifierId": "bc/store/productModifier/121",
"data": {
"rectangleList": {
"displayName": "Thème de vacances",
"values": [
{
"valueId": "bc/store/productModifierValue/113",
"label": "Anniversaire"
},
{
"valueId": "bc/store/productModifierValue/114",
"label": "Noël"
}
]
}
}
}
]
}
}
}Remove product modifier options for a locale
The following example removes product modifier option information for the locale within the specified storefront channel.
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
mutation ($input: RemoveProductModifiersOverridesInput!) {
product {
removeProductModifiersOverrides (input: $input) {
product {
id
modifiers {
edges {
node {
id
displayName
}
}
}
}
}
}
}{
"input": {
"productId": "bc/store/product/111",
"localeContext": {
"locale": "fr",
"channelId": "bc/store/channel/2"
},
"data": {
"modifiers": [
{
"modifierId": "bc/store/productModifier/118",
"data": {
"checkbox": {
"fields": [
"CHECKBOX_PRODUCT_MODIFIER_DISPLAY_NAME_FIELD"
]
}
}
}
]
}
}
}Set shared modifier options
You can set information about a shared modifier option for a store or a locale within a storefront channel. You must first create the shared modifier options through the control panel. Changing a shared modifier option affects all products that you assign to the shared modifier option. You cannot customize shared modifier options on a product level.
The following mutations let you set the name and values for existing shared modifiers.
Set shared modifier options at the global level
The following example sets global shared modifier information for the store, from which channels inherit by default. You can set the name and values for existing modifiers.
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
mutation ($input: SetSharedProductModifiersInformationInput!) {
sharedProductModifiers {
setSharedProductModifiersInformation (input: $input) {
sharedProductModifiers {
id
}
}
}
}{
"input": {
"data": {
"modifiers": [
{
"modifierId": "bc/store/sharedProductModifier/2",
"data": {
"rectangleList": {
"displayName": "Button type",
"values": [
{
"valueId": "bc/store/sharedProductModifierValue/107",
"label": "Large buttons"
},
{
"valueId": "bc/store/sharedProductModifierValue/108",
"label": "Small buttons"
}
]
}
}
}
]
}
}
}Set shared modifier options for a locale
The following example sets shared modifier information for the locale within the specified storefront channel. These override global store information. You can set the name and values for existing modifiers.
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
mutation ($input: SetSharedProductModifiersInformationInput!) {
sharedProductModifiers {
setSharedProductModifiersInformation (input: $input) {
sharedProductModifiers {
id
}
}
}
}{
"input": {
"localeContext": {
"channelId": "bc/store/channel/2",
"locale": "fr"
},
"data": {
"modifiers": [
{
"modifierId": "bc/store/sharedProductModifier/2",
"data": {
"rectangleList": {
"displayName": "bouton",
"values": [
{
"valueId": "bc/store/sharedProductModifierValue/107",
"label": "grande"
},
{
"valueId": "bc/store/sharedProductModifierValue/108",
"label": "petite"
}
]
}
}
}
]
}
}
}Remove shared modifier options for a locale
The following example removes shared modifier option information for the locale within the specified storefront channel.
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
mutation ($input: RemoveSharedProductModifiersOverridesInput!) {
sharedProductModifiers {
removeSharedProductModifiersOverrides (input: $input) {
sharedProductModifiers {
id
}
}
}
}{
"input": {
"localeContext": {
"channelId": "bc/store/channel/2",
"locale": "fr"
},
"data": {
"modifiers": [
{
"modifierId": "bc/store/sharedProductModifier/1",
"data": {
"textField": {
"fields": ["SHARED_TEXT_FIELD_PRODUCT_MODIFIER_DEFAULT_VALUE_FIELD"]
}
}
}
]
}
}
}Query modifier options
The following example retrieves modifier information. You can retrieve global information for the store and overrides for the locale within the specified storefront channel. The query returns all modifier options, including those that are shared.
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
query {
store {
product (id: "bc/store/product/111") {
id
modifiers (first: 10) {
edges {
node {
__typename
id
displayName
isShared
isRequired
... on CheckboxProductModifier {
checkedByDefault
fieldValue
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
fieldValue
}
}
... on TextFieldProductModifier {
defaultValue
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
defaultValue
}
}
... on MultilineTextFieldProductModifier {
defaultValue
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
defaultValue
}
}
... on NumbersOnlyTextFieldProductModifier {
defaultValueFloat: defaultValue
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
defaultValueFloat: defaultValue
}
}
... on DropdownProductModifier {
values {
id
label
isDefault
}
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
values {
id
label
}
}
}
... on RadioButtonsProductModifier {
values {
id
label
isDefault
}
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
values {
id
label
}
}
}
... on RectangleListProductModifier {
values {
id
label
isDefault
}
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
values {
id
label
}
}
}
... on SwatchProductModifier {
values {
id
label
isDefault
}
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
values {
id
label
}
}
}
... on FileUploadProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
}
}
... on DateFieldProductModifier {
overridesForLocale (localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
}
}
}
}
}
}
}
}
You can retrieve overrides for multiple locales in a channel, as shown in the following example:
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
query {
store {
product (id: "bc/store/product/111") {
id
modifiers (first: 1) {
edges {
node {
__typename
id
displayName
isShared
isRequired
// modifier values for rectangle List product modifiers
... on RectangleListProductModifier {
// global values for the store
values {
id
label
isDefault
}
// overrides for the UK locale in channel 2
uk: overridesForLocale(localeContext: { channelId: "bc/store/channel/2", locale: "uk" }) {
displayName
values {
id
label
}
}
// overrides for the France locale in channel 2
fr: overridesForLocale(localeContext: { channelId: "bc/store/channel/2", locale: "fr" }) {
displayName
values {
id
label
}
}
}
}
}
}
}
}
}