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 (opens in a new tab).
- 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:
- Set product image information for the catalog. You can set global values and overrides for the image information in a channel locale.
- Remove overrides for the product's image in a channel locale. A channel then inherits global values.
- Query product image information, those set at the global level and the overrides.
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.
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.
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
}
}
}
}
}
}
}
}
}
}{
"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.
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
}
}
}
}
}
}
}
}
}
}{
"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.
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
}
}
}
}
}
}
}
}
}
}{
"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.
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
}
}
}
}
}
}
}
}
}
}{
"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.
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
}
}
}
}
}
}
}
}
}
}