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.
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.
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:
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.
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:
- 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.
- The order in which you set your Grid dimensions is important. This will determine what order they need to be in your image name.
- The image will need to match each dimension till you have hit the dimension you are trying to reach.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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:
- Access the server where your CounterPoint is installed.
- 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:
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.
- Move the product images to this folder.
- 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.
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
Item image sizes should be between 50KB and 200KB.
On Magento 1, the sync did not enforce this limit, but images should be at most 200KB as a general rule.