Viewing Images on Item Records with SuiteCommerce

This topic applies to

Applies to

SuiteCommerce Web Stores

Item records include the Images sublist, where you can see the list of images associated with each item record.

When the item record is in Edit mode, you can change the Image Alt Text, and you can click on the file name to open the image file record in a new tab. Note that the image can be associated with multiple websites.

Notes on product-image mapping with SuiteCommerce:

  • You can have different image size configurations on different sites. For example, you can use a medium sized rectangle for images on site A, and a large rectangle on site B.

  • You define the Image Size ID in website templates. This sublist shows the images associated with the item. The Image Size ID is not applicable to the information shown on this list.

  • Multiple sites can share one image folder, or you can create different image folders for each site.

  • One image can match multiple items or multiple images can match one item, based on how you name the image file.

Setting Up Multiple Images for an Item

You can configure your SuiteCommerce site to display multiple images for an item in the Product Details Page of your site.

You can configure the Item Option ID that determines what images display in your web store when a user makes an option selection in the PDP. For example, you configure an item option with the ID: customColor to be the selection that triggers an image change. In your web store, a user selects a shirt from your store that offers multiple color options. In the PDP, the user selects blue for the item’s color option. This triggers the image change to display the correct image of a blue shirt.

In the Elbrus release of SCA and later, the image change capability extends to configuring two or more item option IDs. This allows you to configure your images to accurately depict items based on multiple item option selections. For example, you configure two item options with the following IDs: customColor and customSize. When a user selects a shirt in your web store and then selects color: blue (ID: customSize), the image for the shirt changes to display the correct image of a blue shirt. The user then selects size: medium (ID: customSize). The image in the PDP changes again to depict the correct blue, medium shirt.

To configure the multiple-image option for your site:

  1. Determine the Item Option ID you want to use to trigger an image change in the PDP.

  2. Configure the multiImageOption property using the SuiteCommerce Configuration record. See Multi-Image Option Subtab for more information.

    1. In the SuiteCommerce Configuration record, navigate to the Shopping Catalog tab and Multi-Image Option subtab.

    2. Add the ID of the triggering Item Option to the table.

    3. Click Add. Repeat this for every Item Option ID you want to add, as required. Vinson release of SCA and earlier allow only one level of Item Options.

    4. Save the record.

    Note

    If implementing Mont Blanc release of SCA and earlier, you cannot use the SuiteCommerce Configuration record. You must customize SC.Shopping.Configuration.js to configure this property. See Extend Frontend Configuration Files for more information.


  3. Format your images following the same configuration pattern in your image file name format.

    Important

    For the multiple image option feature to work, you must format your image file names to include options that match those of the triggering item option or options. See Renaming Image Files with an Item Identifier for more information.


    For example, if you configured an item option ID for the item color, followed by the ID for the item size, include the item color and size in the file name. Your file name format should look something like this:

    sku_media_blue_small.jpg
    sku_media_blue_medium.jpg
    sku_media_blue_large.jpg
    sku_media_red_small.jpg
    ...