---
schema_version: "1"
id: a0506507cd6385fb88fdc09211084daa3a820ad4de9718b5e5e945c3b8c43746
title: Assign Images to Products in B2C Commerce
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/cc/264-0-0/b2c_managing_images.md
canonical_url: https://help.salesforce.com/s/articleView?id=cc.b2c_managing_images.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 5936fec4de8ceed929bfbf5822a86cbd702f69c0b6e41611ceecfbca261743b9
description: In B2C Commerce, attach an image to a product so the storefront can show it. Assign images on the base product, and a variation product uses those images.
products:
  - Commerce
  - B2C Commerce
release: "264"
---
# Assign Images to Products in B2C Commerce

In B2C Commerce, attach an image to a product so the storefront can show it. Assign images on the base product, and a variation product uses those images.

Before you start, define the variation attributes for the base product on the product Variations tab. This task does not create those attributes. See [Variation Attribute Values](https://help.salesforce.com/s/articleView?id=cc.b2c_variation_attribute_values.htm&release=264.0.0&type=5 "Define B2C Commerce variation products for a base product by creating a variation attribute.").

[Which Salesforce Commerce Product Do I Have?](https://help.salesforce.com/s/articleView?id=commerce.comm_what_product.htm&language=en_US)

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/images/icon_note.png)

Note You can also access images programmatically. See [URLUtils](https://developer.salesforce.com/docs/commerce/b2c-commerce/references/b2c-script-api/dw.web.URLUtils.html) and [MediaFile](https://developer.salesforce.com/docs/commerce/b2c-commerce/references/b2c-script-api/dw.content.MediaFile.html).

1. Click App Launcher ![App Launcher](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/cc/b2c_merchandiser_administrator/images/appLauncher.png), and then select **Merchant Tools** | **Products and Catalogs** | **Products**.
2. On the Products page, search for and open a product.
3. On the Product page General tab, click **Lock**.
    
    Lock a product if you have full permission or restricted permission (permission restricted to the storefront catalog of the currently selected site). This site permission is independent from the selected locale. You can't lock a product when you have no permission at all. See [Configure Product and Content Locking for B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_configuring_product_and_content_locking.htm&release=264.0.0&type=5 "Define the time (in minutes) for when products or content are locked while editing. During this time, other users can't edit the product record or content asset. The lock (applied before product editing) is released after this time.").
4. Scroll down the page and click the **Edit** button in the Images section.
    
    The Images window opens. The Images window has three panes: Image Manager, Images, and File Browser. The Images window shows how images are structured for the product. A folder shows up to 1000 items. If it contains more, Business Manager says to use the filters above. The control is labeled **Filter**.
    
    The Image Manager pane shows information based on each product type.
    
    - Standard product. Shows two levels: view types and images.
    - Base or variation product. Shows four basic levels: variation values, variation attributes, view types, and images, with multiple levels of variation attributes and values.
5. For a standard product, skip the steps that select a product attribute or open the Variation Attributes window, and go directly to the step that assigns images. In the Image Manager pane, select a product attribute.
    
    The images assigned to the selected product type attribute appear in the Images pane.
6. In the Image Manager pane, click **Edit** to open the Variation Attributes window.
7. On the Variation Attributes window, select one or more available variation attributes and click **OK**.
    
    This selection chooses which variation attributes group images, and the attributes you select here override any catalog default for this product. See [Image View Types and Variants in B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_understanding_view_types.htm&release=264.0.0&type=5 "Use B2C Commerce view types to group product images by usage context, such as large, medium, small, and swatch, and assign different images to each product variation."). The Image Manager pane reappears, showing the new variation attributes.
8. Assign the images.
    1. In the Image Manager pane:
        
        - For a standard product, select the product.
        - For a base product, select the base product or a variation value, such as red. That is where the image is assigned. The images assigned to the selected product attribute appear in the Images pane.
    2. On the File Browser pane, locate an image.
        
        The File Browser pane appears only when the catalog image location is internal. The root directory shown in the file browser points to the catalog's static content folder as specified by catalog image settings base path. Click the open icon **(>>)** to open the File Browser pane.
    3. For an internal image:
        
        1. If the image file isn't listed on the File Browser pane, upload it: Right-click the folder you want to upload to, click **Add...**, and then select the file. The name of the image appears with a box icon. Click **Upload**. The file uploads to the folder you right-clicked. Make sure the uploaded file name has a green check mark, which means the upload succeeded.
        2. Drag the file from the File Browser onto a view type in the Images pane. See [Image View Types and Variants in B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_understanding_view_types.htm&release=264.0.0&type=5 "Use B2C Commerce view types to group product images by usage context, such as large, medium, small, and swatch, and assign different images to each product variation."). Large, medium, small, and swatch are the default view types. A catalog can also include others, such as Hi-res or Other.
    4. For an external image, do not upload a file. Click the image placeholder for a view type. In the Path field, enter only the relative file path after the host, such as `bar/your_image.gif`.
    5. To replace an image, click the delete icon on the existing image, and then assign another image.
        
        Deleting the icon removes the image from the view only. It doesn't delete the file from the File Browser. The change takes effect when you click **Save**.
9. In the Images pane, specify the language to use with the Alt and Title fields.
10. In the Images pane, specify these fields.
    
    **Path**. This field is mandatory and can't be null. B2C Commerce doesn't check if the path is valid. For an external image, the path is the relative path on the external host. For an internal image, the path is the file in the catalog image directory.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-cc-b2c_merchandiser_administrator-264-0-0-production-enus/ea76f372-6cfa-42a6-8e7c-05c6df7abed8/images/icon_note.png)
    
    Note Configure a product image URL with a path up to 1800 characters. Together with the host path configured with a catalog's image settings, you can specify image URLs with up to 2056 characters. If you try to configure a longer path, Business Manager shows a warning and doesn't let you save the image settings of that product.
    
    **Alt**. Enter the localizable alternative text. Use the **Select Language** field to switch between the localized values.
    
    **Title**. Enter the localizable title. Use the **Select Language** field to switch between the localized values.
11. Click **Save**.
    
    An internal image file is stored in the catalog static content directory, which is the catalog's own static content folder. Copy that directory to the storefront with the replication task: **Replication Tasks > Sites > Catalogs > (Your Catalog)**. See [Image Storage Locations in B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_demandware_image_storage.htm&release=264.0.0&type=5 "B2C Commerce stores images in three static content locations, depending on image type."). An external image assignment stores a URL. It is not a file in that directory, so there is no image file to replicate.

See Also

- [Image View Types and Variants in B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_understanding_view_types.htm&release=264.0.0&type=5 "Use B2C Commerce view types to group product images by usage context, such as large, medium, small, and swatch, and assign different images to each product variation.")
- [Configure Catalog Image Settings in B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_configuring_variation_attributes_for_image_assignment.htm&release=264.0.0&type=5 "In B2C Commerce, configure catalog image settings only when the settings created with the catalog differ from what you want, or to add a catalog-level variation attribute. Default alt text and title fill in only when an image has none of its own, so you leave them unchanged before you assign images.")
- [Configure Product and Content Locking for B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_configuring_product_and_content_locking.htm&release=264.0.0&type=5 "Define the time (in minutes) for when products or content are locked while editing. During this time, other users can't edit the product record or content asset. The lock (applied before product editing) is released after this time.")
- [Image Storage Locations in B2C Commerce](https://help.salesforce.com/s/articleView?id=cc.b2c_demandware_image_storage.htm&release=264.0.0&type=5 "B2C Commerce stores images in three static content locations, depending on image type.")