In this guide, you'll learn how to configure custom images for the SKU selector component. By following these steps, you can display a specific image for each SKU in the selector, different from the default thumbnail.

By default, the SKU selector component uses thumbnail images of the SKU when rendered, as shown below. The component uses images from the SKU's information in the Admin Catalog:

However, you can configure the SKU selector to display a custom image, that is, an image different from the default one used by the SKU. For example:

To display a custom image in the SKU selector, first, you need to upload the image and associate it with the desired SKU:

1. In the VTEX Admin, go to Catalog > Products and SKUs.
2. Find the desired product and click the down arrow to see its SKUs.
3. Click the desired SKU to edit it.
4. In the Media > Images section, click Add and choose one of the options to upload an image:
   • Choose files: Upload images stored on your computer.
   • Add links: Upload images using a URL.
5. Hover over the uploaded image, click the menu icon (⋮), and then click Edit Metadata.
6. In the Label field, enter a unique ID for the image. This label will be used to identify the custom image.
7. Click Save to save your changes.

Now, you must configure your theme to use the custom image in the SKU selector component:

1. In your theme's code, find the sku-selector block.
2. Add the thumbnailImage prop, setting its value to the label you created in the previous step. For example:

Replace LabelId with the exact label you set for your custom image.

After completing this step, your SKU selector will display the new custom image.

By default, the custom image you added will also appear in the main product image gallery. To prevent this behavior, you can hide it by following these steps:

1. In your store theme's code, find the product-images block.
2. Add the hiddenImages prop, setting its value to the same label used for your custom image. For example:

Replace LabelId with the exact label you set for your custom image. All SKUs using a custom image must use the same label value for both thumbnailImage and hiddenImages props.

After completing this step, you'll have a custom image exclusively for your SKU selector, which won't appear in the main product gallery.

To display color variations for SKUs with specific names, you can create an SKU field.

Follow these steps to configure SKU color variations:

1. In the VTEX Admin, go to Catalog > Categories.
2. Click the desired category, then click ACTIONS .
3. From the dropdown menu, select Field (SKU).

4. Click New field and configure each field accordingly. For more details on this, see the instructions on Creating an SKU field.
5. Click Save to create the new field.

Once created, SKU fields can't be deleted, and required fields must be completed for all SKUs in that category, or they may become inactive.

6. In the row of the field you just created, click the down arrow next to the Edit button and select Values.
7. Create a New value or Edit a previously defined value.
8. In the Name field, enter each color value on a new line (for example, Off-white, Blue, Black).
9. Click Save to save your changes.

Learn more about this process in the guide Adding SKU specifications or fields.

Your changes will now be available for SKUs with thumbnail images.