DocsAdminMulti-StorefrontMSF International Enhancements

Product Images (Beta)

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.
  • We may introduce changes to this beta feature without notice.

Using the Catalog features of the Admin API, you can set and query information for product images.

First, add an image to the product for the global store. You can do so using the Create a product image endpoint of the REST Management API.

By default, product images are visible on all storefront channels and locales. To change its visibility, see Product image visibility.

You can change the details of an image that you have added to a product:

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.

Product image visibility

The addedToProduct field indicates the visibility of an image.

Add image visibility

The following example makes a product image visible in a channel locale. To set the image visibility for the global store, don’t include the context field in the input.

Example mutation: Add product image visibility to a channel locale
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
mutation ($input: AddImagesToProductInput!) {
  product {
    addImagesToProduct(input: $input) {
      images {
        edges {
          node {
            id
            # For the global store         
            altText   
            isThumbnail 
            sortOrder  
            urlStandard  
            urlZoom
            addedToProduct
            # For the channel locale
            overrides (context: {channelId: "bc/store/channel/1", locale: "en"} ) {
              edges {
                node {
                  ... on ProductImagesOverridesForChannelLocale {
                    context {
                      channelId
                      locale
                    }
                    altText
                    sortOrder
                    addedToProduct
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
GraphQL variables
{
  "input": {
      "productId": "bc/store/product/111",
      // For the channel locale
      "context": {
        "channelId": "bc/store/channel/1",
        "locale": "en"
      },
      "ids": ["bc/store/productImage/371", "bc/store/productImage/372"]
    }
}

Remove image visibility

The following example makes a product image not visible in a channel locale. To set the image visibility for the global store, don’t include the context field in the input.

Example mutation: Remove product image visibility from a channel locale
mutation ($input: RemoveImagesFromProductInput!) {
  product {
    removeImagesFromProduct(input: $input) {
      images {
        edges {
          node {
            id
            altText
            isThumbnail
            sortOrder
            urlStandard
            urlZoom
            addedToProduct
            overrides(context: { channelId: "bc/store/channel/1", locale: "fr" }) {
              edges {
                node {
                  ... on ProductImagesOverridesForChannelLocale {
                    context {
                      channelId
                      locale
                    }
                    altText
                    sortOrder
                    addedToProduct
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
GraphQL variables
{
  "input": {
    "productId": "bc/store/product/111",
    "context": {
      "channelId": "bc/store/channel/1",
      "locale": "fr"
    },
    "ids": ["bc/store/productImage/371", "bc/store/productImage/372"]
  }
}

Product image information

Set image information

The following example sets product image information for the global store and a channel locale.

Example mutation: Set global product image information
POST https://api.bigcommerce.com/stores/{{STORE_HASH}}/graphql
X-Auth-Token: {{ACCESS_TOKEN}}
Content-Type: application/json
Accept: application/json
mutation ($input: UpdateProductImagePropertiesInput!) {
  product {
    updateProductImageProperties(input: $input) {
      images {
        edges {
          node {
            id         
            altText  
            isThumbnail  
            sortOrder  
            urlStandard 
            urlZoom
            addedToProduct    
            overrides( context: {channelId: "bc/store/channel/1", locale: "en"}) {
              edges {
                node {
                  ... on ProductImagesOverridesForChannelLocale {
                    context {
                      channelId
                      locale
                    }
                    sortOrder
                    altText
                    isThumbnail
                    addedToProduct
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
GraphQL variables
{
  "input": {
    "productId": "bc/store/product/111",
    "data": [
      {
        "imageId": "bc/store/productImage/371",
        "sortOrder": 2, 
        "altText": "Global alt text", 
        "isThumbnail": true, 
        "overrides": [
          {
            "channelLocaleOverrides": {
              "context": {
                "channelId": "bc/store/channel/1", 
                "locale": "en"
              },
              "data": {
                "sortOrder": 1, 
                "altText": "Channel-specific alt text",
                "isThumbnail": true 
              }
            }
          }
        ]
      },
      {
        "imageId": "bc/store/productImage/372", 
        "sortOrder": 1, 
        "altText": "Global alt text",
        "isThumbnail": false
      }
    ]
  }
}

Remove image information from a locale

The following example removes product image overrides for the channel locale.

Example mutation: Remove product image overrides 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 removeProductImagePropertiesOverrides($input: RemoveProductImagePropertiesOverridesInput!) {
  product {
    removeProductImagePropertiesOverrides(input: $input) {
      images {
        edges {
          node {            
            id        
            altText    
            isThumbnail  
            sortOrder  
            urlStandard 
            urlZoom
            addedToProduct
            overrides ( context: { channelId: "bc/store/channel/1", locale: "en"}) {
              edges {
                node {
                  ... on ProductImagesOverridesForChannelLocale {
                    context {
                      channelId
                      locale
                    }
                    altText
                    isThumbnail
                    sortOrder
                    addedToProduct
                  }
                }
              }
            }
          } 
        }
      }
    }
  }
}
GraphQL variables
{
  "input": {
    "productId": "bc/store/product/111",
    "data": [
      {
        "imageId": "bc/store/productImage/371",
        "contexts": [
          {
            "channelLocaleContext": {
              "channelId": "bc/store/channel/1", 
              "locale": "en"
            }
          }
        ]
      }
    ]
  }
}

Query image information

The following example retrieves product image information. You can retrieve global information for the store and overrides for the channel locale.

You can also use the imagesOverrides node to retrieve overrides. This node will return only the images with overrides in the specific channel locale.

Example query: Get product image information
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") {
      images {
        edges {
          node {
            id        
            altText    
            isThumbnail  
            sortOrder  
            urlStandard 
            urlZoom
            addedToProduct
            overrides( context: {channelId: "bc/store/channel/1", locale: "en"}) {
              edges {
                node {
                  ... on ProductImagesOverridesForChannelLocale {
                    context {
                      channelId
                      locale
                    }
                    altText
                    isThumbnail
                    sortOrder
                    addedToProduct
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}