DocsAdminMulti-StorefrontMSF International Enhancements

Product Modifier Options

International Enhancements for Multi-Storefront

This feature is currently available for Enterprise stores and Partner Sandboxes. If the feature is not working as expected, please contact technical support, as the feature likely needs to be enabled for the individual store. To become an enterprise customer, contact your BigCommerce Customer Service Manager or our support team.

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:

You can also set and remove information for shared modifiers. 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.

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.

Example mutation: Set product modifier options at the global level
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
                }
              }
            }
          }
        }
      }
    }
  }
}
GraphQL variables
{
  "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.

Example mutation: Set product modifier options for a locale
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
                }
              }
            }
          }
        }
      }
    }
  }
}
GraphQL variables
{
  "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.

Example mutation: Remove product modifier options for a locale
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
            }
          }   
        }
      }
    }
  }
}
GraphQL variables
{
  "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.

Example mutation: Set shared modifier options at the global level
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
      }
    }
  }
}
GraphQL variables
{
  "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.

Example mutation: Set shared modifier options for a locale
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
      }
    }
  }
}
GraphQL variables
{
  "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.

Example mutation: Remove shared modifier options for a locale
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
      }
    }
  }
}
GraphQL variables
{
  "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.

Example query: Get modifier options
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:

Example query: Get modifier options
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
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}