Page tree
Skip to end of metadata
Go to start of metadata

This article will describe how to name product images so the CP-Commerce integration will recognize them and sync them to the webstore. It will also go into detail on how to assign multiple images to the same product.

Before you start...

Image Dimensions

We recommend the image dimensions 600 x 600, but as long as the image dimensions are the same across the board, you can use other dimensions as well.

Image File Size

The image's file size should be between 50KB and 200KB.

Images larger than 2MB will NOT be synced.

On Magento 1, the sync did not enforce this limit, but images should be at most 200KB as a general rule.

EXIF Data

EXIF data is how digital cameras can store information about how the picture was taken. One important detail that is stored is the orientation the picture was taken in. The Windows 8 and 10 file explorers and some other programs will recognize it and make the image appear upright, but the actual image is still sideways or upside down. On the web, that orientation is not taken into account and so the image will need to appear upright without it.

Below are guides on how to fix the orientation of your images:

If you only have a few images...
  1. First, check if an image has an orientation.
    1. Upload them here: https://exifdata.com/index.php and the site will list what EXIF data is stored on the image.
      1.  If the orientation is set, you will see it as shown below:
  2. Then, open the images in an image editing program like Adobe Photoshop, Microsoft Paint, or GIMP and save them. Then, once the images are brought up by the sync, they should be upright.
    1. You can confirm the orientation is removed by reuploading it to https://exifdata.com/index.php
If you have several images and are on Windows...
  1. First, check if the images have an orientation.
    1. Create a folder on your desktop and add the images to it.
    2. Open the folder and click View at the top.
    3. Select Details.
    4. To the right, click "Add columns" and then select Choose Columns.
    5. Find Orientation, click the checkbox next to it, and then press OK.
      1. You should now see the orientation:

  2. Next, you can use a batch image processor like BIMP to resave the images without the orientation data. 
    1. Instructions with BIMP
      1. Download GIMP.
      2. Download BIMP.
      3. Open GIMP.
      4. In the top menu, click File and then Batch Image Manipulation.
      5. Under Manipulation Set, click Add and then select Flip or Rotate.
      6. In the menu that opens, just click OK.

      7. Next, click Add Images and then click Add Folders.
      8. Select the folder your images are in and then in the bottom right corner, click Add.
      9. Under Output folder, click the field underneath it.
      10. Select the folder your images are in again and then in the bottom right corner, click OK.
      11. Click Apply. You will see a warning about overwriting the file.
      12. Click the checkbox next to "Always apply this decision" and then click Yes.
        1. After that finishes, the images should now have their orientation set as Normal:
  3. Then, you will want to review the images to make sure they are upright. While you fixed the images that had "Rotate ...", images that are set as "Normal" can still appear rotated. This is because not all cameras will set the orientation (Rotate ...).

    1. Click View at the top of the File Explorer and select Large Icons.

  4. Review your images to make sure they are upright. If any of them are rotated, you will want to open them in an image editing program like Adobe Photoshop, Microsoft Paint, or GIMP, rotate them, and then resave it.


For more information about EXIF data: Why Your Photos Don't Always Appear Correctly Rotated

Step 1: Naming Your Images

Main Product Image

The file name for the main product image should match the Counterpoint item number.  This is the image customers will first see when they arrive on the product landing page.

For example, if you have a product with the item number 12345, the main product image file name should be 12345.jpg.

Special Characters

The following Special Characters in the Item # should be replaced with an underscore (_) in the image name.

  • < (less than)
  • > (greater than)
  • : (colon)
  • ' (single quote)
  • " (double quote)
  • / (forward slash)
  • \ (backslash)
  • | (vertical bar or pipe)
  • ? (question mark)
  • * (asterisk)

For example, item number 123/45 should have an image named 123_45.jpg

Below you can see how the main image looks on the product page:

Alternate Images

Sometimes, you may want to show more than one image for a product such as the back or side of a product:

If you would like to add an alternate image for a product, you will want to add ^[anything] to the end of the image file name. For example, if you wanted to add another image for item 12345, the file name could be 12345^1.jpg or 12345^back.jpg.

To add more, you would just need to add something different after the carrot like 2 or side (12345^2.jpg or 12345^side.jpg).

While you can use words after the carrot, we recommend using numbers for alternate images. This is because the system assigns images to grid dimensions using the same format.

Let's say you had product 12345 and it had a grid value of back. Then the image 12345^back.jpg would get assigned to the back option and it will only show when the customer chooses that option on the product page.

Gridded Products

If you have products with grid dimensions, you can add product images for each color / style / etc. This will allow the customer to see the image for that selection when they choose that option on the product page.


For example, let's look at the following gridded item.

On the left, you'll see the item setup in Counterpoint with the grid dimensions.

On the right you'll see how that item will appear on the website. The grid dimension tag (i.e. COLOR) becomes the dropdown label and the grid values (e.g. Red, Blue) become the dropdown options.

If you would like the image to change to just the red balloon when Red is selected or to just the blue balloon when Blue is selected, you would need the images 20001^RED.jpg and 20001^BLUE.jpg.


Then, when the customer selects Red from the Color dropdown, the image would change to 20001^RED.jpg.                          When the customer selects Blue from the Color dropdown, the image would change to 20001^BLUE.jpg

The images for each color / style / etc. are named similar to how you would name an alternate image, except [anything] is replaced with the grid dimension.

General Important Details

  1. Grid dimensions are case INSENSITIVE.
    1. For example, you can have the dimension be Blue or BLUE or blue.
  2. These dimensions will also need spaces and non-alphanumeric characters removed. The exceptions to this are dashes and underscores.
    1. For example, let's say we have the following Grid Dimension in Counterpoint:
    2. For the last three values: 
      1. RED & BLUE needs the spaces and non-alphanumeric characters removed, so you would use REDBLUE after the ^.
      2. RED-BLUE only has a dash, so it stays RED-BLUE.
      3. RED_BLUE only has an underscore, so it stays RED_BLUE.
  3. Creating alternate images for gridded images is simply done by adding ^<anything> on to the end of your final name. For example 12345^Blue^1.jpg | 12345^Black^2.jpg


More than One Grid Dimension

For items with multiple grid dimensions...

For the following details, we will be using the following example.

  1. The order in which you set your grid dimensions is important. This will determine what order they need to be in your image name.
    1. For example, images for item 20002 would be in order of ColorSizeType i.e. <sku>^<color>^<size>^<type>.jpg
      1. If you had an image for item 20002 in BLACK & WHITE, XS, Lady's, you would want the image name to be: 20002^BLACKWHITE^XS^Ladys.jpg
    2. Common practice is to put Color as the first grid dimension since color is the most common swatchable attribute.
      1. This way all you need to do is <sku>^<color>.jpg.
  2. The image will need to match each dimension till you have hit the one you are trying to assign an image for. 
    1. Example 1: You want to set an image for each "Color" (Black, White). Images would be like 12345^White.jpg12345^Black.jpg, etc.
      1. When the customer selects white, the image 12345^White.jpg would show. The image would still show when they select the size and type unless you specified an image for it.
    2. Example 2: You want to set an image for each "Size" (Black-XS, White-XS). Images would be like 12345^White^XS.jpg12345^White^S.jpg, etc.
      1. When the customer selects white and then XS, the image 12345^White^XS.jpg would show instead of 12345^White.jpg.
    3. Example 3: You want to set an image for each "Type". Images would be like 12345^White^XS^Ladys.jpg, 12345^White^XS^Mens.jpg, etc.
      1. When the customer selects white, then XS, and then Lady's, the image 12345^White^XS^Ladys.jpg would show instead of 12345^White.jpg or 12345^White^XS.jpg.

Step 2: Adding the Images to Counterpoint

Once you have your image names set, you can add them to the Counterpoint Item Images directory. You can follow these steps on how to add them there:

  1. Access the server where your CounterPoint is installed.
  2. Locate the Directory where CounterPoint is installed. (In most cases, this will be C://Program Files/Radiant Systems/CounterPoint/CPSQL.1 ). The directory structure should look similar to the screenshot below:
  3. Locate your CounterPoint installation's ItemImage Directory - From here navigate to Top-Level → YOUR CP DB NAME → Configuration → ItemImages. (In the example below, we are using DEMOLIQ as the name of our CP DB).

    Note: This is the default directory that our sync will grab images from. Your specific sync configuration may be changed to use a different directory than this.





  4. Move the product images to this folder.
  5. The next time the sync runs for these items, these new images will be uploaded to their respective items. The sync usually runs on a nightly basis.