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.

Pre-requisites

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 color / style /etc. when they choose that option on the product page.

Below is an example of what a gridded item looks like when the customer first lands on the page:

If a customer selects the color red:                                                                           If a customer selects the color blue:


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.

There are some important details you will want to keep in mind:

PLEASE BEWARE

  • Grid dimensions are case INSENSITIVE so you can have the dimension be White / WHITE / white.
  • These dimensions will also need spaces and non-alphanumeric characters removed. The exceptions to this are dashes and underscores. So Black & White becomes BlackWhite and Black-White stays Black-White and Black_White also stays Black_White.

Grid Dimension Names

The names below are just examples. Please refer to the grid labels set in your Counterpoint.

  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.
  2. The image will need to match each dimension till you have hit the dimension you are trying to reach. 
    1. Example 1: Grid Dimensions are Color → Size → Type. You want to set an image for each "Color". Images would be like 12345^White.jpg | 12345^Black.jpg etc.
    2. Example 2: Grid Dimensions are Color → Size → Type. You want to set an image for each "Size". Images would be like 12345^White^XS.jpg | 12345^White^S.jpg etc.
    3. Example 3: Grid Dimensions are Color → Size → Type. You want to set an image for each "Type". Images would be like 12345^White^S^Ladys.jpg | 12345^White^S^Mens.jpg etc.
    4. Example 4: Grid Dimensions are Type → Size → Color. You want to set an image for each "Color". Images would be like 12345^Ladys^S^White.jpg | 12345^Ladys^S^Black.jpg etc.
    5. Common practice is to put the Color as the first grid dimension since color is the most common swatchable attribute. This way all you need to do is <sku>^<color>.jpg.
    6. Please also note that the dimensions leading to the dimension you are trying to set images for don't matter as long as they are existing dimensions. 12345^Ladys^S^White.jpg could also be 12345^Mens^L^White.jpg and it will still be placed for white images.
  3. Creating alternate images for gridded images is simply done by adding ^<anything> on to the end of your final name. For example 12345^Black^1.jpg | 12345^Black^2.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.